Android TextInputLayout

Download Android TextInputLayout sample

Android TextInputLayout wraps an EditText or its child to show a floating label when the hint is hidden due to the user inputting text. It can also be used to show error message on validation fail, can be used for character counter, can be used to show password toggle.

In traditional EditText, when we start typing it hides hint text but in TextInputLayout hint are shown as floating label for EditText once user start typing on it.

Android TextInputEditText

Android TextInputEditText is special subclass of EditText which was designed to used as child of TextInputLayout. TextInputEditText allows TextInputLayout greater control over the visual aspects of any text input.

A TextInputLayout can hold only one EditText or its descendant.

How to add support library of Android TextInputLayout?

To use the Android TextInputLayout widget, we must add these 2 libraries. The first one is appcompat-v7, which ensures that the material styles are backward compatible and second one is the Design Support Library which will allows us to use TextInputLayout.

Open your build.gradle of modeule app and add support library dependency, something like below given code.

How to enable password visibility toggle in TextInputLayout?

If we are using an EditText with an input password type, then we can enable Password visibily toggle that can show/hide entire text of EditText.


Password visibility toggle

How to change password visibility toggle icon in TextInputLayout?

You can also change the default eye icon with passwordToggleDrawable attribute or the color hint using the passwordToggleTint attribute:


Custom password visibility toggle

How to enable character counter in TextInputLayout?

TextInputLayout can expose a character counter for an EditText defined within it. The counter will be rendered below the EditText and can change colors of both the line and character counter if the maximum number of characters has been exceeded.

counterEnabled used to enable character counter and counterMaxLength specify maximum length of counter.

How to change style of TextInputLayout?

The hint text can be styled by defining app:hintTextAppearance on TextInputLayout as follows:

In res -> values ->style.xml, add the style of hint as follows:

Same way, we can change error text appearance by using app:errorTextAppearance and defining error text style in the style.xml

We can change counter appearance by using app:counterOverflowTextAppearance and specifying style for counter overflow text.

Example of Android TextInputLayout

In this example, we are going to use TextInputLayout and TextInputEditText to design a Login screen. I tried to demonstrate simple form validation. If user enter wrong email or enter a password with length less than 8, then app shows an error message. On, successfull validation it shows a congrats message.


Android floating label

Step 1: Create a new project in Android Studio and name it Android floating label.

Step 2: Open build.gradle and add support library dependecy as explained in tutorial.

Step 3: Open res -> layout -> activity_main.xml and add following code


Step 4: Open res -> values -> strings.xml and replace it with below given code.


Step 5: Open res -> values -> styles.xml and replace it with below given code.


Step 6: Either download icons that are used in the application from google or replace its name with some system icons.

Step 7: Open your and replace it's code with below given code of f my as follows:

Step 8: Create a class and replace it's code with below given code of my as follows:

Step 9: Create a class and replace it's code with below given code of my as follows:

Step 10: Clean and run the project to see the result.

Share & Like

Tutorial topics

About is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.