ZOFTINO.COM

Android TextInputLayout Tutorial

Android TextInputLayout makes it possible to display hint as floating label for EditText fields when it gets the focus.

Android TextInputLayout is a layout and can contain EditText widget or any of its descendants such as AppCompatEditText, AutoCompleteTextView, EmojiEditText, ExtractEditText, GuidedActionEditText, and SearchEditText.

TextInputLayout shows hint of child as label when hint is hidden. In addition to support for label, TextInputLayout also supports showing error message, password visibility toggling for password field, and character counter.

TextInputLayout Dependency

To use TextInputLayout in your application, you need to first add dependency to your project as shown below. TextInputLayout is part of android design library.

 dependencies {
    . . .
    implementation 'com.android.support:design:26.1.0'
} 

TextInputEditText with TextInputLayout

TextInputEditText is a subclass of EditText. It has been created to be used with TextInpputLayout so that layout can control the style of input field.

TextInputLayout TextInputEditText example

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zoftino.com.uicontrols.MainActivity">
    <android.support.design.widget.TextInputLayout
        android:id="@+id/name_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Name" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android.support.design:passwordToggleEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name_til">
        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/address_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android.support.design:counterEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password_til">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Address" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="Submit"
        android:onClick="submitForm"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/address_til" />
</android.support.constraint.ConstraintLayout>

TextInputLayout Material Style

Below screen is the output of above layout when application theme is set to one of the app compact material themes. The pictures show hint when TextInputEditText is not focused and label when TextInputEditText is foucused and after value has been entered.

android textinputlayout example

android textinputlayout focus example

TextInputLayout Error

TextInputLayout supports error message. Using this feature, you can inform user about incorrect input for edit text fields by setting error message on TextInputLayout and display on UI.

When error needs to be displayed for a particular EditText, you need get parent TextInputLayout object and call setError method on it passing error message as an argument to it.

TextInputLayout set error

 TextInputLayout til = (TextInputLayout) findViewById(R.id.address_til);
TextInputEditText tiet = (TextInputEditText) findViewById(R.id.address);
   if(tiet.getText().toString().isEmpty()){
    til.setError("Please enter valid address.");
}else{
    til.setError(null);
} 

TextInputLayout remove error

Once error message is set on TextInputLayout object, it stays until it is removed. To clear or remove TextInputLayout error message, you need to call setError method passing null or empty message, in the above code else condition removes error message.

TextInputLayout error output

android textinputlayout error message example

Android TextInputLayout Character Counter

TextInputLayout supports counter feature with which it can display number of characters entered into the input field. To enable counter, you need to call setCounterEnabled method passing boolean value true to it in the code or set counterEnabled xml attribute.

Note, to use attributes of TextInputLayout in xml layout, you need to define name space for android.support.design by setting it to android res-auto schema url as shown below.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
   
    . . .
    <android.support.design.widget.TextInputLayout

        android.support.design:counterEnabled="true">
	. . .
    </android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout> 

TextInputLayout character counter output

android textinputlayout counter example

Android TextInputLayout Password Visibility Toggle

TextInputLayout supports password visibility toggle feature with which user can toggle password visibility. This feature is applicable to password EditText fields. To enable password visibility toggle, you need to call setPasswordVisibilityToggleEnabled method passing boolean value true to it in the code or set passwordToggleEnabled xml attribute.

User can click password visibility toggle button to see password in plain text or disguised form.

You can customize password visibility toggle button by setting setPasswordVisibilityToggleDrawable attribute to your custom drawable.

android textinputlayout password visibility toggle example

TextInputLayout Custom Material Style

You can define custom material style and change color of hint and edit text underline color by setting colorControlActivated, counter color by setting textColorSecondary, error message color by setting colorControlNormal and password visibility button tint by setting colorForeground.

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>
 
android textinputlayout custom style example