TextInputLayout underline color does not adapt to custom color when focused

user_915619 0
Viewed 3937

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

enter image description here

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>
textinputlayout android-textinputlayout material-components material-components-android android
1 Answers

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"/>

enter image description here

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.

user_20165620
Related