Android TextInputLayout Example [Latest]

Android TextInputLayout

Android TexInputLayout extends LinearLayout. The primary use of a TextInputLayout is to act as a wrapper for EditText(or its descendant) and enable floating hint animations.

Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.

Reason?
TextInputEditText is a sub-class of EditText and is designed for use as a child of TextInputLayout.

Furthermore, using an EditText instead would shoot us a warning : EditText added is not a TextInputEditText. Please switch to using that class instead.

TextInputLayout has much more to offer than just displaying floating hint labels.

Android TextInputLayout Features

Some of the features that we’ll be covering in this tutorial are :

1. Enabling/Disabling floating hints
2. Enabling/Disabling floating hint animation
3. Displaying Error Messages
4. Showing Character Counter
5. Alarming the user when the Character Count Exceeds its limit
6. Customising the Text Appearance for floating hint, error label, character counter
7. Password Visibility Toggle

We’ll look at each of these features and implement them in an Android Studio Project.

Android TextInputLayout Example Project Structure

This is a single Activity application. We’ll be doing all the stuff inside the layout, activity and styles.xml and colors.xml files.

Firstly, add the dependency for the design support library inside the build.gradle file as shown below.

Enabling/Disabling Floating Hints

Floating Hints are enabled by default in a TextInputLayout. To disable it we need to add the following attribute inside the tag :
app:hintEnabled="false".

The below xml code is from the activity_main.xml layout and has three EditText fields.

The third EditText field has the floating hint disabled. Let’s see the output the above code gives us :

Enabling/Disabling Floating Hint animation

Similar to the previous feature, floating hint animation is enabled by default. To disable it we need to add the following attribute inside TextInputLayout tag.
app:hintAnimationEnabled="false"

The below xml code is from the activity_main.xml layout and has EditText fields for either of the cases.

The output of the above code is shown below.

It’s noteworthy to mention that the second EditText field doesn’t animate the floating hint when focused.

Styling the hint TextAppearance

To use a custom textColor and textSize for the hints the following attribute is used:
app:hintTextAppearance="@style/HintText"
The HintText style is written inside the styles.xml as shown below

The below xml code is from the activity_main.xml layout and has EditText fields for either of the cases(with/without hintTextAppearance).

The output of the above code is shown below.

Character Counter

Character Counter is a feature used by quite a few applications. (Remember Twitter character limit?).
Set app:counterEnabled to true and app:counterMaxLength with the maximum number of characters you want in the TextInputLayout. Character Counter is by default displayed below the EditText (bottom-right) and while writing this tutorial, there’s no way to change the position, yet. Styling the counter is similar to styling the hint text.
app:counterTextAppearance is the attribute used this time.
We’ve added the following style inside the styles.xml file in our project.

The below xml code is from the activity_main.xml layout and has EditText fields with a default character counter and a custom one.

The output of the above code is given below.

Let’s observe the above output closely.

• The first EditText field changes its counter textColor, hint textColor and the indicator color when the character count is exceeded.
• The second EditText field does the same but also, it changes the counter custom textColor and custom textSize when the limit exceeds.

To specify the style we need when the character counter exceeds its limit, we need to use the counterFlow attribute that we’ll be seeing next.

Character Counter Overflow

As we’d seen above when the character count exceeds the limit defined, the counter text uses the attributes defined in counterFlow. If the attributes weren’t present, it’ll stick to the default ones as we saw in the above output. We need to use the following param
app:counterOverflowTextAppearance

The style for CounterOverflow is present inside the styles.xml :

Add the below the code snippet to the previous activity_main.xml layout:

Let’s run the application again.

Error Label

Setting app:errorEnabled to true allows us to display an error text on condition beneath our EditText field. To style the Error Text, we’d use the attribute app:errorTextAppearance and add the following code inside our styles.xml file.

The below xml code is from the activity_main.xml layout and has EditText fields for a default error label and a custom one.

To display the error text, we’ll have to call the method setError(String) on an instance of TextInputLayout in our MainActivity.java class as shown below.

In the above code, we add a TextChangedListener(which implements TextWatcher) on each instance of TextInputEditText.
We display the error label when the current character count exceeds the counter max limit.
To clear the error label we set the value inside setError() as null.

The output that the above code gives us is :

Note: The indicator of the text field uses the same color as the error label. It overrides the color set by counterOverflow hence has the highest priority.

Password Visibilty Toggle

Setting app:passwordToggleEnabled to true lets you show/hide the password.
To change the icon color use app:passwordToggleTint.

The below xml code is from the activity_main.xml layout and has EditText fields for a password visibilty toggle (default icon and with a tint)

The output displayed by the above code is:

Note: We can use our own custom icons from password visibility toggle using app:passwordToggleDrawable.

This brings an end to this tutorial. We’ve covered all the major features present in TextInputLayout.
You can download the Android TextInputLayout Example Project from the link below. It includes each of the code snippets above.

Reference: Android Official Doc