Is there a way to animate change in a `Button`s `B...

# compose

[Matti MK]

Is there a way to animate change in a `Button`s ButtonColors based on the enabled property value?

I have a button for which I’ve defined the disabled and enabled colors as shown below. How can I animate the color change when the enabled property changes?

colors = ButtonDefaults.buttonColors(
            backgroundColor = colors.primaryVariant,
            disabledBackgroundColor = colors.secondaryVariant
        ),

[gildor]

There are a few different APIs for this, for example you can use animateColorAsState

[gildor]

See examples in https://developer.android.com/jetpack/compose/animation#animate-as-state

[Matti MK]

Thanks! I was looking into that, but wondered if there's something directly available for the ButtonColors instead of just changing the backgroundColor myself based on the state

[Matti MK]

I'd prefer to make use of the disabledBackgroundColor property

[gildor]

do you mean animate state changes for button by default? Maybe worth to report it to compose mateial

[Matti MK]

Yep, that's what I'm referring to! Seeing that there's already properties for the different states, I think it would be suitable to be able to animate the changes in between those props. Especially since animation is such a highlighted part of Compose

[Matti MK]

Where can you make an an issue for the material components? Is it in Google's issue tracker or on a GH repo?

[gildor]

https://issuetracker.google.com/

[Matti MK]

Looked a bit into the color change using just the backgroundColor:

Doesn’t work as the Button pulls a disabledBackgroundColor from my theme, so declaring it in the ButtonDefaults.buttonColors is simply overriding it: as such, changing the backgroundColor by the enabled state of the button doesn’t really do anything: backgroundColor is not shown when the button is disabled.

Not really feeling like re-creating the button myself, so I guess I’ll go without any state animation now 🤔

[gildor]

well yeah, in this case it will not work, but it can be “enabled” just do nothing

[gildor]

still hack of course

[Tobias Suchalla]

You could animate the buttonColors as a whole and animate the disabledBackgroundColor from backgroundColor to actual disabled color.

[gildor]

also true! ☝️

[Tobias Suchalla]

val disabledColor: Color by animateColorAsState(if (enabled) colors.primaryVariant else colors.secondaryVariant)
...
colors = ButtonDefaults.buttonColors(
    backgroundColor = colors.primaryVariant,
    disabledBackgroundColor = disabledColor
)

[Matti MK]

That’s a neat idea, wouldn’t have occurred to me and it works 🎉

val color by animateColorAsState(if (enabled) colors.primaryVariant else colors.secondaryVariant)

    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = color,
            disabledBackgroundColor = color
        ),

Just need to animate both props to get the animation both ways 👍

Thanks both of you for the help, much appreciated 🙇

[Louis Pullen-Freilich [G]]

It would be easier / more performant to create your own ButtonColors implementation, instead of using the default here. It would also allow expressing exactly what you want to instead of needing this hack to set both backgroundColor and disabledBackgroundColor to the same value 🙂

[Daniele Segato]

@Matti MK have you created the feature request? can you link it? I want to star it. thanks

[Louis Pullen-Freilich [G]]

We also don’t have plans to animate between these properties - it is important that enabled / disabled states are immediately obvious, and Material doesn’t recommend animations for disabled states

[Matti MK]

Didn’t make the request, but I guess the above answer solves it then 😄

Very surprised that animation between the states is not recommended, it’s a subtle but nice effect. On the XML world you wouldn’t even need to really think twice: just whip out an animated-selector

[Louis Pullen-Freilich [G]]

Well it’s trivial to animate it if you want to, but we don’t provide it out of the box

[Daniele Segato]

@Louis Pullen-Freilich [G] would be nice to have an ButtonDefaults.animatedButtonColors() that implement that tho'.
If the animation is quick enough I believe the "immediate feedback" would be acceptable

[Louis Pullen-Freilich [G]]

We avoid adding APIs like that, because we don’t have any specifications for such a thing, as it is not part of Material design 🙂 It makes it much harder to maintain in the future, as there is no real reason for it to exist in a Material library. What should the animation curve / duration be for example? If it’s not supported by Material itself, then it is incorrect for us to just create something

[Matti MK]

@Louis Pullen-Freilich [G] thanks for the answers! Is there a design guide to the Material library that would go through design decisions such as the one you explained above? It would be helpful to understand the logic behind why a functionality (in this case animation) is or isn’t part a of the Material library.

[Tobias Suchalla]

There's https://material.io which has https://material.io/design/interaction/states.html#disabled. On first glance it did not mention animations. There's a lot of useful and interesting stuff, though.