Draw Circle onTouch on a Canvas Image Bitmap

Question

I am displaying an image using Canvas and Bitmap. Now I want to draw a Circle where I touch the ImageView. How can this be achieved?

Instead of tempCanvas.drawCircle(50,100, 60, myPaint);, I want something on the lines of tempCanvas.drawCircle(event.getX(),event.getY(), 60, myPaint);

Here is my Code :

public class New extends Activity {

public final int RESULT_LOAD_IMAGE = 1;
public static int key = 0;

ImageView imageView ;
private Bitmap myBitmap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    imageView = (ImageView) findViewById(R.id.imgView);
    imageView.setAdjustViewBounds(true);
    Button buttonLoadImage = (Button) findViewById(R.id.buttonLoadPicture);
    buttonLoadImage.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {

                            //Get Image from Gallery
            Intent i = new Intent(
                    Intent.ACTION_PICK,
                    android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
            Toast.makeText(getApplicationContext(), "Select Image to Load", Toast.LENGTH_SHORT).show();
            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();

        myBitmap = BitmapFactory.decodeFile(picturePath);

        Bitmap tempBitmap = Bitmap.createBitmap(myBitmap.getWidth(), myBitmap.getHeight(), Bitmap.Config.RGB_565);
        Canvas tempCanvas = new Canvas(tempBitmap);
        tempCanvas.drawBitmap(myBitmap, 0, 0, null);

        Paint myPaint = new Paint();
        myPaint.setColor(Color.WHITE);
        myPaint.setStyle(Paint.Style.STROKE);
        myPaint.setStrokeWidth(15);
        myPaint.setAlpha(60);

        imageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap));

        tempCanvas.drawCircle(50,100, 60, myPaint);
    }

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

}

Answer 1

You have to extend ImageView and override onTouchEvent() and onDraw() methods.

    public class MyImageView extends ImageView {

    private float lastX;
    private float lastY;
    ...

    public MyImageView(Context context) {
        super(context);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {

        lastX = event.getX();
        lastY = event.getY();

        invalidate();
        return super.onTouchEvent(event);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(lastX, lastY, 60, myPaint);
    }
}

and in your xml file instead of:

<ImageButton
    android:id="@+id/imgView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

use:

<my.package.MyImageView
    android:id="@+id/imgView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Answer 2

Extent image view and inside the image view you need to override onDraw method and try to draw circle. I hope It will work.