Android layout organisation for grouping custom shaped buttons

Question

I am trying to group the buttons in android so that it appear like in the image below. I tried doing it using floating technique but I was not successful. I was hoping that floating it top left and right may solve my problem but it doesn't seem to be working.

I am getting the result where all the buttons are stacked on top of each other or they are horizontally places one after the other.

I have three buttons above as a separate image (png) files. I am trying to achive this using imageview which will be assigned a touchListener to act as a button.

Any help would be great.

Answer 1

extend View class and draw your images like the image you have put here. After that when a click occurs check coordinates to decide which colored button clicked.

Answer 2

I used a technique from this blog.

https://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/

Basically, All you do is use two images. Second image with hotspots goes on top of the main image (in this case above hexagon image) and then when you click, a function is called to find out what colour was clicked and depending on that you can call your action.

Hotspot image needs to be of same size as original image and the hotspots needs to be standard colorrs ie blue, red, yellow, etc to make it easy to determine which colour was clicked.

Works nicely with the image above and works quite accurately too.

Other option is to use coordinates but I haven't had much time to look into this technique.