Set TextInputLayout floating hint color as Outline color

Question

I'm using MaterialComponents Outline TextInputLayout. I need to set different colors on hint texts:

"main" hint (when no text is present in the TextInput) --> black with 60% alpha
floating hint --> same color as the outline (that is, colorPrimary when inactive, colorAccent when active)

I'm using android:textColorHint to set main hint color and app:hintTextColor to set floating hint color. Alas this last attribute seems to work only if the TextInputLayout is active. If it's inactive, floating hint takes android:textColorHint color.

My current configuration

layout.xml

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/td_descriptionH_editText"
style="@style/Widget.App.TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/td_description">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/td_description_editText"
    style="@style/Widget.App.TextInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

styles.xml

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textColorHint">@color/black_inactive</item>
    <item name="hintTextColor">?attr/drawableEditTextOutline</item>
    <item name="boxStrokeColor">?attr/drawableEditTextOutline</item>
</style>

drawableEditTextOutline.xml

<selector>
    <item android:color="@color/colorPrimary" android:state_focused="true"/>
    <item android:color="@color/colorAccent"/>
</selector>

TextInputLayout active is OK (floating hint is the same color as the outline)

TextInputLayout inactive without text is ok

TextInputLayout inactive with text is KO --> floating hint isn't the same color as the outline

How can I achieve this?

score 0 · Answer 1 · edited Mar 25 '21 at 07:46

0

The TextInputLayout must contain a textColorHint attribute for getting the desired result

<com.google.android.material.textfield.TextInputLayout

                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/txt_email"
                    android:padding="5dp"
                    android:textColorHint="@color/white"
                    app:hintTextColor="@color/white">

edited Mar 25 '21 at 07:46

Shay Kin

2,539
3
15
22

answered Mar 24 '21 at 14:18

Developer Live

27
4

I have it. The attribute is in the style Widget.App.TextInputLayout which is associated to TextInputLayout – andumava Mar 24 '21 at 14:26

score 0 · Accepted Answer · answered Mar 24 '21 at 14:44

You can use something like:

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

I'm still not able to give different colors to the main hint and to the floating unfocused hint. Anyway your solution is quite a good fit so I go for it. — andumava, Mar 25 '21 at 13:33

Set TextInputLayout floating hint color as Outline color

2 Answers2