Floting Labels : Text Input Layout
We have already covered FloatingActionButton and SnackBar from Material Design. Today we will discuss about TextInputLayout.
There is a nice and interesting approach to customize edittext in Material Design. They didn’t touch EditText directly, instead TextInputLayout will be used to enhance its functionality.
We have seen lot of libraries for floating labels but in Material Design we can directly use it with the help of TextInputLayout.
Add design support library in gradle file.
|
1 |
compile ‘com.android.support:design:24.2.1’ |
Add TextInputLayout in your xml :
|
1 2 3 4 5 6 7 8 9 10 |
<android.support.design.widget.TextInputLayout android:id="@+id/tilEmail" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email Address" /> </android.support.design.widget.TextInputLayout> |
TextInputLayout will take value of android:hint from EditText and display it as floating label.
You can also set error message by using setErrorEnabled() and setError() methods.
|
1 2 3 |
TextInputLayout tilEmail = (TextInputLayout)findViewById(R.id.tilEmail); tilEmail.setErrorEnabled(true); tilEmail.setError("Enter email address"); |
Ravi Rupareliya
He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.
Latest posts by Ravi Rupareliya (see all)
- Dialogflow Entities With Actions on Google - May 7, 2020
- Actions on Google Using Cloud Functions - February 3, 2020
- Create WhatsApp Stickers Android Application - April 19, 2019