How to add a red dot in an image at a particular coordinates of an imageview?

Question

I am working on my uni project where I have to mark the position in an image(human body in this case) that a user touches upon.

I am already having the X and Y coordinates of the position where a user has clicked by using the following code

mbody.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent e) {
            if (e.getAction() == MotionEvent.ACTION_DOWN) {
                Toast.makeText(getApplicationContext(),String.valueOf(e.getX())+","+
                        String.valueOf(e.getY()),Toast.LENGTH_LONG).show();
                return true;
            }
            return false;
        }
    });

My question is now that I already have the coordinates, how can I put a marker in that position of the imageview so that I can obtain the resultant image as given below

Create a custom image view. Override the onTouchEvent. Store the position. Invalidate the view. Override the onDraw and use the stored position to draw a circle on the canvas at the desired pos (call super). — raldone01, Jun 08 '19 at 13:41
[this link](https://stackoverflow.com/questions/16729169/how-to-maintain-multi-layers-of-imageviews-and-keep-their-aspect-ratio-based-on) should be usefull — Morteza Jalambadani, Jun 08 '19 at 13:50
One alternative can be to use a transparent ConstraintLayout overlaying on top of the layout with the human body and position an ImageView with the red dot based on X and Y. Using guidelines for example. — Juan, Jun 08 '19 at 14:00

Ramees Thattarath · Answer 1 · 2019-06-09T08:42:40.427

as @raldone01 mentioned

Create a custom image view. Override the onTouchEvent. Store the position. Invalidate the view. Override the onDraw and use the stored position to draw a circle on the canvas at the desired pos

ie, replace your ImageView with below View

public class MyIV extends AppCompatImageView {

private int x = 0;
private int y = 0;
private Paint paint = new Paint();
private float radius = 20;


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

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

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



private void init(){
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.drawCircle(x,y,radius,paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            x = (int)event.getX();
            y = (int)event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            x = (int)event.getX();
            y = (int)event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            x = (int)event.getX();
            y = (int)event.getY();
            invalidate();
            break;
    }
    return true;
}

}

Did you return false on MotionEvent.ACTION_UP on purpose? Won't this draw the circle in the top left corner when initialized? — raldone01, Jun 08 '19 at 22:54
No it will just inform the view that action up event is not consumed. — Ramees Thattarath, Jun 09 '19 at 05:11

How to add a red dot in an image at a particular coordinates of an imageview?

1 Answers1