Change TextInputEditText Hint Color

Question

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.

same question thread mentioned by @ZazGmy had shorter answer I preferred, thanks for the link https://stackoverflow.com/a/33302481/1815624 — CrandellWS, May 19 '18 at 18:41

ahermann · Accepted Answer · 2018-09-05T15:48:49.073

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>

snachmsm · Answer 2 · 2019-12-27T18:19:50.817

5

have you tried also these attributes for your AppTheme?

<item name="colorControlNormal">@color/primary</item>
<item name="colorControlHighlight">@color/warm_grey</item>      
<item name="colorControlActivated">@color/warm_grey</item>

or moving

android:textColorHint="@color/warm_grey"

from XML widget to EditTextBaseStyle

edited Dec 27 '19 at 18:19

answered Jul 12 '17 at 16:25

snachmsm

17,866
3
32
74

score 5 · Answer 3 · answered Oct 27 '19 at 21:24

You can use the app:hintTextColor and the android:textColorHint attributes in your layout:

<com.google.android.material.textfield.TextInputLayout
    app:hintTextColor="@color/mycolor"
    android:textColorHint="@color/text_input_hint_selector"
    .../>

or you can define them in a custom style:

<style name="..." parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">@color/my_color</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/my_selector_color</item>
</style>

score 3 · Answer 4 · answered Jul 12 '17 at 17:14

3

Try this:

 <style name="AppTheme.EditTextBaseStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/darker_gray</item>
</style>

answered Jul 12 '17 at 17:14

huk

220
3
11

score 3 · Answer 5 · answered Jul 12 '17 at 17:22

I was able to get this to work successfully by adding

app:hintTextAppearance="@style/EditTextHintStyle"

To my TextInputLayout

Here is the correct style

<style name="EditTextHintStyle" parent="EditTextBaseStyle">
    <item name="android:textColor">@color/warm_grey</item>
</style>

Change TextInputEditText Hint Color

5 Answers5