How to set TextInputLayout error message colour?

Question

How can I change the colour of the error message that can be set to appear below the text field in a TextInputLayout (via setError(...) – see error state here)?

It normally shows as a red colour, which I want to change. Which item names/keys should I use in my styles.xml file to target the colour?

**Edit:**

Added app:errorTextAppearance key to my TextInputLayout:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:id="@+id/welcome_current_week_container"
        app:errorTextAppearance="@style/WelcomeErrorAppearance">
        <EditText
            ..../>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

and the error appearance (set to green for testing):

<style name="WelcomeErrorAppearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/holo_green_dark</item>
</style>

The result is that the hint as well as the error message is coloured (screenshots from scaled Android Emulator):

Regular (no error):

Error state:

Edit 2/Outcome:

When the error message appears, the hint above the field changes to the same colour as the error message, overriding hint colour – this is by design.

Possible duplicate of [How to write style to error text of EditText in android?](http://stackoverflow.com/questions/14413575/how-to-write-style-to-error-text-of-edittext-in-android) — random, Nov 14 '15 at 14:00
The error color replaces hint color in error state. This is by design. See https://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter You can't work around this without altering the TextInputLayout class. — Eugen Pechanec, Nov 15 '15 at 11:46
@EugenPechanec I didn't realise this was the case. Thanks for explaining — Seb Jachec, Nov 15 '15 at 11:55
@EugenPechanec I am pretty sure you are wrong here. The part you are referring is from character counter. For normal fields errors should look like on this image (notice that hint is not colored) https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3YUJneko5VEsxQ2s/patterns_errors_userinput12.png — Arkadiusz 'flies' Rzadkowolski, Nov 29 '15 at 11:05
The specs are known to contain errors. The goal is to keep it consistent in one app now. So either color the error label everywhere or nowhere and youre golden. — Eugen Pechanec, Nov 29 '15 at 11:11
@EugenPechanec https://code.google.com/p/android/issues/detail?id=195775 - it was error indeed and will be fixed in the future release :) — Arkadiusz 'flies' Rzadkowolski, Jan 20 '16 at 10:13

dabo248 · Accepted Answer · 2015-11-15T23:10:34.870

151

Create a custom style which uses @android:style/TextAppearance as parent in your styles.xml file:

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

And use it in your TextInputLayout widget:

 <android.support.design.widget.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/error_appearance">

error example

Edit: Set the hint on the object, which is inside your TextInputLayout (EditText, TextView, etc.) to hold different colors for the hint and the error.

edited Nov 15 '15 at 23:10

answered Nov 14 '15 at 14:21

dabo248

3,367
4
27
37

1

Thanks. Seems straightforward but couldn't find it for the life of me somehow! – Seb Jachec Nov 14 '15 at 15:15
4

Update: Is it possible to just change the styling of the error message? This seems to change the hint style above the field too. – Seb Jachec Nov 14 '15 at 16:34
Really? Not for me, look at the picture above. Are you sure you're assigning the style to `app:errorTextAppearance`? – dabo248 Nov 15 '15 at 00:41
Edited my main question with code and screenshots to show what's happening – Seb Jachec Nov 15 '15 at 10:47
@dabo You're probably misusing TextInputLayout. You're supposed to set `android:hint` on TextInputLayout instead of the EditText. – Eugen Pechanec Nov 15 '15 at 11:48
@dabo thanks for your answer – helpful in changing colour nonetheless, which is I what I wanted to do (so accepted it). Eugen explained that hint colour changing with error is by design, so my question ends here. – Seb Jachec Nov 15 '15 at 11:58
@EugenPechanec I'm using a `AutoCompleteTextView` inside my `TextInputLayout` and it works great. Think I'm not misusing it, because that's how Google implement it in their template Login Activity. – dabo248 Nov 15 '15 at 23:01
@dabo Anything that extends `EditText` will be fine inside a `TextInputLayout`, that's not at all what I'm talking about. Did you set the `android:hint` attribute on the `TextInputLayout` or is the "Email address" label another `TextView`? That would explain why it doesn't take on the error color. – Eugen Pechanec Nov 15 '15 at 23:03
1

@EugenPechanec Simplified it looks like this: ``. So yep, it's another TextView, that's why it doesn't take the error color from the TextInputLayout. – dabo248 Nov 15 '15 at 23:07
Doesn't work on 23.1.1, but works in 23.1.0! It is reported as bug and will eventually solved in next build. – Draško Feb 13 '16 at 10:26
7

If you want to only change the color, it's best that you set the style's `parent` to `parent="TextAppearance.Design.Error"`. That way, it retains the default text size and any other attributes, but let's you customize specifically the error color, which was the goal of the question at hand. – w3bshark Apr 09 '16 at 17:03
@w3bshark changing just the color is actually easier than that, as [pointed out in my answer below](http://stackoverflow.com/questions/33709066/how-to-set-textinputlayout-error-message-colour/37231940#37231940). – Vicky Chijwani May 14 '16 at 21:14
@dabo Error:(29) No resource identifier found for attribute 'errorTextAppearance' in package 'android' – Tarit Ray Aug 21 '17 at 10:07
4

Still Changing hint color too – Muhammad Irfan Aug 17 '21 at 13:24

Vicky Chijwani · Answer 2 · 2016-05-14T21:19:15.307

29

Actually, to change just the error message color, you can set textColorError in your theme (and also set colorControlNormal and colorControlActivated for the general widget and hint text color). TextInputLayout picks up that attribute. NOTE: if you set errorTextAppearance to a custom style then textColorError will have no effect.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/control_normal</item>
    <item name="colorControlActivated">@color/control_activated</item>
    <item name="textColorError">@color/error</item>
    <!-- other styles... -->
</style>

And in your AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name">

    <!-- ... -->

</application>

edited May 14 '16 at 21:19

answered May 14 '16 at 21:14

Vicky Chijwani

10,191
6
56
79

24

Someone should really write a book about themes and styles and all the possible attributes. This is really insane, you can set color and style is so many ways, and there is no way to know which one is right way to go. And off course there is no documentation at all :( I mean there is but it's really confusing. – aleksamarkoni Apr 20 '18 at 22:25
this is much better answer than the higher scoring one ! – philthomas26 Jul 12 '18 at 18:31
8

For me, this solution caused an error (`textColorError` not found), but I managed to set `colorError` attribute in my theme. Seems like every version of Android/Support Library has its own theme attributes. – Slav Aug 25 '18 at 16:54
11

I'm getting 'Android resource linking failed', but with `@color/error` works fine – m4n3k4s Nov 08 '18 at 16:12
4

Please update post.. textColorError is now colorError. – Matt Wolfe Aug 06 '19 at 01:14
Correct. Creating a theme with `colorError` and applying it directly to the material text input layout was the ONLY way I found to actually change the error text color, but a style for `errorTextAppearance` would only let me set font, size, and weight. – Alex Conner Jul 09 '21 at 16:11

Gabriele Mariotti · Answer 3 · 2023-01-13T07:56:20.747

10

With the TextInputLayout included in the Material Components Library just use the app:errorTextColor attribute.

    <com.google.android.material.textfield.TextInputLayout
        app:errorTextColor="@color/...."
        .../>

In a custom style you can use:

<style name="..." parent="Widget.MaterialComponents.TextInputLayout.FilledBox" >
   <item name="errorTextColor">@color/...</item>
   ...
</style>

edited Jan 13 '23 at 07:56

answered Oct 22 '19 at 07:12

Gabriele Mariotti

320,139
94
887
841

Ivan Marić · Answer 4 · 2018-06-18T11:33:51.070

7

One side note. I have tried the accepted solution one with errorTextAppereance. It works really good but at first, the input underline color was not changing after applying a new errorTextAppereance style. I see there are a few comments and that other people are experiencing the same issue.

In my case, this was happening when I was setting a new style after setting a new error text. Like this:

passwordInputLayout.error = "Password strength"
passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)

After switching the order of this two methods the text and underline color changes as expected.

passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)
passwordInputLayout.error = "Password strength"

And the error text appearance style looks something like this:

<style name="InputError" parent="TextAppearance.Design.Error"/>
<style name="InputError.Purple">
    <item name="android:textColor">@color/purple</item>
</style>

edited Jun 18 '18 at 11:33

answered Jun 04 '18 at 12:26

Ivan Marić

71
1
3

What does your R.style.InputError_Purple look like? – Etienne Lawlor Jun 12 '18 at 22:25
@toobsco42 style only defines text color. I've edited the answer with the actual implementation. – Ivan Marić Jun 18 '18 at 11:34
Thank you! I use this view for both a valid text and error text (green and red) and the underline color not changing correctly was driving me crazy. – rexar5 Oct 06 '18 at 00:27

score 6 · Answer 5 · answered Jan 12 '16 at 19:52

I needed to do this dynamically. Using reflection:

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
  try {
    Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
    fErrorView.setAccessible(true);
    TextView mErrorView = (TextView) fErrorView.get(textInputLayout);
    Field fCurTextColor = TextView.class.getDeclaredField("mCurTextColor");
    fCurTextColor.setAccessible(true);
    fCurTextColor.set(mErrorView, color);
  } catch (Exception e) {
    e.printStackTrace();
  }
}

You will need to call textInputLayout.setErrorEnabled(true) before invoking the above method for this to work.

The error text color changes but the underline color still stays It changes only on the next call to the same function — Mohammad Shabaz Moosa, Jun 29 '17 at 18:38
@Dr.aNdRO This uses reflection, it isn't guaranteed to work always! — ucMedia, Jul 20 '19 at 15:20

Cyph3rCod3r · Answer 6 · 2019-06-10T07:03:45.210

1

UPDATE

Please use a custom view instead and not this

A modded version of @jared's Answer which works in my case :

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
    try {
        Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
        fErrorView.setAccessible(true);
        TextView mErrorView = (TextView)fErrorView.get(textInputLayout);
        mErrorView.setTextColor(color);
        mErrorView.requestLayout();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

edited Jun 10 '19 at 07:03

answered Jan 26 '16 at 14:10

Cyph3rCod3r

1,978
23
33

The error text color changes but the underline color still stays It changes only on the next call to the same function – Mohammad Shabaz Moosa Jun 29 '17 at 18:38
2

Dont use this. this is not reliable as of now – Cyph3rCod3r Jul 13 '17 at 13:39

score 0 · Answer 7 · answered May 27 '19 at 06:17

If you are using com.google.android.material.textfield.TextInputLayout this input layout than you just set one style

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/textInputLayoutPassword"
                        style="@style/LoginTextInputLayoutStyle"



<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/text_input_box</item>
        <item name="errorTextColor">@color/colorRed</item>
    </style>

score 0 · Answer 8 · answered Aug 06 '19 at 06:07

Depending on need, one can change/set TextInputLayout text color dynamically or directly in the layout XML file. Below is sample code snippets

Create a custom style which uses @android:style/TextAppearance as parent in your styles.xml file:

<style name="style_error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/color_error</item>
    <item name="android:textSize">11sp</item>
</style>

And, use it in your TextInputLayout widget:

Directly in XML Layout

 <android.support.design.widget.TextInputLayout
            android:id="@+id/your_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/style_error_appearance">

Dynamically in your class

your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

If you want to set single/same error text color for your application then define the text color in your app theme

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Error text color... -->
    <item name="textColorError">@color/color_error</item>
    <!-- other styles... -->
</style>

And in your AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    android:icon="@drawable/ic_launcher"
    android:label="@string/your_app_name">

    <!-- ... -->

</application>

score -2 · Answer 9 · answered Jul 01 '16 at 17:14

-2

I looked into the TextInputLayout source and I realised that error text color is gotten from colors.xml. Just add this to your colors.xml:

<color name="design_textinput_error_color_light" tools:override="true">your hex color</color>

answered Jul 01 '16 at 17:14

Java Geek

337
4
6

Works for me with design library added. – Java Geek Jan 04 '17 at 10:18

How to set TextInputLayout error message colour?

9 Answers9

Linked