Custom view with buttons

Question

I need to build the following view:

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:

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>

Answer 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.

Answer 2

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