GridLayout column is going beyond its bounds

Question

I'm trying to make a grid-like form, similar to the example on the official Android Developers blog.

Here is my layout:

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

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="48dp"
        android:layout_marginRight="48dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:columnCount="2"
        android:rowCount="2">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_gravity="end"
            android:layout_row="0"
            android:text="Send"
            android:textColor="?android:attr/textColorPrimary"
            android:textSize="24sp" />

        <Spinner
            android:id="@+id/send_currency"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="0" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_gravity="end"
            android:layout_row="1"
            android:text="to"
            android:textColor="?android:attr/textColorPrimary"
            android:textSize="24sp" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="1"
            android:hint="username"
            android:textColor="?android:attr/textColorPrimary"
            android:textSize="24sp" />
    </GridLayout>
</LinearLayout>

My left column (static text, right-aligned) is working fine. It aligns the text to the right, and the width is dependent on the widest row.

However, the right column seems to be drawing way outside of the bounds of the GridLayout.

In that picture, the blue box is the bounds of the GridLayout. You can already see the problem in the green bar at the top. The right side is supposed to be stopping at the bounds of the GridLayout (like the left side is), but for some reason it's going way past it.

The blue box in that picture is the bounds of the EditText (it's set to wrap_content). However, the aqua-colored box is the bounds in which it's allowed to expand. When I type lots of characters into the EditText, it goes past the GridLayout's bounds, and even past the edge of the phone screen!

Is this a bug in GridLayout? Or am I missing something?

Answer 1

I found this answer to be helpful. Also, paulina_glab's answer of using <android.support.v7.widget.GridLayout instead of just <GridLayout - thanks!

In particular these attributes on each cell:

android:layout_width="0dp"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1"

Hope it helps.

Answer 2

Definitely odd. What happens if you constrain the width of the EditText to "match_parent" instead of "wrap_content" (which should constrain its horizontal width to within the grid cell)?

i.e.

        <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        android:hint="username"
        android:textColor="?android:attr/textColorPrimary"
        android:textSize="24sp" />

or, alternatively, give your EditText a right margin to try and push that right hand border in a little bit? e.g.

android:layout_marginRight="20dp"

and see if that makes a difference?

Answer 3

You can restrict edittext to single line.

<EditText 
...
android:singleLine="true"
android:lines="1"
android:maxLines="1"
android:hint="to"></EditText>

Answer 4

That is 'normal' behavior of GridLayout.

Fortunately, there is a new version of GridLayout, which was added with API 21. Thanks of that fact, you can make GridLayout accomodates children to its either width or height according as its orientation.

To know details look at documentation, especially at Class Overview -> Excess Space Distribution. You can find there info how to use GridLayout in the way you want.

---

Tip:

Don't forget that to make use of new GridLayout, you need to add it as support library and in xmls you should use:

<android.support.v7.widget.GridLayout ... >

instead of

<GridLayout ... >