Rounded buttons

Question

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

I know that with Android that we can only have square type views so how would it be possible to do this? OpenGl or something? Anyone have any links to something related? Basically I want curved buttons that are close together.

Answer 1

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

But if you want to use stock views, I'd suggest the following. First, use a RelativeLayout container to arrange the four outside buttons in a 2x2 grid. Then position the center button so it overlaps the grid in the center. Put the center button at a higher Z (closer to the user) than the four surrounding buttons. Then use transparency as part of the button images to get them to look like you want. Then (hopefully) try it out. If the Z order is right, the center button will capture taps that would otherwise have gone to one of the other four buttons.

This actually won't work as is, because the center button square will intrude into the surrounding squares. I don't know if it would work, but you can then try replacing the center button with another grid of button "pieces". The grid would have empty positions except where the center button image overlaps the grid cell. You'll have to make this fine enough to avoid intruding into the outer button images.

EDIT:

It occurred to me that perhaps you could do this with a group of TouchDelegate objects. You would arrange the buttons as I described at first, but make only the parent container clickable. It would use five TouchDelegates to find out which button (if any) was under the tap coordinates. Unfortunately, TouchDelegate only work with Rect hit regions, which leaves us where we started. However, you could cannibalize the source of TouchDelegate and define your own version that accepts some sort of general shape class instead of just a Rect. (The shape class would have to have the equivalent of Rect.contains() to test for a hit. There's nothing built into Android, but you could easily write your own classes for the specific shapes you have.)

You could simplify the code a bit by putting the hit and delegation logic directly in the parent container view, but it would be cleaner, I think, to have a reusable delegate class that separates out the event handling from the container itself.

Answer 2

You can use a mask color for example: a completely red button,like the image that you posted,the just do pixel color check 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 have to find out specific api on android to do the task,like check pixel color.