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

Widget.MaterialComponents.TextInputLayout.FilledBox or .OutlinedBox

boxBackgroundMode : filled or outlined box as a background.

: or box as a background. boxBackgroundColor : set the color of the box. Defaults to a grey-ish color for filled only.

: set the color of the box. Defaults to a grey-ish color for 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.

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

: set to to look like the pre-material version of the 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.

, , , 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.