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?

Answer 1

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

Answer 2

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

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