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>