Custom view with buttons

Question

I need to create the following view:

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

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

Update

Now I have this:

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

Should I use a custom viewing group for this? I tried, but I could not draw a circle on top of the buttons (is this possible 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> 

Answer 1

Two things you should combine:

• Build the layout by overlaying your buttons (bottom layer) on the ImageView (top layer), in which there is a hole. See here how to do it . Two layers can be defined using FrameLayout

• Now you must delegate all the touches in a circle to the buttons. This should be possible by installing TouchListener on ImageView . This TouchListener returns true if the touch is outside the circle, otherwise false. When returning false, Android should pass the touch to the next level, which is the button layer.

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

Answer 2

You can use 6 different images and merge the images into a single circle in the relativity mode, in each image view, set them to onclicklistener so that you can do something you want.