Rounded buttons

Question

I want to have something like these five buttons, one button surrounded by four other buttons. Similar:

I know that with Android we can only have square views, so how can this be done? OpenGl or something else? Does anyone have links to something related? Basically, I want the curved buttons to be close to each other.

Answer 1

My guess is that at the end of the day it will be easier to do in the user view.

But if you want to use stock representations, I would suggest the following. First use the RelativeLayout container to place the four external buttons in a 2x2 grid. Then place the center button so that it overlaps the grid in the center. Place the center button on a higher Z (closer to the user) than the four surrounding buttons. Then use transparency as part of the button images to make them look the way you want. Then (hopefully) try it. If order Z is right, the center button will grab taps that would otherwise go to one of the four other buttons.

This will not actually work as it is, because the square of the center button will invade the surrounding squares. I don’t know if this will work, but you can try replacing the center button with a different grid of “pieces” buttons. The grid will have empty positions, except when the image of the central button overlaps the grid cell. You will need to do this well enough to avoid intrusion into external button images.

EDIT

It occurred to me that perhaps you could do this with a group of TouchDelegate objects. First, you define the buttons as I described, but just make the parent container clickable. He would use five TouchDelegate to find out which button (if any) was under the coordinates of the tap. Unfortunately, TouchDelegate only works with Rect areas that leave us where we started. However, you can cannibalize the source of TouchDelegate and define your own version, which takes some kind of general form class instead of just Rect . (The form class must have the equivalent of Rect.contains() to check for hit. Nothing is built in Android, but you can easily write your own classes for the shapes you define.)

You can simplify the code a bit by placing the hit and delegate logic directly in the view of the parent container, but it would be, in my opinion, cleaner to have a multiple delegation class that separates event handling from the container itself.

Answer 2

You can use the color of the mask, for example: a completely red button, like the image you placed, just check the color of the pixel against the red button, something like:

 bool insideMyAwsomeShapeButton(int mouse_x,int mouse_y) { if get_image_pixel_color_at_pos(mouse_x,mouse_y) == rgbcolor(1,0,0) { return true; } return false; } 

again, this is just a thought, you need to find out the specific api on android in order to complete the task, for example, check the pixel color.