Views are overflowed or disappeared in Android 5

Question

As you can see in my screenshot, views like an EditText are overflowed or disappeared. That's why I can't see the scrollbar on the right side of a multiline EditText.

How can I fix that? I tried match_parent and fill_parent, but can't see a difference. 'wrap_content' isn't nice for a form.

Screenshot Android Studio, EditText overflows

Here is my xml:

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

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2">

        <TextView android:text="Label for first EditText" />

        <EditText
            android:id="@+id/et_id"
            android:layout_width="match_parent"
            android:lines="1"
            android:maxLength="13"
            android:maxLines="1" />

        <TextView android:text="Another Label for another ET" />

        <EditText
            android:id="@+id/et_new_description"
            android:layout_width="match_parent"
            android:lines="3"
            android:maxLines="10"
            android:inputType="textMultiLine"
            android:scrollbars="vertical" <!-- can't see this -->
            android:scrollbarAlwaysDrawVerticalTrack="true"/>

    </GridLayout>

    <android.support.v7.widget.ButtonBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true">

        <Button
            android:id="@+id/button_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/filter"
            android:text="cancel" />

        <Button
            android:id="@+id/button_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@android:drawable/ic_menu_save"
            android:text="save" />

    </android.support.v7.widget.ButtonBarLayout>
</RelativeLayout>

Answer 1

I think the proper way to accomplish this is with the android:layout_columnWeight attribute. Here is a sample:

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    ... >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:text="Label"
        ... />

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_columnWeight="1"
        ... />

    <!-- Same pattern for other labels and text fields -->

</GridLayout>

However, this attribute is only available starting in API 21 (Lollipop). You could use the support version of GridLayout instead, which requires you to add

compile 'com.android.support:gridlayout-v7:23.3.0'

to the dependencies block in your build.gradle file, and then use

<android.support.v7.widget.GridLayout>

in your layout file. This is what I would recommend to you.

---

If you want to support versions older than Lollipop without also using the support version of GridLayout, here's another way to accomplish the effect you want:

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    ... >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:text="Label"
        ... />

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_gravity="fill_horizontal"
        ... />

    <!-- Same pattern for other labels and text fields -->

</GridLayout>

You might have to use android:layout_width="wrap_content" instead of android:layout_width="0dp" for the EditText , I'm not sure.