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:

enter image description here

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>

Sincerely i never seen a GridLayout inside an HorizontalScrollView, both inside a ScrollView: why do you need all this scroll? — JJ86, Sep 20 '13 at 16:43
because the thing could potentially get big, depending on the user input :-) — Lisa Anne, Sep 20 '13 at 16:47
Try to add `android:fillViewport="true"` and change `android:layout_width="match_parent"` to `android:layout_width="wrap_content"`. Do these changes in your HorizontalScrollView. — Sherif elKhatib, Oct 01 '13 at 14:19

score 8 · Accepted Answer · edited May 23 '17 at 12:19

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:

score 4 · Answer 2 · answered Oct 07 '13 at 06:45

4

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

answered Oct 07 '13 at 06:45

keithmaxx

649
7
17

score 2 · Answer 3 · answered Mar 03 '14 at 11:05

TextView reps = new TextView(this); android.support.v7.widget.GridLayout.LayoutParams repsLayoutParam = (LayoutParams) reps.getLayoutParams(); repsLayoutParam.setGravity(Gravity.FILL_HORIZONTAL | Gravity.FILL_VERTICAL);

This creates a text view that is placed in a grid layout - setting gravity to FILL_HORIZONTAL and also FILL_VERTICAL should ensure it fills the cell in the layout.

score 1 · Answer 4 · answered Oct 01 '13 at 17:29

1

Because grid view have own scroll.

answered Oct 01 '13 at 17:29

Harshit Rathi

1,862
2
18
25

score 1 · Answer 5 · answered Oct 07 '13 at 17:52

1

When you add the views remember to add the right LayoutParams to the view first.

answered Oct 07 '13 at 17:52

JWqvist

717
6
15

score 0 · Answer 6 · answered Sep 20 '13 at 16:42

0

Mabye it is because of the missing

</ScrollView>

at the end.

answered Sep 20 '13 at 16:42

friiky

426
5
4

Why GridLayout doesn't fill all the available space?

6 Answers6