By now you’ve probably noticed the fancy moving hints above the text views in the last two posts. How does that work? The answer is incredibly simple: the TextInputLayout. Added as part of the Design Support Library, TextInputLayout wraps a text field and gives you a lot of nice design options that are very easy to set up. Here’s an example of what they can do.
There are a couple things going on here:
- The password hint moves out of the way
- The wrong password error message is much prettier than what you get with
- The toggle changes to password visibility
All of these are built in feature of
TextInputLayout! Let’s see how they work
Setting up a TextInputLayout
Before you start,
TextInputLayouts are part of this design support library, so add
In order to use a
TextInputLayout, simply wrap one around a TextInputEditText.
TextInputEditText is a special type of
EditText that’s designed to work well inside a
TextInputLayout, and that’s why so much of this works.
Here’s the xml I used to create the password field above.
Because I’m using a
TextInputEditText, the hint will automatically animate, no extra work required.
Take a look at the
app:passwordToggleEnabled="true" line inside the
That’s all you need to get a password toggle!
Errors are displayed using
TextInputLayout#setError(String). Note that this is called on the parent layout, not the text field. Here it is in Kotlin:
Set the error text to display an error, or set it to null to hide it. That’s all!
TextInputLayouts are a great way to give your app a modern, professional feel, and they’re incredibly simple to use. Put them in all your apps!