How to change outline of Text Field in material.io?

Question

I have two text fields (Material.io) and when I tap on the first one, the outline colour changes to the colour I specified in app:boxStrokeColor="@color/button_colour" but when I choose the other text field the colour of the first text field changes to a shade of grey. How do I change this colour to any other colour?

Answer 1

Instead of using a color, use a selector

app:boxStrokeColor="@color/myselector"

where the selector is something like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

Otherwise you can:

• use the standard selector for the boxStrokeColor and override the colors using android:theme="@style/ThemeOverlay_til"

  <style name="ThemeOverlay_til">
    <item name="colorOnSurface">@color/....</item>
  </style>

• use a custom style for your TextInputLayout to override the colors:

  <style name="Custom_OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/MyMaterialThemeOverlay</item>
  </style>

  <style name="MyMaterialThemeOverlay" parent="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="colorOnSurface">@color/....</item>
  </style>