TextInputLayout proper Theming

Update: Part 2: Material TextInputLayout theming is out!

Like most Android Developers, I have used TextInputLayout on many apps. This Widget is the weapon of choice for most input fields like login screens, forms etc. But even though it’s popular and there are plenty of great articles on how to use them, it seems there is lack of understanding on how to properly style them… at least according to StackOverflow.

Recently Google announced the upcoming Material Components For Android including Material Text Field and I thought it’s a good opportunity to explain how to style your Text Fields extensively, rather than relying entirely on your AppTheme’s colors.

The new Material Components look fancy… but it’s still in alpha at this time :(

But it looks already styled to me…

Yes, it’s styled according to the colors you have defined in your App’s theme. Specifically, the attributes being used here are:

• colorControlActivated is the floating label, underline and cursor colors, when focused. If you don’t define it, it will fall back to use your colorAccent
• colorControlNormal is the underline color, when the view is NOT focused. If you don’t define it, it will fall back to use your textColorSecondary which is a bit 🤔.
• textColorPrimary is the color of the user-input text
• textColorHint is the hint color when the field is empty and NOT focused.

Now… the above might seem a bit confusing and unnecessarily complex, but it is a necessary explanation to understand the next step.

Styles vs Themes

The key detail to notice here, is that we are talking about a Theme and not a style. What is the difference? According to the documentation…

A style is a collection of attributes that specify the appearance for a single View. A style can specify attributes such as font color, font size, background color, and much more.

And…

A theme is a type of style that’s applied to an entire app, activity, or view hierarchy, not just an individual view. When you apply your style as a theme, every view in the app or activity applies each style attribute that it supports. Themes can also apply styles to non-view elements, such as the status bar and window background.

Most people associate a TextInputLayout with a View because it corresponds to a single input field, but the ...Layout in the name should indicate that we are talking about a ViewGroup. Which we can confirm by looking at the source code:

public class TextInputLayout extends LinearLayout … {
  …
}

Creating a TextInputLayout Theme

So let’s get going with our theme. The first thing we need to do, is define a couple of text Styles that will be used as part of the theme. These styles correspond to the different texts used, such as the Hint and Error texts.

Then, we create our TextInputLayout theme, referencing the above:

And for the last step, we build our layout.xml using the android:theme attribute with the style we defined above:

You are now ready to style your Text Fields!

Extra Credit: This article, will show you how to use state-selectors to provide different colours for different states e.g. focused and idle colours.