Why GridLayout doesn't fill all the available space?

Question

I have a GridLayout (to which I add the children programmatically).

The result is ugly because the GridLayout doesn't fill all the available space.

This is the outcome:

this is my XML:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
 >

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >
    </android.support.v7.widget.GridLayout>
</HorizontalScrollView>

</ScrollView>

Answer 1

I think that everything is fine with your layout's behavior.

The android:layout_width="match_parent" setting for GridLayout, which is placed inside HorizontalScrollView, has no effect. A single child view inserted into GridLayout determines GridLayout's actual width (height if you used vertical ScrollView container), that can be bigger than the parent's screen width (width=match_parent setting thus has no effect here; and also for childviews). The columns and rows of the GridLayout have the size of the biggest childview inserted (assigned for this column/row).

This whole is a very dynamic structure. The number of columns and rows is recalculated automatically. Remember to tag the childviews with layout_row, and layout_column, and possibly setting the desired size - following the above mentioned rules, for example:

        <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:id="@+id/editText1"
        android:layout_row="2"
        android:layout_column="8" />

So, by changing the childviews' width you can control the columns' width of the GridLayout. You can study the following example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <HorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:background="#f3f3f3">

        <GridLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#a3ffa3">

            <Button
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:text="Col 1,Row4"
                android:id="@+id/button"
                android:layout_gravity="center"
                android:layout_row="4"
                android:layout_column="1" />

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Start.."
                android:layout_column="4"
                android:layout_row="8" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Col 6, Row 1."
                android:id="@+id/button2"
                android:layout_row="1"
                android:layout_column="6" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Col 6, Row 2."
                android:id="@+id/button3"
                android:layout_row="2"
                android:layout_column="6" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button4"
                android:layout_gravity="center"
                android:layout_column="9"
                android:layout_row="3" />

            <TextView
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView"
                android:layout_row="3"
                android:layout_column="8" />

            <CheckBox
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:text="New CheckBox"
                android:id="@+id/checkBox"
                android:layout_row="6"
                android:layout_column="7"
                android:textColor="#212995" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:ems="10"
                android:id="@+id/editText"
                android:layout_row="5"
                android:layout_column="8"
                android:textColor="#952a30" />

        </GridLayout>
    </HorizontalScrollView>
</LinearLayout>

I hope this was helpful. Best Regards :)

In addition: I have found that the above may be actually difficult to achieve programmically. You might be considering changing the GridLayout to GridView or TableLayout, which are easier to handle. To learn more about it, please check these sites:

1. GridLayout.LayoutParams
2. GridLayout
3. gridlayout-not-gridview-how-to-stretch-all-children-evenly

Answer 2

You should modify your

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >

and add android:fillViewPort="true". This should make the content stretch to fill the screen (i.e. the viewport).