SubscribeSubscribe with Androidlift to get new post on mail.

Android Floating Label EditText

Android Floating Label Edittext

Android floating label edittext 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. As a matter of fact, very recently in the start of June, 15 a new support library was introduced by the android team, called Android Design Support Library. This new library implements the floating label EditText feature for Android on all API versions of it.

Therefore in this tutorial we will implement the Android floating label edittext using the new design support library.

TextInputLayout

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.The EditText has to be wrapped by TextInputLayout in order to display the floating label. Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence).

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

Output :

Android Floating Label EditText
Android Floating Label EditText

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.

Open build.gradle and add design support library dependency.

com.android.support:design:23.0.1

 

activity_main.xml

 

strings.xml

 

In values => colors.xml

 

AndroidManifest.xml

 

MainActivity.java  –

and do the below changes. Here I have added few methods to validate user inputted data like name, email and password, mobile, postal address. 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.

Good Luck…!

(51)

  • raj

    hmm its very good yar…….

  • Yogesh

    Its really Nice but provide source code in zip format… !!!