Search code examples
androidandroid-imageviewandroid-custom-view

How to add a custom view on an imageview in android


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


Solution

  • 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