Change the TextInputLayout outline color

I'm trying to customize a TextInputLayout with material style. I managed to set the focused state to the colors I want:

Using

<com.google.android.material.textfield.TextInputLayout
     style="@style/LoginTextInputLayoutStyle"
     android:theme="@style/LoginTextInputLayoutStyle"
     android:textColorHint="#fff"
     app:boxStrokeColor="#fff"
     .....>
          <EditText ...

where the style is:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="colorAccent">#fff</item>
</style>   

But when the textinput is not focused I get this look:

How can I change the color of the black line to be white too?

Solution 1:

Use this style to apply border color and border width like this :

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">#fff</item>
    <item name="boxStrokeWidth">2dp</item>
</style>

get Additional details about styling from this link

Add below line in your colors.xml file that overrides default color for TextInputLayout

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

Solution 2:

As of version 1.1.0-alpha02 of the Material Components for Android it works to simply create a ColorStateList for these items. The procedure is as follows:

Create a new resource directory "color" in res and inside color add a color resource file named "text_input_box_stroke.xml" res/color/text_input_box_stroke.xml put something like the following:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

Then in your styles.xml you would put:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>

Finally indicate your style for the actual TextInputLayout:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    ...

Solution 3:

As of Material Components Alpha 7 you simply create a color selector file as so: colors/text_input_outline_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:color="@color/buttonDark"/>
    <item android:state_hovered="true" android:color="@color/buttonDark"/>
    <item android:state_focused="true" android:color="@color/buttonDark"/>
    <item android:color="@color/buttonDark"/>
</selector>

For more context into how this is being set. Here is relevant source code:

ColorStateList boxStrokeColorStateList =
    MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
  defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
  disabledColor =
      boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);
  hoveredStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);
  focusedStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);
} else {
  // If attribute boxStrokeColor is not a color state list but only a single value, its value
  // will be applied to the box's focus state.
  focusedStrokeColor =
      a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
  defaultStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
  disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
  hoveredStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}

From this list you can see that you want to ensure you are using a color selector with all states defined, or it will default back to another color.

Solution 4:

First Remove from your TextInputLayout

<item name="boxStrokeColor">@color/YourColor</item>

Second, add a new color attribute

 <color name="mtrl_textinput_default_box_stroke_color" tools:override="true" >YourColor</color>

Must write the same name mtrl_textinput_default_box_stroke_color do n't change