Custom Buttons in Android - Am I Doing It Right?

Question

I am trying to implement four custom buttons, as you can see in the following figure:

What I have done so far: I took 4 different pictures - each of them was visible only in one color (see above). The other part of the image is transparent. This leads to the fact that I have four images of the same size.

Now I used the relative layout, where all my 4 images are added to the images in the same position. Because of the transparency, I see the picture I want.

For my ImageViews, I implemented onTouchListener with the following content:

private class ImageOnTouchListener implements View.OnTouchListener { private int categoryId; public ImageOnTouchListener(int categoryId) { this.categoryId = categoryId; } @Override public boolean onTouch(View v, MotionEvent event) { Bitmap bmp = Bitmap.createBitmap(v.getDrawingCache()); int x = (int) event.getX(); int y = (int) event.getY(); boolean isInsideBitmap = x < bmp.getWidth() && y < bmp.getHeight() && x >= 0 && y >= 0; boolean isActionUp = event.getAction() == MotionEvent.ACTION_UP; if (isInsideBitmap) { int color = bmp.getPixel(x, y); bmp.recycle(); if (color == Color.TRANSPARENT){ return false; } else { if (isActionUp) { buttonClick(); } } }else{ bmp.recycle(); } return true; } } 

This approach works, but it consumes a lot of memory since I always create a bitmap when I move my finger. I'm not quite sure if this is the best way to implement this. Is there something I can do differently that can lead to a more efficient way?

Answer 1

Using the fact that you can determine if the coordinates are in a circle with the equation x² + y² <= radius² when the center of the circle is (0, 0), I think the following should work.

 public class ImageOnTouchListener implements View.OnTouchListener { // TODO Adjust this value private static int QUADRANT_RADIUS = 100; // in pixels // TODO Adjust this value private static int SPACE_BETWEEN_QUADRANTS = 5; // in pixels @Override public boolean onTouch(View v, MotionEvent event) { int relativeX = (int) (event.getX() - v.getX()); int relativeY = (int) (event.getY() - v.getY()); int center = QUADRANT_RADIUS + (SPACE_BETWEEN_QUADRANTS / 2); boolean isInsideCircle = Math.pow(relativeX - center, 2) + Math.pow(relativeY - center, 2) <= Math.pow(center, 2); boolean isInsideBottomLeftQuadrant = isInsideCircle && relativeX <= QUADRANT_RADIUS && relativeY >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS; boolean isInsideBottomRightQuadrant = isInsideCircle && relativeX >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS && relativeY >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS; boolean isInsideTopLeftQuadrant = isInsideCircle && relativeX <= QUADRANT_RADIUS && relativeY <= QUADRANT_RADIUS; boolean isInsideTopRightQuadrant = isInsideCircle && relativeX >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS && relativeY <= QUADRANT_RADIUS; boolean isActionUp = event.getAction() == MotionEvent.ACTION_UP; if (isActionUp) { if (isInsideBottomLeftQuadrant) { // Handle bottom left quadrant click buttonClick(); return true; } else if (isInsideBottomRightQuadrant) { // Handle bottom right quadrant click } // etc. } return false; } } 

You will need to adjust the values ​​of QUADRANT_RADIUS and SPACE_BETWEEN_QUADRANTS , and then either process all touch events from one view (for example, my fragment), or have a slightly different touch listener on the image.