Spinner inside GridLayout

Question

Adding a Spinner to a GridLayout seems to "break" the layout. I have prepared a minimal working example to illustrate the issue:

I want a grid with labels on the left and input controls on the right. The controls on the right should take up the remaining space. This is what a simple example looks like:

Replacing one of the input controls with a spinner causes the right column to extend out of the screen boundaries, leading to an ugly layout.

Why does this happen, and how can I avoid it?

---

Here's the code of the first example:

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

    <TextView
        android:layout_gravity="left"
        android:text="TextView" />

    <EditText
        android:layout_gravity="fill_horizontal"
        android:hint="EditText" />

    <TextView
        android:layout_gravity="left"
        android:text="TextView" />

    <EditText
        android:layout_gravity="fill_horizontal"
        android:hint="EditText" />

</GridLayout>

And here's the code for the second image. The only difference is that the first EditText has been replaced by a Spinner:

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

    <TextView
        android:layout_gravity="left"
        android:text="TextView" />

    <Spinner
        android:id="@+id/spinner1"
        android:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_gravity="left"
        android:text="TextView" />

    <EditText
        android:layout_gravity="fill_horizontal"
        android:hint="EditText" />

</GridLayout>

Pineda

Answer 1

Apparently, the problem can be avoided by setting the layout_width of the Spinner to zero:

<Spinner 
    android:id="@+id/Spinner1"
    android:layout_gravity="fill_horizontal"
    android:layout_width="0dp" />

I'll mark this as the accepted answer, since it fixes the problem easily, but I'll gladly change that if someone can come up with an explanation for this behaviour.

Pineda

I would say that the behavior you see its due to the layout_gravity attribute set to FILL_HORIZONTAL which stretches(even beyond the visible screen) the views to make them have the same width as their parent(From the docs for the FILL_HORIZONTAL field: Grow the horizontal size of the object if needed so it completely fills its container.). – Ligation

@Luksprog: The gravity settings have a different meaning inside the GridLayout (see developer.android.com/reference/android/widget/GridLayout.html, Section "Excess Space Distribution"). For example, setting layout_gravity of the spinner to left yields the same problem. – Pineda

It may be, I didn't worked play too much with the GridLayout. I just remembered what I've read from the Gravity class. – Ligation

Now I have a same problem, and I try to many ways to limit the Spinner's width in gridlayout. But only this way can be successfully. I think when the Spinner width is set less than gridlayout, the FILL_HORIZONTAL will stretches the views. And are there any other ways to limit views' width don't extend out of gridlayout? – Lidia

It worked with native GridLayout but it doesnt worked with android.support.v7.widget.GridLayout. In second case there isnt any widget on spinner placeholder – Minaminabe

Answer 2

try this code

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

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1"
            android:hint="EditText" />
    </TableRow>

</TableLayout>

Entomophilous