3
\$\begingroup\$

I'm trying to create a Layout with two columns which are next to each other (I'm accomplishing this behavior with a LinearLayout).

Inside each column, I have two TextViews and two Buttons, which I want to be positioned vertically.

I know I can accomplish this behavior with LinearLayouts, but I also want all the whitespace available vertically to be equally divided, so that the bigger the screen is, the further apart the views are from each other.

The only solution I could think of was to use a GridLayout with four rows for every column, and using android:layout_rowWeight to equally divide the whitespace.

This is the code:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.android.scorekeeper.MainActivity"
    android:paddingTop="8dp"
    android:gravity="center_horizontal"
    android:background="#BDBDBD"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_weight="1">

        <GridLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:rowCount="4"
            android:columnCount="1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="0"
                android:layout_row="0"
                android:layout_rowWeight="1"
                android:textColor="@android:color/black"
                android:textSize="46sp"
                android:id="@+id/score_a"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Fouls: 0"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:textSize="18sp"
                android:id="@+id/fouls_a"/>

            <RelativeLayout
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_row="2"
                android:layout_rowWeight="1">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Goal"
                    android:textColor="#FFFFFF"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:layout_marginTop="8dp"
                    android:onClick="goalA"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>


            <RelativeLayout
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_row="3"
                android:layout_rowWeight="1">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Foul"
                    android:textColor="#FFFFFF"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:layout_marginTop="8dp"
                    android:onClick="foulA"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
        </GridLayout>

        <View
            android:layout_height="match_parent"
            android:layout_width="1dp"
            android:background="@android:color/darker_gray"/>

        <GridLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:rowCount="4"
            android:columnCount="1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="0"
                android:layout_row="0"
                android:layout_rowWeight="1"
                android:textColor="@android:color/black"
                android:textSize="46sp"
                android:id="@+id/score_b"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Fouls: 0"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:textSize="18sp"
                android:id="@+id/fouls_b"/>

            <RelativeLayout
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_row="2"
                android:layout_rowWeight="1">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Goal"
                    android:textColor="#FFFFFF"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:layout_marginTop="8dp"
                    android:onClick="goalA"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>


            <RelativeLayout
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_row="3"
                android:layout_rowWeight="1">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Foul"
                    android:textColor="#FFFFFF"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:layout_marginTop="8dp"
                    android:onClick="foulA"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
        </GridLayout>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:padding="8dp">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:textSize="16sp"
        android:layout_centerHorizontal="true"
        android:onClick="reset"/>

    </RelativeLayout>

    </LinearLayout>

And this is the layout it produces:

enter image description here

This code works, but I'm not sure about its efficiency. Another thing I'm not sure about is wrapping the Buttons in RelativeLayouts to make the whitespace be distributed around them, and not inside of them.

I would like to know if there is a more efficient way to accomplish this layout, since I'm a begginer to making Android apps.

\$\endgroup\$
  • 1
    \$\begingroup\$ You can use linear layout with weight.. \$\endgroup\$ – Meenal May 3 '17 at 9:51
  • \$\begingroup\$ @Meenal How can I make layout_weight affect the whitespace around the Buttons, instead of making them bigger? \$\endgroup\$ – Larpee May 3 '17 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.