How to change the Material Design TextInputLayout Hint Text Color?

Question

I'm trying to set the hintTextColor AND the boxStrokeColor of Material Design's textInputLayout into 3 different state of colors, for example:

• red for when it's disabled (I don't know how to set the boxStrokeColor in disabled state, so please don't mind the screenshot)

• blue for when it's enabled but unfocused

• green for when it's enabled AND focused

How can I accomplish this?

For the hintTextColor, I've tried the suggestion made by Gabriele Mariotti in here, but the problem is one of the colors is applied to two different states ([disabled] and [enabled but unfocused]), and I want to differentiate these two.

Answer 1

You can use a custom style:

<style name="CustomOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    <item name="android:textColorHint">@color/text_color_hint</item>
    <item name="hintTextColor">@color/green</item>
</style>

with the @color/text_color_hint selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>
</selector>

and the @color/text_input_layout_stroke_color selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="..." android:color="@color/green" android:state_focused="true"/>
    <item android:alpha="..." android:color="@color/green" android:state_hovered="true"/>
    <item android:alpha="..." android:color="@color/red" android:state_enabled="false"/>
    <item android:alpha="..." android:color="@color/blue"/>  <!-- unfocused -->
</selector>

Focused:

Unfocused:

Disabled: