Member Avatar

I'm developing my 1st app. everything's working but i'm having problems with the visual design. i think i need an out of the box idea here.
basicly, it's a 1 page/screen app.
what the user sees is a big circle that has 12 parts, looks just like a color wheel.
when the user touches one of the parts a msg is shown on top. when he touches another part, another msg is shown. (every part of the circle shows a different string).
the issue is the fact that I needed to position imageviews that can trigger the action (showing the string) in a circle.
what i did was this-
i made a background image that has the color wheel circle. it is a static picture that doesn't do anything of course.
then i took another 12 small icon images (each is a imageview, all inside relative layout) and positioned them on top of the background image, so that every img is located on another part of the circle. i positioned the small images by aligning it to the top/bottom/left/right and moving it to the perfect place with margin.

android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginRight="66dp" android:layout_marginTop="165dp"

i'm sure u can guess the problem by now.. the image of the circle and the little icons aren't connected in any way and on every device with different size everything is moved and looks horrible.

i don't have any other idea of how to do this, please help.
i don't even mind if the 12 little icons are gonna be just invisible img that the user doesn't see (so that if it moves by 5 dp to the left it still doesn't look ugly) but i need it to stay somehow on the right circle part otherwise the user touches it and nothing will happen.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.