o7planning

Android TextInputLayout Tutorial with Examples

  1. Android TextInputLayout
  2. Floating Hint
  3. Character Counting
  4. Password Visibility Toggle
  5. Floating Label Error
  6. TextInputLayout Styles

1. Android TextInputLayout

TextInputLayout is an interface component that contains and supports a Text Input Field visually. If EditText is in use, make sure its android:background is @null so that TextInputLayout can set the appropriate background for it.
The hint text automatically pops up when the user focus to EditText.
A Password field with an ImageView on the right allows the password to be displayed.
TextInputLayout is a subclass of LinearLayout, so it can arrange child View(s) in a row or a column. When one of its child View(s) is a text input field such as EditText, the other child View(s)act as visual aids.
Note: You can also put TextInputLayout(s) nested to get a more complex interface component.
Library:
TextInputLayout is not available in the Android standard library. Therefore, in order to use it, you need to install it into your project from the Palette of the design view or declare this library manually.
After installing the library from Palette, you will see it be declared in build.gradle (Module: app) file:
implementation 'com.google.android.material:material:1.0.0'

2. Floating Hint

The hint text that automatically pops up when the user focus on an EditText is the basic support feature of TextInputLayout, which you can use it without having to write any extra lines of Java code.
Drag and drop a TextInputLayout in the interface. By default, it will contain a child View named TextInputEditText, a descendant class of EditText.
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="16dp"
    android:layout_marginRight="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

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

</com.google.android.material.textfield.TextInputLayout>
Here is the result:
Some attributes related to the "Floating Hint" are:
  • app:hintEnabled (Default true)
  • app:hintAnimationEnabled (Default true)
  • app:hintTextAppearance
app:hintEnabled
The app:hintEnabled attribute is used to enable/disable the "Floating Hint" feature of TextInputLayout. Its default value is true.
app:hintAnimationEnabled
The app:hintAnimationEnabled attribute specifies whether or not an animation appears when the hint text floats. Its default value is true.
app:hintTextAppearance
Set the color, size, style, and so on for the hint text.
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Small"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display3"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display4"
  • ...

3. Character Counting

TextInputLayout also supports the character counting feature. It is also one of the most frequently used features in different applications.
Drag and drop a TextInputLayout in the interface. By default, it contains a TextInputEditText:
Next: Set values for a few other attributes of TextInputLayout.
  • app:counterEnabled = "true"
  • app:counterMaxLength: This is an optional attribute to specify the maximum number of characters in texts. This value is used for reports. The user still can enter a text with more characters.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout21"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

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

</androidx.constraintlayout.widget.ConstraintLayout>
This is the result you get:
Note: Use the android:maxLength attribute for the Input Field (EditText,..) if you want to limit the number of characters of the text which is guaranteed.

4. Password Visibility Toggle

Drag and drop the TextInputLayout in the interface. By default, it has already got TextInputEditText as a child View. After that, set the android:inputType = "textPassword" for the TextInputEditText.
Then set values for the following attributes:
  • app:passwordToggleEnabled
  • app:passwordToggleDrawable
  • app:passwordToggleContentDescription
  • app:passwordToggleTint
  • app:passwordToggleTintMode
app:passwordEnabled
The app:passwordEnabled="true" is necessary for you to enable the feature of hiding/showing the password for TextInputLayout, while other attributes mentioned above are only optional.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

5. Floating Label Error

One of the other features of TextInputLayout is to display a Label notifying the error to the user. However, in order to use this feature, you need to write additional Java code to control the hiding/showing of the Label.
OK, here is a simple example:
The interface of the example:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout_user_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

    <EditText
        android:id="@+id/editText51"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout_user_name" />

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.inputtextlayoutexample;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.textfield.TextInputLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.setupFloatingLabelError();
    }

    private void setupFloatingLabelError() {
        final TextInputLayout textInputLayoutUserName = (TextInputLayout) findViewById(R.id.textInputLayout_user_name);

        textInputLayoutUserName.getEditText().addTextChangedListener(new TextWatcher() {
            // ...
            @Override
            public void onTextChanged(CharSequence text, int start, int count, int after) {
                if (text.length() == 0 ) {
                    textInputLayoutUserName.setError("Username is required");
                    textInputLayoutUserName.setErrorEnabled(true);
                } else if (text.length() < 5 ) {
                    textInputLayoutUserName.setError("Username is required and length must be >= 5");
                    textInputLayoutUserName.setErrorEnabled(true);
                } else {
                    textInputLayoutUserName.setErrorEnabled(false);
                }
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                                          int after) {
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}

6. TextInputLayout Styles

The style attribute is an option of TextInputLayout. It allows you to set the style for TextInputLayout. There are a few styles available in the Android library that may be ready for you to use.
  • style="@style/Widget.Design.TextInputLayout"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
  • ...
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More