Android Material Design Floating Labels for EditText

Android floating labels were introduced in android design support library to display a floating label over EditText. Initially it acts as hint in EditText when the field is empty. When user start inputting the text, it starts animating by moving to floating label position.

This article demonstrates the usage of floating labels with a simple form validation example.

TextInputLayout

In design support library a new element called TextInputLayout was introduced to display the floating label on EditText. The EditText has to be wrapped by TextInputLayout in order to display the floating label. You 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.


 

android-design-support-library-floating-labels

Simple Form Validation Example

Now we’ll create a simple android app to really understand the usage of TextInputLayout. This app contains a simple form with floating labels, input validations and error messages enabled.

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project.

2. Open build.gradle and add design support library dependency.

com.android.support:design:23.0.1


 

3. Apply the material design theme by following the steps mentioned here. But this step is optional.

4. Add the below string values to strings.xml located under res ⇒ values.


 

5. Open layout file your main activity (activity_main.xml) and add the below layout. This code creates a simple form with three input fields. Here you can see the EditText is wrapped by TextInputLayout.


 

6. Open MainActivity.java and do the below changes. Here I have added few methods to validate user inputted data like name, email and password. I also assigned a TextWatcher to all the edit texts to validate the input while user is the typing it. setError() methods is called on to edit text to display the error message when the input is invalid or empty.


 

android-material-design-floating-labels
android-material-design-floating-labels-error-messages
sumber :http://www.androidhive.info/

 

Related Posts
Leave a reply