I've got a simple example of a button that I want to be "toggleable". So when it's off it's an outli...

# compose

[Colton Idle]

I've got a simple example of a button that I want to be "toggleable". So when it's off it's an outlined button, but when it's "on" its filled with my companies primary color. I have it working but it kinda feels unnatural + the ripple into the background change also adds to how unnatural it looks. Any ideas?

OutlinedButton(
    modifier = Modifier.fillMaxWidth().heightIn(min = 48.dp),
    colors =
        ButtonDefaults.outlinedButtonColors(
            backgroundColor = if (toggle) CompanyPrimaryColor else Color.White))

[Stylianos Gakis]

Animating from an OutlinedButton to something else is probably something that’s not achievable without dropping one layer down, not calling OutlinedButton directly and doing some of the handling yourself to make it look like an OutlinedButton and whatever else you want it to be in the off state.
That’s my first thought looking at what you’re trying to achieve.

[Albert Chang]

Yeah I think building the button yourself using Surface would be easier.
Plus that since this is a toggleable button you should build it yourself anyway using Modifier.toggleable() for better a11y.

[Chris Sinco [G]]

Does the design spec call for it to animate between the two visual states?

[Stylianos Gakis]

Yeah reading that again I think I assumed there's animation between the states. If not it could be a simple if else case of showing the OutlinedButton and the other alternative.

[Stylianos Gakis]

Hmm but wait, thinking again, the ripple wouldn't look that nice, as you've mentioned as well. My bad.

[Colton Idle]

It doesn't necessarily call for an animation, but I think maybe the weirdness and harshness is coming from the material ripple then turning into a solid color and its jarring.

On our iOS counterpart there is no ripple and the background eases in so maybe I guess thats what im looking for. Our design team didn't even specifically call this out as an issue, I just think it looks bad. lol

[Chris Sinco [G]]

The ripple is an Android pattern so I'd ask the designers what they prefer: a more “unified” look or more native

[Chris Sinco [G]]

You could change the ripple color also or not have it at all to make the transition look better

[Colton Idle]

Yeah, I definitely like the ripple, I almost wish I could animate the ripple into the final state.

e.g. white button with black touch ripple, but the final end state is a black button. that would be cool.