Android Material Design EditText with Floating Labels

person folder_openAndroid, Material Designaccess_time February 8, 2016

If you have noticed in recent android applications, the EditText widget looks very pleasing. Hint text gives a floating animation when the EditText is focused. This has been introduced in Android Lollipop as part of Material Design concept. This has eliminated the need for a separate TextView which permanently holds some screen space to show the title for EditText .

This can be implemented in pre-lollipop devices also using android support design library. In this tutorial we have used version 23.1.1 of the support library.

See the following steps:

  1. Using TextInputLayout to enable Floating Labels in EditText widget

1. app/build.gradle

Add this 'com.android.support:design:23.1.1' dependency to add support design library to you project.

 

2. AndroidManifest

 

3. Layout File

4. LoginActivity

You can use setError() method of EditText widget to display error. If you want to use the Material Design feature of displaying error below the EditText, you can use setError() method of TextInputLayout element.

Use mInputLayoutEmail.setError(null);  to clear the error text.

 

 

5. Demonstration

EditText with Floating Labels
EditText with Floating Labels

Credits: Source code generated by Android Studio v1.5.1 is used for this tutorial

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">