Have different color of hint in error state and normal state

Question

I want to have same color of hint in error and normal state

Ive given styles for error state and normal state, hint color shoukd remain grey color only in error state, and error text should be in red color

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="LabelText" parent="TextAppearance.Internal.Label">
        <!-- Hint color and label color in FALSE state -->
        <item name="android:textColorHint">@color/grey_dark</item>
        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">@color/grey_dark</item>
        <item name="android:textColor">@color/grey_dark</item>
        <item name="colorControlNormal">@color/grey_dark</item>
        <item name="colorControlActivated">@color/grey_dark</item>
    </style>


    <style name="ErrorText" parent="TextAppearances.Internal.Note">
        <item name="android:textColor">@color/red_primary</item>
        <item name="android:textColorHint">@color/grey_dark</item>
        <item name="colorAccent">@color/grey_dark</item>
        <item name="colorControlNormal">@color/grey_dark</item>
        <item name="colorControlActivated">@color/grey_dark</item>
    </style>

    <style name="Widget.TextField" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="hintTextAppearance">@style/LabelText</item>
        <item name="errorTextAppearance">@style/ErrorText</item>
        <item name="android:textColor">@color/grey_darkest</item>
        <item name="android:textColorHint">@color/grey_dark</item>
        <item name="colorControlNormal">@color/grey_dark</item>
        <item name="colorControlActivated">@color/blue_primary</item>
        <item name="colorControlHighlight">@color/blue_primary</item>
    </style>
</resources>

My Text Input layout code with styles given above

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/cdTextFieldLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:theme="@style/Widget.TextField"
        app:errorTextAppearance="@style/ErrorText"
        app:helperTextTextAppearance="@style/TextAppearance.Internal.Note"
        app:hintTextAppearance="@style/LabelText">

        <EditText
            android:id="@+id/cdTextField"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="-4dp"
            android:paddingTop="4dp"
            android:textAppearance="@style/TextAppearance.Internal.Body"
            android:textColor="@color/grey_darkest"
            android:textColorHint="@color/grey_dark"
            tools:text="Input Text" />

    </com.google.android.material.textfield.TextInputLayout>

this is what i want to achieve/

Currently you can't do it. – Gabriele Mariotti Sep 12 '19 at 11:40 — Gabriele Mariotti, Sep 12 '19 at 11:40

score 1 · Answer 1 · answered Sep 10 '19 at 09:35

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

<style name="error_text_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red_500</item>
</style>

add this style in your TextInputLayout

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

I did the same but not still getting hint and error in red, I want only error in red color not hint — Rohit Raich, Sep 11 '19 at 03:07

score 1 · Answer 2 · answered Oct 26 '19 at 15:58

Yes, there is no any direct way to achieve this. But you can use one simple walk around :-)
Here is a brief scheme:

First of all - create necessary style:

<style name="Til" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<!--Add here your other style items-->
<item name="errorTextAppearance">@style/ErrorTextAppearance</item>

<style name="ErrorTextAppearance" parent="@style/TextAppearance.Design.Error">
    <item name="android:textColor">PLACE HERE YOUR DESIRED COLOR FOR HINT</item>
</style>

Now, when you will call setError(@Nullable CharSequence errorText), your error message will be the same color as the hint. Everything that you have to do is to create a SpannableString with desired color of the error text. Here is a simple method:

fun getSpannableErrorString(errorRes: Int, context: Context): SpannableString {
    val errorText = SpannableString(context.getString(errorRes))
    errorText.setSpan(
            ForegroundColorSpan(ContextCompat.getColor(context, android.R.color.holo_red_dark)),
            0,
            text.length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    return errorText
}

After that, just pass the SpannableString into setError(@Nullable CharSequence errorText) method of TextInputLayout.

@gopalanrc, You can add the `@color/red` in App base theme, then also stroke color will be red in error state. — YUSMLE, Jan 12 '21 at 09:57

Have different color of hint in error state and normal state

2 Answers2