material-components-android: [TextInputLayout] boxStrokeColor doesn't work with ColorStateLists for a variety of states.

Description: According to the documentation we can change the box color of a TextInputLayout using the attribute boxStrokeColor.

in truth, unless this is defined as a color selector, this only alter the focused color. It looks usually ok on white background but it’s really bad in dark background.

Instead the focused color change and the non focused color stay the default, which is

default = mtrl_textinput_default_box_stroke_color
disabled = mtrl_textinput_disabled_color
hovered = mtrl_textinput_hovered_box_stroke_color

Expected behavior: the boxStrokeColor should be taken and be used to generate defaultStrokeColor, focusedStrokeColor, hoveredStrokeColor and disabledColor according to https://material.io/design/interaction/states.html#anatomy

Source code:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:boxStrokeColor="#FFF"/>

Android API version: Any. We tried on P, Q.

Material Library version: 1.1.0-alpha10

Device: Pixel 2, Pixel 3

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 19
Comments: 25 (5 by maintainers)

Most upvoted comments

Just overriding the mtrl_textinput_default_box_stroke_color value fixed it:

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

+13

zishanj on Sep 24, 2019

Just overriding the mtrl_textinput_default_box_stroke_color value fixed it:

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

This is really a BAD idea.

mtrl_textinput_default_box_stroke_color is not used only there.

If you want to change the color right now create a color selector and use it to set the color:

<?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/stroke_enabled"/>
    <item android:state_hovered="true" android:color="@color/stroke_hovered"/>
    <item android:state_focused="true" android:color="@color/stroke_focused"/>
    <item android:color="@color/stroke_default"/>
</selector>

+11

danielesegato on Sep 25, 2019

Still broken on 1.2.0-beta01. I’ve been waiting for the fix for a year now.

m-i-n-a-r on May 29, 2020

Just overriding the mtrl_textinput_default_box_stroke_color value fixed it: <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#aaaaaa</color>

This is really a BAD idea.

mtrl_textinput_default_box_stroke_color is not used only there.

If you want to change the color right now create a color selector and use it to set the color:
<?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/stroke_enabled"/>
    <item android:state_hovered="true" android:color="@color/stroke_hovered"/>
    <item android:state_focused="true" android:color="@color/stroke_focused"/>
    <item android:color="@color/stroke_default"/>
</selector>

This solution does not work

mladen1nf on Oct 1, 2019

I can confirm this is still not working on 1.1.0 or 1.2.0-alpha06 with either the ColorSelector or setting the color to a static color. This issue needs to be reopened.

JonathanFStewart on May 7, 2020

Even with using that exact color selector (suggested above), I am not able to override the cursor color in TextInputLayout. It appears to be pulling colorPrimary. EditText uses colorAccent by default (which is what my app theme assumes). Mixing TextInputLayout and EditText w/in the same app leads a mixture of cursor colors.

Is it intentional that the cursor is based on colorPrimary…or is this a bug? If so, should I log a new bug for that?

damon-beaven on Dec 10, 2019

Can we re-open this issue? Its clearly broken and the workaround doesn’t work.

jamessolo12 on Apr 22, 2020

To all the people who say that it is still broken, can you provide more info? The fix introduced in https://github.com/material-components/material-components-android/commit/dc88b3e45fc857404bc2e07976fc037e541e98b8 was a setter to set a CSL to change the stroke color. Are you creating a CSL and calling setBoxStrokeColorStateList? If you are and still having issues, provide a sample app that reproduces the bug.

The CSL should follow the format of mtrl_outlined_stroke_color.xml

@platramos if you call setBoxStrokeColorStateList and pass that CSL it should work

leticiarossi on Jun 3, 2020

Heya all, I can confirm issue is still present in 1.2.0-alpha05, also drawable selector works, the color one doesn’t.

So, in your layout xml:

<com.google.android.material.textfield.TextInputLayout
...
app:boxStrokeColor="@drawable/selector_box_stroke_color"
...
>

marinantonio on Apr 29, 2020

If you want to change the color right now create a color selector and use it to set the color:

<?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/stroke_enabled"/>
    <item android:state_hovered="true" android:color="@color/stroke_hovered"/>
    <item android:state_focused="true" android:color="@color/stroke_focused"/>
    <item android:color="@color/stroke_default"/>
</selector>

This solution does not work

yes it does?!

are you creating a COLOR selector or a drawable selector?

danielesegato on Oct 7, 2019

@amatkivskiy you should use this workaround if you want to change cursor color.

zishanj on Feb 13, 2020