Nesting RelativeLayouts within LinearLayout

Question

I am trying to achieve the following layout in Android with the main heading at the top and three subheadings spaced equally apart below, with some buttons below that:

I was able to accomplish this with the following XML, but I feel like I am not using the RelativeLayout and LinearLayout properly:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cfff"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="Title"
        android:textSize="80sp"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight=".5">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/text_caption1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_number1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption1"
                android:text="1"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

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

            <TextView
                android:id="@+id/text_caption2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_number2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption2"
                android:text="10"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

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

            <TextView
                android:id="@+id/text_caption3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_sets"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption3"
                android:text="3"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

        </RelativeLayout>
    </LinearLayout>

    <!-- Button1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button1"
        android:textSize="20sp"/>

    <!-- Button2 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button2"
        android:textSize="20sp" />

</LinearLayout>

I'm focusing somewhat on the Subheading portion, although any suggestions on the overall layout would be welcome. So I used 3 different RelativeLayouts to put the "Subheading" captions with their respective numbers, and nested those within a horizontal LinearLayout to get them spaced next to each other horizontally.

This seems to be creating a bit of a problem, since Android Studio is complaining that my use of layout_weight within nested layouts is bad for performance. When I get rid of the layout_weight however, everything falls apart and I only see the "Title" and one subheading. I'm also wondering whether I could have accomplished this more elegantly with just one RelativeLayout and no nesting, but I can't see how to code something like this without the use of a LinearLayout.

Thanks in advance for any suggestions!

Answer 1

Yes,you can accomplish this more elegantly with just one RelativeLayout and no nesting I hope this is what you are looking for

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cfff"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Title"
        android:textSize="80sp" />

    <TextView
        android:id="@+id/text_caption1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number1"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="left"
        android:text="1"
        android:textSize="80sp" />


    <TextView
        android:id="@+id/text_caption2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number2"
        android:gravity="center"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:text="2"
        android:textSize="80sp" />

    <TextView
        android:id="@+id/text_caption3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number3"
        android:gravity="right"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="right"
        android:text="3"
        android:textSize="80sp" />


    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button2"
        android:text="Button1"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button2"
        android:textSize="20sp" />
    </RelativeLayout>