Android Using OnTouchListener in Canvas

Question

So, I'm developing an app where user will be able to interact with image, I need to use OnTouchListener, but I don't know how to do it properly. Whenever I click on image - nothing happens. In the end I'm trying to get circle that will appear when user touches the image and that'll move with the finger. Here's my MainActivity:

public class MainActivity extends Activity{



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

        File file = new File(Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");

        String fileString = file.getPath();


        takenPhoto = (ImageView) findViewById(R.id.imageView1);

        bmp = BitmapFactory.decodeFile(fileString);
        mutableBitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
        takenPhoto.setImageBitmap(mutableBitmap);

    }

    private static class DrawView extends View {



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


         public boolean onTouch(View view, MotionEvent event) {


                int action = event.getAction(); 

                drawPos.x = event.getX();
                drawPos.y = event.getY();

                switch (action) { 
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    drawing = true;
                    this.invalidate();
                    break; 
                case MotionEvent.ACTION_UP:   
                case MotionEvent.ACTION_CANCEL:
                    drawing = false;
                    this.invalidate();
                    break; 

                default: 
                    break; 
                }



             return true;
         }

         @Override
         protected void onDraw(Canvas canvas) {

             super.onDraw(canvas);

             if (drawing) {
                 canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
             }
         }





    }


}

Answer 1

A simpler solution would be to use a custom ImageView that will handle both the image and the draw:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PointF;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class DrawingImageView extends ImageView {

    private PointF point;
    private Paint paint = new Paint();

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

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

    public DrawingImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                point = new PointF(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                point.set(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                point = null;
                invalidate();
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(@NonNull Canvas canvas) {
        super.onDraw(canvas);
        if (point != null) {
            canvas.drawCircle(point.x, point.y, 100, paint);
        }
    }
}

Then in your xml file:

    <your.package.DrawingImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

And in your Activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //...
    view = (DrawingImageView) findViewById(R.id.image);
    //...
    view.setImageBitmap(mutableBitmap);
}

That's all

Answer 2

You need to remove the last onTouch method from your Activity and remove setOnTouchListener . Since the activity captures touch event, the view will never get access to it.

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        File file = new File(Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");
        String fileString = file.getPath();
        takenPhoto = (ImageView) findViewById(R.id.imageView1);

        bmp = BitmapFactory.decodeFile(fileString);
        mutableBitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
        takenPhoto.setImageBitmap(mutableBitmap);
    }

    private static class DrawView extends View {

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

         public boolean onTouch(View view, MotionEvent event) {
                int action = event.getAction(); 
                drawPos.x = event.getX();
                drawPos.y = event.getY();

                switch (action) { 
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    drawing = true;
                    this.invalidate();
                    break; 
                case MotionEvent.ACTION_UP:   
                case MotionEvent.ACTION_CANCEL:
                    drawing = false;
                    this.invalidate();
                    break; 

                default: 
                    break; 
                }
             return true;
         }

         @Override
         protected void onDraw(Canvas canvas) {
             super.onDraw(canvas);
             if (drawing) {
                 canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
             }
         }
    }

}