Material Text Field proper theming

Last article about TextInputLayout was getting old since Android got the material design library and the newer, shinier:

com.google.android.material.textfield.TextInputLayout

DAT purple though

In this article, we will explain how the Widget gets customised by walking through the themes and attributes it supports. If you ‘re a busy dev and want to skip the explanation, there is an image for you at the last section of the article. 👇

Existing Themes & Styles

The material library already gives us access to 2 NEW style resources and a couple of older, parent Styles. You SHOULD use those, to take care of a lot of styling at once.

Both new styles are based on a rounded rectangle that serves as the background of the ViewGroup as well as on the older styles and themes of the design library.

Here is the family tree of the Text Field’s styles, from newer to older:

What do those styles set for you

1. Widget.MaterialComponents.TextInputLayout.FilledBox or .OutlinedBox

• boxBackgroundMode : filled or outlined box as a background.
• boxBackgroundColor : set the color of the box. Defaults to a grey-ish color for filled only.
• boxCornerRadius*** to configure the rounded-ness of your rectangle. One attribute for each corner. Defaults to 0dp for filled or 4dp for outlined

2. Base.Widget.MaterialComponents.TextInputLayout

This is the base theme of the Material Design library. It defaults your Text Fields to the outlined type.

• Defaults the values we saw earlier for OutlinedBox and sets default values for colors and roundedness.
• boxStrokeColor : A new attribute. It is the color of your highlights. It colors the Activated state of the rectangle outline (only for outline type). It defaults on your colorAccent or secondaryColor

3. Widget.Design.TextInputLayout

• boxBackgroundMode : set to none to look like the pre-material version of the TextInputLayout
• Exposes hintTextAppearence , errorTextAppearence , counterTextAppearence , helperTextAppearence are all Text styles for the various states of this ViewGroup. You can scroll to the bottom to see examples.
• Exposes passwordToggleDrawable , passwordToggleHint , passwordToggleContentDescription are attributes relevant when you set your EditText meant for passwords and self-explanatory.

passwordToggleEnabled=true is pretty nice

Putting Theme & Style together.

Let’s look at the all the attributes we can tweak:

Note: On some versions of the Material library (v.1.1.0–alpha10) I had to override the theme’s:

• colorError : instead of setting errorTextAppearance for the error colors
• colorPrimary : instead of hintTextAppearance for ACTIVE hint and underline colors.
• colorActivated : for the EditText cursor color.

I hope this is an alpha bug and not that the dev team decided to deprecate their own custom attributes.

DO NOT SKIP THIS!

We will need a Style to set the View’s specific attributes and a Theme to override theme colors that the View will inherit.

You can also apply your style as theme, inside the style’s definition (“enslaved theme style”), but I noticed some inconsistencies with paddings. So I wouldn’t do that.

You can define a style and apply it both as style="@style/MyTextInputLayout” and android:theme="@style/MyTextInputLayout” which is confirmed to work as described in this post.

Some copy-paste magic…

… And you are ready to make your own custom Material Text Input Fields 🔮