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:
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.
