Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set TextInputLayout error message colour?

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.

like image 714
Seb Jachec Avatar asked Nov 14 '15 13:11

Seb Jachec


People also ask

How do I show error in TextInputLayout?

You can use the TextInputLayout to display error messages according to the material design guidelines using the setError and setErrorEnabled methods. In order to show the error below the EditText use: TextInputLayout til = (TextInputLayout) findViewById(R. id.

How do I remove TextInputLayout error?

Now you can simply do input. setError(..) for new error and input. setErrorEnabled(false) to remove it.


2 Answers

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.

like image 59
dabo248 Avatar answered Oct 01 '22 20:10

dabo248


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> 
like image 23
Vicky Chijwani Avatar answered Oct 01 '22 21:10

Vicky Chijwani