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>
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.
Answer:
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>
Tags: androidandroid, layout