Android TextInputLayout Tutorial and Example

TextInputLayout is a layout that wraps android.widget.EditText to show a floating label when the hint is hidden due to the user inputting text.

This layout is normally used with android.support.design.widget.TextInputEditText.

Some of the unique features it supports include:

• Enabling and Setting Errors via setErrorEnable(boolean) and setError(CharSequence).
• Character counter via setCounterEnabled(boolean).

This class resides in the android.support.design.widget package.

package android.support.design.widget;

TextInputEditText inherits from LinearLayout:

public class TextInputLayout extends LinearLayout {}

TextInputLayout can only contain one EditText. Attempt to add more than one will result to java.lang.IllegalArgumentException.

Designin Android App Login Page

Let’s also see a login page:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView 
    android_layout_width="fill_parent"
    android_background="@color/colorPrimary"
    android_layout_height="fill_parent"
    android_fitsSystemWindows="true">

    <LinearLayout
        android_orientation="vertical"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_paddingTop="56dp"
        android_paddingLeft="24dp"
        android_paddingRight="24dp">

        <ImageView
            android_src="@drawable/ic_local_taxi_black_24dp"
            android_layout_width="72dp"
            android_layout_height="72dp"
            android_layout_marginBottom="24dp"
            android_layout_gravity="center_horizontal" />

        <!--  Email Label -->
        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginTop="8dp"
            android_layout_marginBottom="8dp">
            <EditText android_id="@+id/input_email"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_inputType="textEmailAddress"
                android_textColor="#ffffff"
                android_hint="Email" />
        </android.support.design.widget.TextInputLayout>

        <!--  Password Label -->
        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginTop="8dp"
            android_layout_marginBottom="8dp">
            <EditText android_id="@+id/input_password"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_inputType="textPassword"
                android_textColor="#ffffff"
                android_hint="Password"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.v7.widget.AppCompatButton
            android_id="@+id/btn_login"
            android_layout_width="fill_parent"
            android_layout_height="wrap_content"
            android_layout_marginTop="24dp"
            android_layout_marginBottom="24dp"
            android_background="@color/colorPrimaryDark"
            android_padding="12dp"
            android_textColor="#ffffff"
            android_text="Login"/>

        <TextView android_id="@+id/link_signup"
            android_layout_width="fill_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="24dp"
            android_textColor="#ffffff"
            android_text="No account yet? Create one"
            android_gravity="center"
            android_textSize="16dip"/>

    </LinearLayout>
</ScrollView>