1

I need to build the following view:

enter image description here

Where the buttons can be regular buttons that are accessed from java code using findViewById() method.

I'm not sure if i can do that using LayerList or if I need to implement a custom view from scratch? Can anyone suggest some path that I can follow to achieve this?

Update

Right now I have this:

enter image description here

What I need to do for now is: - hide what is outside the circle; - only parts of the buttons that are inside the cicle should fire the onClick event.

Should I use a custom viewgroup to do that? I tried, but I wasn't able to draw the circle on top of the buttons (should be possible do that in the onDraw() method?)...

Here is my code:

main_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <include layout="@layout/custom_layout" /> </LinearLayout> </RelativeLayout> 

custom_layou.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/buttons_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="14dp" android:paddingBottom="10dp" android:background="#CC0000FF" android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button3" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button4" /> </LinearLayout> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignTop="@+id/buttons_layout" android:layout_alignLeft="@+id/buttons_layout" android:layout_alignBottom="@+id/buttons_layout" android:src="@drawable/circle_foreground" /> </RelativeLayout> 

circle_foreground.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="100dp" android:thickness="0dp" android:useLevel="false" > <solid android:color="@android:color/transparent" /> <stroke android:width="4dp" android:color="#000000"/> </shape> 

2 Answers 2

1

Two things you must combine:

  1. Build the layout by overlaying your buttons (lower layer) with an ImageView (upper layer), that has a hole in it. See here, how to do that. The two layers can be defined with a FrameLayout

  2. Now you must delegate all touches on the circle down to the buttons. This should be possible by setting a TouchListener on the ImageView. This Touchlistener returns true, if the touch was outside the circle, otherwise false. When returning false, Android should pass the touch down to the next level, which is the layer with the buttons.

All in all, I hope the outcoming effect is worth the work as it seems to be a lot of work and testing effort.

Sign up to request clarification or add additional context in comments.

Comments

0

You can use 6 different imageview and combine to one circle imageview in relativelayout, in each imageview set their onclicklistener so that you can do something you want

1 Comment

I'm not sure what do you mean by "...combine to one circle imageview in relativelayout". Can you explain how could I do that? I am probably missing something easy :s

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.