CODEWITHSUNDEEP
androidandroid-layoutandroid-textinputlayout
Otterman
Otterman

Reputation: 530

Change TextInputEditText Hint Color

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.

Upvotes: 14

Views: 16979

Answers (5)

snachmsm
snachmsm

Reputation: 19243

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

Upvotes: 5

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

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>

Upvotes: 6

ahermann
ahermann

Reputation: 416

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>

Upvotes: 30

Otterman
Otterman

Reputation: 530

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>

Upvotes: 3

huk
huk

Reputation: 220

Try this:

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

Upvotes: 3

Related Questions