Android: TextInputLayout - customize colors for hint, bottom line and error message

Question

My layout looks something like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="E-mail"
            android:imeOptions="actionDone"
            android:inputType="textEmailAddress"
            android:maxLines="1" />

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

</LinearLayout>

When I validate the user input, in case of invalid input, I add an error message like:

email_container.setError("You must fill this field!");

And the result is:

As you can see, and as it is expected actually, the hint, the bottom line and the error message are all in red.

My goal

To have a separated color for the hint. That is... keeping red the bottom line and the message, but use another color for the hint when in error state.

Already tried:

How to change the floating hint color of TextInputLayout if EditText inside is disabled

https://stackoverflow.com/a/53348723

https://stackoverflow.com/a/46765159

https://stackoverflow.com/a/33709380

...and other solutions that try to solve the case when the android.support.design.widget.TextInputLayout wrappers a simple EditText.

But, in my case I'm using com.google.android.material.textfield.TextInputLayout and com.google.android.material.textfield.TextInputEditText.

I have also tried to call setErrorTextColor and setDefaultHintTextColor after setting the error:

email_container.setError("You must fill this field!");
email_container.setErrorTextColor(new ColorStateList(states, colors));
email_container.setDefaultHintTextColor(new ColorStateList(statesHint, colorsHint));

// Also tried with other states, but nothing
int[][] states = new int[][] {
        new int[] { android.R.attr.state_enabled},
        new int[] {-android.R.attr.state_enabled},
};

int[][] statesHint = new int[][] {
        new int[] { android.R.attr.state_enabled},
        new int[] {-android.R.attr.state_enabled},
};


int[] colors = new int[] {
        R.color.yellow,
        R.color.green,
};


int[] colorsHint = new int[] {
        R.color.black90,
        R.color.bt_text_blue,
};

But the only thing that I got, combining different states, was to make the message color different, but the hint and the bottom line, still had the same color.

Does anyone know how to deal with this?

score 0 · Answer 1 · answered Aug 30 '19 at 05:20

We can you custom style To customize TextInputLayout color . try this code to change TextInputLayout color code according to your need

style.xml

<style name="TextInputCustonColor" 
  parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label  -->
    <item name="android:textColorHint">@color/colorPrimaryGolden</item>
    <!-- The color of the label -->
    <item name="android:colorError" tools:targetApi="o">@color/colorError</item>
    <!--the color of text-->
    <item name="android:textColor">@color/colorPrimaryGolden</item>
    <!--the color of background-->
    <item name="boxBackgroundColor">@android:color/transparent</item>

</style>

activity.xml

    <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:errorEnabled="true"
    style="@style/TextInputCustonColor">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        style="@style/TextInputCustonColor"
        android:imeOptions="actionDone"
        android:inputType="textEmailAddress"
        android:maxLines="1" />

</android.support.design.widget.TextInputLayout>

Android: TextInputLayout - customize colors for hint, bottom line and error message

1 Answers1