What is a Floating Label and how to work with it?
In this article we want to talk about features like TextInputLayout and Floating Label and also go into more detail like how to work with it.
 | 4 minute(s) read | Published on: May 05, 2021 Updated on: Dec 14, 2021 |
In this tutorial, we want to apply settings that when the user wants to enter a value into EditText, its Hint is not removed and moved upwards like an animation. So, we knew that in EditText, there are hints that if the user wants to enter some value, the Hint will be lost, and in this article, we want to apply the settings so that the Hint is moved upwards in animation.
1- We create a new project in Android Studio with the desired name TextInputLayout.
2- I create an Empty Activity type.
3- We add the design library to the project. Like the following:
4- We add two EditText to the project and Active dT to receive the Username and password from the user.
5- The codes that should be in the activity_main.xml section are as follows:
6- EditText is placed inside the TextInputLayout tag.
7- We will implement the project.
8- After executing the project, we will see that the first EditText, which is related to receiving the Username, is in Focus mode and is waiting to enter its value.
9- items in Focus mode, the Hint color inside it and the line below it is red, and the rest are gray.
10- If we want to define an item and apply settings that are in Focus mode, we do the following:
11- Add a Requestfocus tag to the TextInputLayout related to the Password item.
An item must always be in EditText mode by applying the above settings.
12- In the next step, we have to apply settings that if the user touches a point on the screen, that part will be out of Focus mode and return to normal. To do this, we do the following:
The Layout is the root of the LinearLayout activity in the codes listed above. For this layer, I define two properties, focusable and focusableInTouchMode. The value of this property is true, and we add an id with it.
13- The complete code that should be included in MainActivity.java is as follows:
In the code above, the null value given to setOnClickListener causes all EditText to be normal and out of focus when touching anywhere on the screen.
How to manage Errors in TextInputLayout?
We may encounter errors when entering information into user forms or application forms. To resolve these types of errors, we must apply settings.
- Define an error for the Username field. Like the following:
The above code uses the setOnFocusChangeListener method.
This method will run when the user taps EditText and EditText is in focus mode.
14- Complete the method as follows:
In the code above, we set a condition that if EditText is empty, an error will be displayed on the user layout using set Error.
15- We will implement the project.
16- After running the project, we will see that if we touch EditText, which is related to the Username, an error will be displayed in red below it.
17- If we use the addTextChangedListener and Text Watcher methods, we can hear the changes in the EditText text. Like the following:
18- TextWatcher has three methods:
- before exchanged method, which is for before text change.
- onTextChanged method for changing text.
- AfterTextChanged method is for after text change.
We need the second method in this tutorial.
19- If we run the project and enter a character, the Error will be removed.
20- If we want to change the color of Hint, we must use the textColorHint property. Like the following:
21- We can also use hintTextAppearance to style the Hint while focusing. Like the following:
Note:
The style we define for Hint should inherit from TextAppearance.AppCompat.
22- Using the errorTextAppearance property, the error text can also be changed. Like the following:
It should be noted that there is another feature in TextInputLayout called Counter, and this feature can be used when we want to announce the number of characters to the user. Like the following:
counterEnabled is used to enable this feature, and counterMaxLength specifies the number of characters.
Note:
If the number of input characters exceeds MaxLength, the counter color will change.
23- To change the color of the Counter when the number of characters increases from MaxLength can be done as follows:
