Android’s TextInputLayout Styling

In this article, we will learn about the styling of TextInputLayout.

What is TextInputLayout?

TextInputLayout is a successor of EditText which is mostly used in the login screen or registration form. It comes with floating hint animations.

TextInputLayout with floating hint animations.

TextInputLayout extends Linear Layout which means it should be used inside the linear layout.

Note: TextInputLayout should wrap TextInputEditText not the normal EditText as TextInputEditText is a sub-class of EditText.

To use this we have to add the dependency inside the build.gradle inside dependencies.

implementation 'com.android.support:design:28.0.0'

Defining TextInputLayout

<android.support.design.widget.TextInputLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:textColorHint="@color/hintColor"                app:hintTextAppearance="@style/EditTextTheme">                  <android.support.design.widget.TextInputEditText                    android:layout_width="match_parent"                    android:layout_height="wrap_content"                    android:hint="Email"                    android:textColor="@color/textColor"/></android.support.design.widget.TextInputLayout>

Hints of TextInputLayout

Floating hints: This attribute is enabled by default. We don’t have to define it.

Styling Text of hint: To use a custom textColor and textSize for the floating hint below attribute is defined inside TextInputLayout:
app:hintTextAppearance="@style/EditTextTheme"
The HintText style is written inside the styles.xml as shown below

<style name="EditTextTheme">
    <item name="colorControlNormal">@color/cardview_dark_background</item>
    <item name="colorControlActivated">@color/background_color</item>
    <item name="colorControlHighlight">@color/background_color</item>
</style>

• colorControlActivated is the floating label, underline and cursor colors, when focused. If we don’t define it, it will use our colorAccent itself.
• colorControlNormal is the underline color, when the view is NOT focused. If we don’t define it, it will use textColorSecondary itself .
• textColorPrimary is the color of the user-input text.
• textColorHint is the hint color when the field is empty and NOT focused.

FINAL RESULT:

Final Output

TextInputLayout makes our user-interface designing way more as we have to define TextView and EditText separately for EditText and it’s title separately. Thanks for reading! Do give claps and valuable suggestions in the comments section.