Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TextInputLayout] boxStrokeColor doesn't work with ColorStateLists for a variety of states. #593

Closed
danielesegato opened this issue Sep 12, 2019 · 25 comments
Assignees
Labels

Comments

@danielesegato
Copy link

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

@zishanj
Copy link

zishanj commented Sep 24, 2019

This is an issue with v1.0 also. Any progress on it or temporary workaround to change the defaultStrokeColor only?

@zishanj
Copy link

zishanj commented 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>

@danielesegato
Copy link
Author

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>

@zishanj
Copy link

zishanj commented Sep 26, 2019

Not really if you want to reflect the change everywhere for single state only. Thanks for the suggestion though!

@danielesegato
Copy link
Author

That's a big IF :-) better to make sure people who come across your suggestion understand it ;-)

@ldjcmu
Copy link
Contributor

ldjcmu commented Sep 27, 2019

Tracking that PR #524 is related to this.

@mladen1nf
Copy link

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

@ldjcmu
Copy link
Contributor

ldjcmu commented Oct 1, 2019

Include #515 and #534 in this issue.

@ldjcmu ldjcmu changed the title [TextInputLayout] boxStrokeColor only change the focused color on Outlined box [TextInputLayout] boxStrokeColor doesn't work with ColorStateLists for a variety of states. Oct 1, 2019
@ldjcmu
Copy link
Contributor

ldjcmu commented Oct 1, 2019

The TextInputLayout does not respect defined colors. I am using a filled text input layout but the floating label, underline and cursor colors, when focused is always the colorPrimary even after trying to change it. I have tried setting the color of choice using colorControlActivated but it doesn't work

@KelvinPac
Copy link

Using boxStrokeColor makes the floating label transparent I think it uses white color because my background color is also white

@danielesegato
Copy link
Author

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?

@douglasiacovelli
Copy link

@ymarian any chances of this fix entering on the 1.1.0-beta03 or 1.1.0-rc?

@damon-beaven
Copy link

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?

@amatkivskiy
Copy link

Any updates on this?

@zishanj
Copy link

zishanj commented Feb 13, 2020

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

@jamessolo12
Copy link

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

@marinantonio
Copy link

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

@nicolasCastro
Copy link

nicolasCastro commented May 3, 2020

Hey,
I was looking to change the 'defaultStrokeColor' programmatically and I did it like this:

fun setDefaultBoxColor(color: Int) {
    try {
        val defaultStrokeColorField: Field = TextInputLayout::class.java.getDeclaredField("defaultStrokeColor")
        defaultStrokeColorField.isAccessible = true
        defaultStrokeColorField.set(this, color)
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

@JonathanFStewart
Copy link

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.

@platramos
Copy link

I'm currently experiencing the same issues. I can override boxStrokeColor in the xml like so:

Screen Shot 2020-05-22 at 5 24 01 PM

However, doing it via code like I need does not change the boxStrokeColor:

Screen Shot 2020-05-22 at 5 27 13 PM

This is what my color state list looks like:

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

I need to override boxStrokeColor programmatically so any guidance would be greatly appreciated

@m-i-n-a-r
Copy link

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

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

@wcshi
Copy link
Contributor

wcshi commented Jun 3, 2020

@damon-beaven please open a separate issue about changing this cursor color.

@leticiarossi
Copy link
Contributor

To all the people who say that it is still broken, can you provide more info? The fix introduced in dc88b3e 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

@platramos
Copy link

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

@leticiarossi That worked like a charm, thanks for the help :)

@hiworld75018
Copy link

hiworld75018 commented Jan 26, 2021

Hi @leticiarossi,

My CSL being my_stroke_color.xml :

<selector>
  <item android:state_focused="true"  android:color="[color1]"/>
  <item android:state_enabled="false" android:color="[color2]"/>
  <item android:color="[color3]"/>
</selector>

And my styles.xml embedding :

<style name="My.TextLayout" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
  <item name="boxStrokeColor">@color/my_stroke_color</item>
</style>

Material 1.3.0-rc01 works with <com.google.android.material.textfield.TextInputLayout ... style="@style/My.TextLayout"> ! The [enabled=true] & [focused=false | true] state, and the [enabled=false] state are handled as they should be. 👍

NOTE: In one case, disabling the TextInputEditText (contained in TextInputLayout) is sufficient to change the TextInputLayout box color. In a second case, I have to disable also the TextInputLayout to make it handle the [enabled=false] state :

((TextInputLayout) findViewById(R.id.my_text_input_layout)).setEnabled(false);  // necessary extra
((TextInputEditText) findViewById(R.id.my_text_input_edit_text)).setEnabled(false);

However, if I declare :

<com.google.android.material.textfield.TextInputLayout ...
  app:boxBackgroundMode="outline"
  app:boxBackgroundColor="@null"
  app:boxStrokeColor="@color/my_stroke_color">

the [enabled=false] state is not handled - just like before, when only the [focused=false | true] state was handled. 👎

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests