How to make a bitmap using canvas clickable?

Question

How to make a bitmap created clickable? Below is the code that I used to create a bitmap using canvas.

public class DrawView extends View implements OnClickListener { public DrawView(Context context) { super(context); paint = new Paint(); image = BitmapFactory.decodeResource(getResources(), R.drawable.andmrktsmall); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int canWidth = canvas.getWidth(); int canHeight = canvas.getHeight(); int width = (canWidth - 200) / 2; int height = (canHeight - 100) / 2; Bitmap indexcanvas = Bitmap.createScaledBitmap(image, 200, 100, true); canvas.drawBitmap(indexcanvas, width, height, paint); this.setBackgroundColor(Color.YELLOW); } @Override public void onClick(View v) { Toast.makeText(context, "View is clicked", 1).show(); } } 

Answer 1

By setting OnClickListener on this view, all of this will be clickable (but not limited to your bitmap). To verify that the user clicked only the bitmap, you must override onTouchEvent (the MotionEvent event) and check if the touch coordinates match the bitmap.

 @Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch(event.getAction()) { case MotionEvent.ACTION_DOWN: //Check if the x and y position of the touch is inside the bitmap if( x > bitmapXPosition && x < bitmapXPosition + bitmapWidth && y > bitmapYPosition && y < bitmapYPosition + bitmapHeight ) { //Bitmap touched } return true; } return false; } 

Just replace bitmapXPosition and bitmapYPosition with the coordinates that you use to draw the bitmap, and bitmapWidth and bitmapHeight with the width and height that you use for drawing.

Also try not to allocate memory (create objects) inside the onDraw () method of any kind. This is bad for execution.

EDIT

 private Rect r; private Paint paint; Bitmap bitmap; public TestRect(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); paint = new Paint(); paint.setColor(Color.BLUE); r = new Rect(); bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_launcher); } public TestRect(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); paint.setColor(Color.BLUE); r = new Rect(); bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_launcher); } public TestRect(Context context) { super(context); paint = new Paint(); paint.setColor(Color.BLUE); r = new Rect(); bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_launcher); } @Override public void onDraw(Canvas c) { r.set(getWidth()/2, getHeight()/2, getWidth()/2 + 200, getHeight()/2 + 200); //c.drawRect(r, paint); c.drawBitmap(bitmap, null, r, paint); } @Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch(event.getAction()) { case MotionEvent.ACTION_DOWN: //Check if the x and y position of the touch is inside the bitmap if( x > getWidth()/2 && x < getWidth()/2 + 200 && y > getHeight()/2 && y < getHeight()/2 + 200 ) { Log.e("TOUCHED", "X: " + x + " Y: " + y); //Bitmap touched } return true; } return false; } 

By drawing a bitmap using Rect as the coordinates, you can check if the touch is inside the bitmap or not. Alternatively, instead of this large and ugly if statement, you can use

 if(r.contains(x, y)) { //BITMAP TOUCHED } 

Answer 2

 @Override public boolean onTouchEvent(MotionEvent event) { int x=(int)event.getX(); int y=(int)event.getY(); if (drawable.getBounds().contains(x,y) && event.getAction()==MotionEvent.ACTION_DOWN) { Log.e(TAG, "onTouchEvent: drawable touched "); return true; } return false; }