Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 729
Otterman Avatar asked Jul 12 '17 16:07

Otterman


People also ask

How do I change the color of the bottom line of TextInputLayout?

To change the bottom line color you have to use the attribute: boxStrokeColor .


2 Answers

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>
like image 179
ahermann Avatar answered Sep 20 '22 01:09

ahermann


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>
like image 20
Otterman Avatar answered Sep 23 '22 01:09

Otterman