How would I create this layout

Question

I understand this isn't possibly the best title so please edit if you have a better title.

Ok, so I have a mock up of part of the design I want to create in android, which I will post below.

I am not the best in working with custom shapes so I thought I could possibly go down the route of Images with clickable areas. This would mean I just import the image and just monitor if the user clicks a section of the screen.

What would be the best approach?

If creating it with XML is better do you have a good tutorial you could point me to.

Thanks

Answer 1

This May Help

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 2"/>


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 3"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 4"/>

    </LinearLayout>

</LinearLayout>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/circle"/></RelativeLayout>

Keep this file in drawable folder for circle button background named as circle

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

<size android:width="200dp" android:height="200dp" />
<solid android:color="@android:color/holo_red_light" /></shape>

Looks Like This