TextInputLayout underline color does not adapt to custom color when focused

Question

Not sure what I am missing but every time the edittext gets focused the underline color does not adapt to the custom color I set. For reference here is my theme code

<style name="EditTextHintWhite" parent="@style/AppTheme">
   <item name="color">@color/white</item>
   <item name="android:textColorHint">@color/white</item>
   <item name="colorControlNormal">@color/white</item>
   <item name="colorControlActivated">@color/white</item>
   <item name="colorError">@color/white</item>
</style>

As you can see I have set all of them to white but somehow when the edittext gets focused the underline turns to green

Here is my code from the layout

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

        <androidx.appcompat.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:shadowColor="@color/white"
            android:singleLine="true"
            android:textColor="@color/white"
            app:backgroundTint="@color/white" />

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

I found [this](https://stackoverflow.com/a/24677734/12163469). I hope it is your solution — DinhNguyen, Oct 08 '19 at 07:20

Gabriele Mariotti · Answer 1 · 2019-10-08T09:46:49.293

The underline color with a FilledBox style is defined by the boxStrokeColor attribute. You can add it in your layout or in your custom style. Something like:

<style name="...." parent="Widget.MaterialComponents.TextInputLayout.FilledBox" >
    <!-- underline color in FilledBox style -->
    <item name="boxStrokeColor">@color/custom_selector_filled_stroke_color</item>
    ....
</style>

It is the default value for the selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <!-- 4% overlay over 42% colorOnSurface -->
  <item android:alpha="0.46" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.42" android:color="?attr/colorOnSurface"/>
</selector>

The color used when it is focused is the first line <item android:color="?attr/colorPrimary" android:state_focused="true"/>

In your code use (remove the app:backgroundTint in the EditText)

    <com.google.android.material.textfield.TextInputLayout
        android:hint="@string/email"
        android:theme="@style/EditTextHintWhite"
        ..>

        <com.google.android.material.textfield.TextInputEditText
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:textColor="@color/white"
            ../>

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

with (remove the parent):

  <style name="EditTextHintWhite">
    <item name="colorError">@color/white</item>
    <item name="colorPrimary">@color/...</item>
    <item name="colorOnSurface">@color/...</item>
  </style>

If you would like a custom underline use the app:boxStrokeColor="@color/text_input_layout_stroke_color" attribute in your TextInputLayout.

Note: use the com.google.android.material.textfield.TextInputEditText instead of androidx.appcompat.widget.AppCompatEditText.

I did all of your suggestion but it's still not working. Is there a reason to use `com.google.android.material.textfield.TextInputEditText` instead of `androidx.appcompat.widget.AppCompatEditText`? — philip, Oct 08 '19 at 08:27
The `TextInputEditTex` is designed for use as a child of `com.google.android.material.textfield.TextInputLayout` and it extends the `AppCompatEditText`. Why are you using the `app:backgroundTint` in the `EditText`? In any case I've just tried and it works. Check your style. — Gabriele Mariotti, Oct 08 '19 at 08:34
if you mean the `1.1.0-beta01` is the `com.google.android.material` dependency you are speaking of then yes I also tried the `1.0.0` but it didn't make any difference. I just copied your exact code except for the color values — philip, Oct 08 '19 at 09:26
@philip In your code there is something that doesn't work. Just try an empty project with a simple TIL with the boxStrokeColor. I've also updated the answer with your code but changing something. It works. — Gabriele Mariotti, Oct 08 '19 at 09:48
I've also tried many suggestions available on the internet, even in the official Material UI docs, but the underline color of `TextInputLayout` when not in focus remains grey. I've also tried many of your answers as well. — Lalit Fauzdar, Jan 21 '21 at 05:49

TextInputLayout underline color does not adapt to custom color when focused

1 Answers1