How do I draw a rectangle that takes up 50% of the device width for an Android UI layout?

Issue

I would like to draw a gray-colored rectangle across 50% of the device's screen width on the UI and have the rectangle centered horizontally. I am going to embed 2 buttons horizontally in the rectangle for user input. Is there an easy way to set up the layout for 50% of the screen width? Use a drawable for the rectangle?

Output based on LinearLayout code recommended below:

Below is layout file. Note I had to include layout_width="wrap_content" for both Buttons because Android Studio did not like layout_width="0dp" due to nested layouts warning.

<LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

        <LinearLayout
            android:id="@+id/LinearLayout4"
            android:layout_marginTop="5dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="6"
            style="?android:attr/borderlessButtonStyle"
            android:baselineAligned="false"
            android:background="@color/colorHint">

            <Button
                android:id="@+id/clearButton"
                android:text="Clear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="#FFFFFF"
                style="?android:attr/borderlessButtonStyle"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textStyle="bold"
                android:background="@drawable/savebutton_rounded"
                android:drawableStart="@drawable/ic_clear_white_24dp"
                android:drawableLeft="@drawable/ic_clear_white_24dp"
                android:drawablePadding="2dp"
                android:layout_marginEnd="10dp"
                android:layout_marginRight="10dp"
                android:onClick="onClickClear"  />

            <Button
                android:id="@+id/saveButtonRV"
                android:text="Save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="#FFFFFF"
                style="?android:attr/borderlessButtonStyle"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textStyle="bold"
                android:background="@drawable/savebutton_rounded"
                android:drawableStart="@drawable/ic_save_white_24dp"
                android:drawableLeft="@drawable/ic_save_white_24dp"
                android:drawablePadding="3dp"
                android:layout_marginStart="10dp"
                android:layout_marginLeft="10dp"
                android:onClick="onClickSave"  />

        </LinearLayout>

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

    </LinearLayout>

Solution

If I'm understanding you correctly, you can do it all in just the layout XML, using a ViewGroup with a gray background for the rectangle, and taking advantage of weights to size things properly.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical">

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#cccccc">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</LinearLayout>

You didn't specify the height of the gray rectangle, so I assumed you want it to wrap the Buttons.

Answered By - Mike M.