Android Material Design Floating Label for EditText Tutorial


One of the basic UI widgets in Android is an EditText. It is generally used to take inputs from the user. While typing in EditText , it hides the hint which may create problem to identify EditText without label but last year when material design was released, a new concept of floating labels was introduced. This new Android floating label EditText concept initially showed a label as a hint; when user enters a value in the EditText, that hint moves on to the top of the EditText as a floating label. The question is here now : how to implement the new Android floating action EditText. Answer to this, use the new Android TextInputLayout around the EditText.

What is TextInputLayout ?

A TextInputLayout widget behaves exactly as a LinearLayout does, it’s just a wrapper. TextInputLayout only accepts one child element, similar to a ScrollView. The child element needs to be an EditText element . When TextInputLayout is used around an EditText is automatically takes the hint text defined in the EditText and shows it as a floating label. Another feature we can also set an error message to EditText by using setErrorEnabled() and setError() methods .

TextInputLayout takes the value of android:hint assigned to EditText and displays it as floating label.

Let’s Get it Working

In this tutorial we are going to learn how to how to float label on EditText. To really understand the usage of TextInputLayout we will create an app . The App contains simple registration form with floating label, form validations and error messages.

Step 1 ) Update build.gradle file

Before you can use TextInputLayout in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .

Step 2) Update strings.xml .

Add the below string values to the string.xml located in res => values => strings.xml .

Step 3) Update dimens.xml .

Add the below dimensions to the dimens.xml located in res => values => dimens.xml .

Step 4) Update activity_main.xml .

Open the layout file for the MainActivity.java i.e activity_main.xml and add the below code in you layout file . The code will create a simple registration form containing 4 input fields Full Name , Email , Age and Password with Sign Up Button .

Step 5) Write Validation Helper Class.

Create a class named ValidationHelper.java and add below code in it . The code will create validation methods for input field . Validation to check empty input and valid email .

Step 6) Update Main Activity Class.

Now Open MainActivity.java and make some changes in code . Here i added the methods to validate the input fields Full Name,Email,Age and Password using the ValidationHelper class which i described above .

This whole sample would result a screen like this:

Floating Labels

Floating Labels


Floating Labels with error message

Floating Labels with error message


Sign Up Success

Sign Up Success

DownloadCode
github
Enjoy Coding and Share Knowledge

Show Buttons
Hide Buttons