How to add a custom view on an imageview in android

Question

I am making an android App in which the user picks and loads a image from the gallery. I am done with loading my image in an image view. There is a button above the image view. When the user clicks the button a rectangle has to be drawn on the image with default position and dimensions. The user can re-size this rectangle by clicking on the sides and also drag the rectangle to any point in the image view. I did some research on Google and stack overflow to find that I need to create a custom view for my rectangle and draw it over the imageview. The solutions that I found have shown how to make a custom view and how to add touch events to that. But the problem is I didn't find a solution to how to add myCustomView on the image view in an activity. Please help me clearing this doubt.

Below is my main activity on which there is a button (Load Image) User clicks on it to load an image from the gallery. The path of the image is sent to the other activity.

public class MainActivity extends Activity {
    private static int RESULT_LOAD_IMAGE = 1;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button buttonLoadImage = (Button) findViewById(R.id.buttonLoadPicture);
    buttonLoadImage.setOnClickListener(new View.OnClickListener() {

        public void onClick(View arg0) {
            Intent i = new Intent(
                    Intent.ACTION_PICK,
                    android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

            startActivityForResult(i, RESULT_LOAD_IMAGE);
        }
    });
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK
            && null != data) {
        Uri selectedImage = data.getData();
        String[] filePathColumn = { MediaStore.Images.Media.DATA };

        Cursor cursor = getContentResolver().query(selectedImage,
                filePathColumn, null, null, null);
        cursor.moveToFirst();

        int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
        String picturePath = cursor.getString(columnIndex);
        cursor.close();
        Intent i = new Intent(MainActivity.this, ImageActivity.class);
        i.putExtra("key", picturePath);
        startActivity(i);
        finish();

    }
}
}

Below is the activity where the image is displayed on the imageview and the mycustomview has to be called.

public class ImageActivity extends Activity {
 Paint paint = new Paint();


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_image);

    Bundle bundle = getIntent().getExtras();
    final String value = bundle.getString("key");
    Bitmap bmp = BitmapFactory.decodeFile(value);
    ImageView imageView = (ImageView) findViewById(R.id.imgView);
imageView.setImageBitmap(bmp);


    Button buttonExit = (Button) findViewById(R.id.buttonExit);
    buttonExit.setOnClickListener(new View.OnClickListener() {

        public void onClick(View arg0) {
            finish();
        }
    });

    Button buttonDrawRect = (Button) findViewById(R.id.DrawRect);
    buttonDrawRect.setOnClickListener(new View.OnClickListener() {

        public void onClick(View arg0) {


        }
    });
}

enter image description here

So you want the 'imageView' to resize when you click on the sides.right?? — sonu thomas, Aug 09 '12 at 18:14
No look at the image in the edit of my question.. I just want a red rectangle to be drawn over my image.. to focus some specific part of the image. I want the rectangle to be resized and be dragged but not the imageView.. — Vikram, Aug 09 '12 at 18:22

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

Go through these links. May help you

Overlapping Views in Android

How to add overlay view over other view in android?

Also check the linked posts also

Hope this may help you

edited May 23 '17 at 12:13

Community

1
1

answered Aug 09 '12 at 18:34

sonu thomas

2,161
4
24
38

The customView has to be added dynamically.. i dont know if this would work. I just want to know how to add mycustomView in the activity, over my image view.. – Vikram Aug 09 '12 at 18:54

score 0 · Answer 2 · answered Aug 09 '12 at 18:35

0

Basically draw the image on a SurfaceView. Then for whatever goes over it set android:background="@null" for transparency. Thats how you could layer something like that. Do not set to null but to @null.

answered Aug 09 '12 at 18:35

Code Droid

10,344
17
72
112

my question is how to get it over the image at first place. because i havve my rectangle as a another view. I want to add that view to my imageview. – Vikram Aug 09 '12 at 18:52

How to add a custom view on an imageview in android

2 Answers2