Android Material Design Floating Labels - Androhub

Floating Labels Banner

Android Material Design Floating Labels Using Design Support Library

One of the most basic UI widgets in Android is an EditText. It is generally used to take inputs from the user. But what it lacked was a label attached to it. Therefore in most of the implementations a hint was used as a label for the EditText. 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. This new library implements the floating label EditText feature for Android on all API versions of it by using TextInputLayout.

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(boolean) and setError(CharSequence) methods.

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

Example

In this tutorial, we are going to learn how to implement Floating Labels by using Material Design Library.

VIDEO DEMO

Let’s start with an Example

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.

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

3. Open res=>values=>strings.xml and the following strings to this file.

4. Create a activity_main.xml file for UI design of floating labels and add the following code to it. Make sure you provide hint to your EditText for floating labels.

5. Open MainActivity.java and add the following code. On submit button click i am checking every field if empty or not and setError() to TextInputLayout.

6. Finally all done, run the app and you will get the output as shown in video.

Thanks. :)

 

Post comment

Your email address will not be published. Required fields are marked *