Change TextInputEditText Hint Color

Otterman picture Otterman · Jul 12, 2017 · Viewed 11.5k times · Source

I want to change the text color of my TextInputEditText hint. It seems that no matter what I change, the color is always that of the primary app theme.

            <android.support.design.widget.TextInputLayout
                android:id="@+id/enter_template_name_edit_text_input_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColorHint="@color/warm_grey">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/template_name_text_input_edit_text"
                    style="@style/EditTextBaseStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="start"
                    android:hint="@string/add_nitrogen_template_name_label"
                    android:imeOptions="actionNext"
                    android:inputType="textCapWords|textNoSuggestions"
                    android:maxLines="1"
                    android:paddingBottom="@dimen/md_content_padding_bottom"
                    android:textAlignment="textStart"
                    android:textColorHint="@color/warm_grey"
                    android:textSize="32sp" />

And the base style

<style name="EditTextBaseStyle" parent="Widget.AppCompat.EditText">
    <item name="android:textViewStyle">@style/TextViewStyle</item>
    <item name="android:textColor">@color/middle_black</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textSize">16sp</item>
</style>

I have tried adding

android:textColorHint="@color/warm_grey"

To the base style as well as my AppTheme and that did not help.

Here is my AppTheme

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/primary</item>
    <item name="android:textColorHint">@color/primary_text</item>
    <item name="android:windowBackground">@null</item>
    <item name="android:windowSoftInputMode">stateHidden|adjustPan</item>
</style>

Anything I'm missing here?

Thanks, Otterman

Edit: The Hint is the correct color when field does not have focus. When field receives focus, hint moves above the field and displays incorrect color.

Answer

ahermann picture ahermann · Aug 9, 2018

The fix for me was to set the hint and the textColor on TextInputLayout, rather than on TextInputEditText as described here: https://material.io/develop/android/components/text-input-layout/

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordTextInputLayout"
        android:hint="@string/add_nitrogen_template_name_label"
        android:textColorHint="@color/warm_grey">

        <android.support.design.widget.TextInputEditText
            android:textAppearance="@style/TextAppearance.Regular"
            android:textColor="@color/white"/>
    </android.support.design.widget.TextInputLayout>