How to set TextInputLayout error message colour?

AndroidAndroid Textinputlayout

Android Problem Overview


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?

Thanks in advance.


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):

Before Image

Error state:

After Image

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.

Android Solutions


Solution 1 - Android

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.

Solution 2 - Android

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>

Solution 3 - Android

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>

enter image description here

Solution 4 - Android

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>

Solution 5 - Android

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.

Solution 6 - Android

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();
    }
}

Solution 7 - Android

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>

Solution 8 - Android

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: > 1. 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">

> 2. 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>

Solution 9 - Android

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSeb JachecView Question on Stackoverflow
Solution 1 - Androiddabo248View Answer on Stackoverflow
Solution 2 - AndroidVicky ChijwaniView Answer on Stackoverflow
Solution 3 - AndroidGabriele MariottiView Answer on Stackoverflow
Solution 4 - AndroidIvan MarićView Answer on Stackoverflow
Solution 5 - AndroidJared RummlerView Answer on Stackoverflow
Solution 6 - AndroidDr. aNdROView Answer on Stackoverflow
Solution 7 - AndroidMohit SutharView Answer on Stackoverflow
Solution 8 - AndroidRupesh YadavView Answer on Stackoverflow
Solution 9 - AndroidJava GeekView Answer on Stackoverflow