How to configure GridLayout to take most of the horizontal screen space

Question

I am trying to mimic this sort of design on android using GridLayout:

I think I have most of it done using the below code:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="8"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:background="@drawable/rounded">

    <TextView
        android:layout_gravity="center_horizontal"
        android:text="Some Text Here"
        android:textStyle="bold"
        android:textColor="#000000"
        android:textSize="30dp"
        android:textAlignment="center"
        android:layout_columnSpan="8"
        android:paddingBottom="10dp"
        />

    <TextView
        android:text="16"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:textColor="#000000"
        android:textSize="18dp"
        android:paddingLeft="10dp"
        android:paddingBottom="5dp"/>

    <TextView
        android:text="27"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:textSize="18dp"
        android:textColor="#000000"/>

    <TextView
        android:text="52"
        android:textStyle="bold"
        android:layout_columnSpan="6"
        android:textSize="18dp"
        android:paddingRight="10dp"
        android:textColor="#000000"/>

    <TextView
        android:text="Text 1"
        android:paddingRight="20dp"
        android:paddingLeft="10dp"
        android:textSize="18dp"
        android:textColor="#ff565656"
        android:paddingBottom="10dp"/>

    <TextView
        android:text="Text 2"
        android:paddingRight="20dp"
        android:textSize="18dp"
        android:textColor="#ff565656"/>

    <TextView
        android:text="Text 3"
        android:textColor="#ff565656"
        android:textSize="18dp"
        android:paddingRight="10dp"/>

</GridLayout>

However, when I run it in my emulator it looks like this:

Notice that it is leaving too much space on the right and the left.

Question

• How can I configure the grid layout so it takes up most of the screen on right and left of it (just like in the sample above).

• How can I change the screen background color - Right now it is black, I'd like to change it to another color.

Answer 1

For GridLayout, replace this...

android:layout_width="wrap_content"

with...

android:layout_width="fill_parent"

as follows...

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="8"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:background="@drawable/rounded">

Answer 2

@Anthony - You are not using the power and the essence of GridLayout in the code written. As you have manually allotted paddings to the views in order to make them appear in the first screen, which is very much possible with any other layout as well. Like below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"

    android:layout_height="0dp"
    android:layout_weight="2"
    android:text="Some Text Here"
    android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="16"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="17"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="18"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text1"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text2"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text3"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

And, GridLayout is about rows and columns. So if you want your Views to be placed such that and to use it to fuller, you can supply the row as well as column position where you view should be placed in which order and its other properties will add up to it. Here is a link.

Try this out and I am sure you will understand it much better. Happy coding. :)