How to draw a circle over an imageview

Question

How can I draw a circle over an image at a point where user touch the image.

The image is set using imageview.

I have found one solution on net which creates image bitmap on new canvas and draws circle over it (solution found at http://joerg-richter.fuyosoft.com/?p=120 ) Something like

ImageView imageView = (ImageView) findViewById (R.id.image1);  
myBitmap = BitmapFactory.decodeResource(getResources(), drawid);                   
Paint myCircPaint = new Paint();

tempBitmap = Bitmap.createBitmap(bitmapXht, bitmapYht, Bitmap.Config.ARGB_8888);
Canvas tempCanvas = new Canvas(tempBitmap);

 tempCanvas.drawBitmap(myBitmap, 0, 0, null);

 myCircPaint.setStrokeWidth(5);
 tempCanvas.drawCircle(evX, evY, 15, myCircPaint);

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

This works but since I am drawing circle with every touch it draws everything everytime. How can I avoid drawing the main image everytime. Is it possible to retain the canvas across multiple touch events.

I am still new to Android so please excuse if this is something very simple

Answer 1

You need a custom view.

Create TouchableImageView Java class:

public class TouchableImageView extends android.support.v7.widget.AppCompatImageView {

    public static final String BUNDLE_SUPER_STATE = "bundle_super_state";
    public static final String BUNDLE_POINT_LIST = "bundle_point_list";

    private float mRadius;
    private Paint myCirclePaint = null;
    private List<PointF> mPoints;
    private GestureDetector mDetector;

    public TouchableImageView(Context context) {
        super(context);
        init(context);
    }

    public TouchableImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public TouchableImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mRadius = 15;
        myCirclePaint = new Paint();
        mPoints = new ArrayList<>();
        mDetector = new GestureDetector(context, new MyListener());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mPoints != null) {
            for (int i = 0; i < mPoints.size(); i++) {
                canvas.drawCircle(mPoints.get(i).x, mPoints.get(i).y, mRadius, myCirclePaint);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mDetector.onTouchEvent(event);
    }

    @Nullable
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(BUNDLE_SUPER_STATE, super.onSaveInstanceState());
        bundle.putParcelableArrayList(BUNDLE_POINT_LIST, (ArrayList<? extends Parcelable>) mPoints);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            mPoints = bundle.getParcelableArrayList(BUNDLE_POINT_LIST);
            super.onRestoreInstanceState(bundle.getParcelable(BUNDLE_SUPER_STATE));
        } else {
            super.onRestoreInstanceState(state);
        }
    }

    class MyListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDown(MotionEvent event) {
            if (mPoints != null) {
                mPoints.add(new PointF(event.getX(), event.getY()));
                invalidate();
            }
            return true;
        }
    }
}

And replace your ImageView with TouchableImageView

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

       <com.example.touchable.TouchableImageView
           android:id="@+id/image_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:src="@mipmap/ic_launcher" />

</android.support.constraint.ConstraintLayout>