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

Answer 2

@ SammyG you can edit in this layout according to your requirements..

<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"
tools:context="com.example.android.stackoverflow_test.MainActivity">

<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="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark"
            android:padding="20dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:padding="20dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark"
            android:padding="20dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:padding="20dp" />
    </LinearLayout>
</LinearLayout>

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerInParent="true"
    android:background="@mipmap/ic_launcher" /></RelativeLayout>

Answer 3

Here is a fully tested layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button one"/>

    <Button
        android:id="@+id/btn_2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn_1"
        android:text="Button two"/>

    <Button
        android:id="@+id/btn_3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button three"
        android:layout_below="@id/btn_1"/>

    <Button
        android:id="@+id/btn_4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_2"
        android:layout_toRightOf="@id/btn_3"
        android:text="Button four"/>

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:translationZ="10dp"
        android:src="@drawable/ti_logo"/>

</RelativeLayout>