TextInputLayout hint color in error state

Question

As per Googles Material Guidelines:

https://material.io/guidelines/components/text-fields.html#text-fields-layout

TextInputLayout hint should be the same color as the Error message:

However it is not like that and when I call setError("My error") only the underline and the error message show up in red.

How can I change this behavior to account for Google's own guidelines?

https://stackoverflow.com/questions/33709066/how-to-set-textinputlayout-error-message-colour — Murat Karagöz, Oct 16 '17 at 12:09
Try out with this answer: https://stackoverflow.com/questions/30824009/change-edittext-hint-color-when-using-textinputlayout — Piash Sarker, Oct 20 '17 at 19:00

score 18 · Answer 1 · edited Jun 01 '21 at 01:08

Here is how you can do it:

 <android.support.design.widget.TextInputLayout
        android:padding="8dp"
        android:id="@+id/tilSample"
        app:errorTextAppearance="@style/error_appearance"
        app:hintTextAppearance="@style/error_appearance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/etSample"
            android:layout_margin="8dp"
            android:padding="8dp"
            android:hint="android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.TextInputLayout>

style.xml

<style name="error_appearance" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/colorRed</item>
        <item name="android:textSize">12sp</item>
    </style>

colors.xml

   <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorRed">#f44336</color>
</resources>

EDIT

We can manipulate the error and hint colours in code also using:

tilSample.setErrorTextAppearance(R.style.error_appearance);  
tilSample.setHintTextAppearance(R.style.error_appearance);

for that, you can use java code and change the error and hint accordingly on validation. I have added java part also, not tested but it should work as specified in the documentation. — vikas kumar, Oct 23 '17 at 11:37

score 5 · Answer 2 · answered Oct 22 '18 at 19:52

5

Now this is default behaviour. To achieve this, just update your support library version to 28+.

implementation 'com.android.support:design:28.0.0'

answered Oct 22 '18 at 19:52

snersesyan

1,647
17
26

score 1 · Answer 3 · edited Oct 30 '21 at 10:07

We can manipulate the error as helper text because if you set an error it will definitely change the hint color, so I just used helperText instead of setError, here is an example

XML File

<com.google.android.material.textfield.TextInputLayout
                  android:id="@+id/textInputLayoutUserName"
                  android:layout_width="@dimen/view_0x"
                  android:layout_height="wrap_content"
                  style="@style/errorEnabledtextInputLayoutStyle">
    
                     <EditText
                           android:id="@+id/editTextUserName"
                           android:gravity="center_vertical"
                           android:background="@drawable/edit_text_background"
                           android:backgroundTint="@color/colorGray"
                           android:hint="@string/aap_ka_naam"
                           android:singleLine="true"
                           style="@style/standardTextViewStyle"
                           tools:targetApi="lollipop"
                           app:layout_constraintHorizontal_bias="0.0"/>
    
</com.google.android.material.textfield.TextInputLayout>

edit_text_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:top="-3dp" android:left="-3dp" android:right="-3dp">
        <shape android:shape="rectangle">
               <stroke android:width="1dp" android:color="@color/colorWhite" />
               <padding android:bottom="50dp" android:top="10dp" android:right="10dp"android:left="5dp"/>
               <solid android:color="#00000000" />
        </shape>
     </item>
</layer-list>

Styles

<style name="errorEnabledtextInputLayoutStyle">
        <item name="hintTextColor">@color/colorGraySix</item>
        <item name="helperTextTextColor">@color/colorNegative</item>
        <item name="hintEnabled">true</item>
</style>

Function

fun TextInputLayout.setErrorText(error : String, editText: EditText) {
     this.helperText = error
     editText.backgroundTintList = ColorStateList.valueOf(
            ResourcesCompat.getColor(resources,
            R.color.colorNegative, null)
      )
}

Usage

textInputLayoutUserName.setErrorText(getString(R.string.name_error), editTextUserName)

score 0 · Answer 4 · edited May 31 '21 at 11:31

Here is an example:

    <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/email_layout"
                android:textColorHint="@color/gray"
                app:errorTextAppearance="@style/TextAppearence.App.TextInputLayout"
                app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

    <android.support.design.widget.TextInputEditText
                    android:id="@+id/et_email"
                    style="@style/TextStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:cursorVisible="true"
                    android:gravity="center|left|bottom"
                    android:hint="@string/email"
                    android:inputType="textEmailAddress"
                    android:maxLength="50"
                    android:paddingBottom="10dp"
                    android:textColor="@color/black_effective"
                    android:textSize="18sp" />

    </android.support.design.widget.TextInputLayout>

Style File:

   <style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/gray</item>
    </style>

Snapshot:

this, and all the rest of the answers, changes hint color, not hint color on the error state — MichelReap, Oct 23 '17 at 08:34
@MichelReap Can you please elaborate what do you exactly want? There is some confusion. — Rahil Ali, Oct 23 '17 at 09:36
I want the behavior google states ont he guidelines: Hint remains the accent color until the validation, where the hint turns the same color as the underline and the error message. If not on error state, then the color is the accent. — MichelReap, Oct 23 '17 at 10:20
@MichelReap Means what you want that initially Hint color is accent when any error occurs then line , error and hint all the colors are same i.e gray. and in all other cases, hint remains accent. — Rahil Ali, Oct 23 '17 at 10:40

Mallikarjuna · Answer 5 · 2017-10-23T07:20:39.110

TextInputLayout in Xml

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:id="@+id/tx_login_password"
        app:errorEnabled="true"
        style="@style/text_input_style"
        app:passwordToggleEnabled="true"
        app:hintTextAppearance="@style/text_Apearence"
        android:layout_below="@id/tx_login_username"
        android:layout_centerHorizontal="true"
        app:theme="@style/Theme.App.Base"
        android:layout_marginLeft="70dp"
        android:layout_marginStart="70dp"
        android:layout_marginRight="70dp"
        android:layout_marginEnd="70dp"
        app:errorTextAppearance="@style/text_Apearence"
        android:layout_height="wrap_content">
        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:paddingTop="5dp"
            android:typeface="sans"
            android:textStyle="bold"
            android:textSize="15sp"
            android:maxLines="1"
            android:inputType="textPassword"
            android:lines="1"
            android:elegantTextHeight="true"
            android:textAlignment="viewStart"
            android:layout_gravity="start"
            android:id="@+id/password"
            android:theme="@style/Theme.App.Base"
            app:theme="@style/Theme.App.Base"
            style="@style/EditText_style"
            />
    </android.support.design.widget.TextInputLayout>

text_Apearence in style.xml file from resourses

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>
   

 1.  3. Style for Text Input Layout text_input_style XML file

<!-- begin snippet: js hide: false console: true babel: false -->

Style for Text Input Layout text_input_style XML file

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>

Image Looks Like

MeoMunm · Answer 6 · 2021-05-30T20:02:01.750

0

You can use the "helperTextTextColor" attribute to do this.

<com.google.android.material.textfield.TextInputLayout
            app:hintTextColor="@color/color_login_text_hint"
            app:helperTextTextColor="@color/error_color">
</com.google.android.material.textfield.TextInputLayout>

edited May 30 '21 at 20:02

answered Apr 08 '20 at 08:54

MeoMunm

1
2

score 0 · Answer 7 · answered Jan 24 '21 at 09:00

Here is another method which you may would try

fun wrapInCustomStyle(myText: String): Spannable? {
val spannable = SpannableString(myText) Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

//Test 'Alignment.ALIGN_OPPOSIT' Too if not working

spannable.setSpan(

    AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL), 0,
    myText.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
) 
return spannable

}

InputLayout.error=wrapInCustomStyle("sample")

score -1 · Answer 8 · answered Oct 23 '17 at 07:00

-1

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>

answered Oct 23 '17 at 07:00

Mallikarjuna

874
6
17

colorActivatedHighlight and colorControlActivated are theme attributes. Those need to be set in the theme. – Sebastian Engel Jul 30 '18 at 10:41

TextInputLayout hint color in error state

8 Answers8

Linked