How to use TextInputLayout in new android design library

Question

Recently google introduced new Android Design Library in that how to use TextInputLayout field to enable the Floating Hint feature of EditText.

Not much guidance is available here.

This page says

you can now wrap it in a TextInputLayout

But No idea because smart prediction (Ctrl+SPACE) doesn't predicts any attributes to the TextInputLayout. So my questions are:

How do we get hold of the EditText underlying this component?

How can we get data from EditText?

Answer 1

TextInputLayout extends ViewGroup class. So which means that you have to wrap your EditText in a TextInputLayout.

<android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

     <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:id="@+id/editText1" />

</android.support.design.widget.TextInputLayout>

Answer 2

Do wrap the TextInputLayout around TextInputEditText instead of EditText.

Wrapping around EditText does have issue in landscape mode. Refer to this article for more details.

<android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

     <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:id="@+id/editText1" />

</android.support.design.widget.TextInputLayout>

Answer 3

This is defined in design support library under "Floating labels for editing text".

     <android.support.design.widget.TextInputLayout
            android:id="@+id/name_et_textinputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin">

            <EditText
                android:id="@+id/FeedBackerNameET"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="hinttext"
                android:inputType="textPersonName|textCapWords" />
     </android.support.design.widget.TextInputLayout>

Answer 4

To make this works well, you should let you app theme extends from Theme.AppCompat (or its descendant) theme, like extends from Theme.AppCompat.Light.NoActionBar.

Answer 5

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/et_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/type_message"
        android:maxLines="5"/>

</android.support.design.widget.TextInputLayout>

hint will automatically shift up once you start typing in the edit text and to have those errors which appear below edit text set error on text input layout like this not on edit text

tilMessage.setError("Message field is empty!");

to disable error

tilMessage.setErrorEnabled(false);

Answer 6

The correct way...

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/card_id_edit_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/form_card_id_text"
                android:inputType="number"
                android:maxLength="10"/>
        </android.support.design.widget.TextInputLayout>

If you use EditText like a child of TextInputLayout, you will see this message in Android Monitor:

I/TextInputLayout: EditText added is not a TextInputEditText. Please switch to using that class instead.

Answer 7

With the Material Components Library there is a new TextInputLayout component.

Just use:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

In the official doc you can find all the info.