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 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.
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.
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.
You can also change the default eye icon with passwordToggleDrawable attribute or the color hint using the passwordToggleTint attribute:
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.
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.
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.
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 MainActivity.java and replace it's code with below given code of f my MainActivity.java as follows:
Step 8: Create a class MyTextWatcher.java and replace it's code with below given code of my MyTextWatcher.java as follows:
Step 9: Create a class FormValidator.java and replace it's code with below given code of my FormValidator.java as follows:
Step 10: Clean and run the project to see the result.