What's a nice way to animate between a Material Bu...

# compose

[Colton Idle]

What's a nice way to animate between a Material Button and an Outlined button. I essentially have this kind of twitter "Follow/Following" functionality my designer wants

I currently crossfade between this and this, but its kinda ugly. Would be cool to reshape the button I suppose while swapping the text. Thoughts?

[tad]

Should be pretty easy to animate the button content with AnimatedContent and the border/background with animateColorAsState

[Colton Idle]

So I have a regular material Button (left) and a material outlined button (right). So I'm not sure if I can just swap the background and the border... but let me try!

But yeah, I guess my main "issue" is that I have two different composables and if I want one of them to "shape shift" into the other, I will probably just have to use the same button and modify it's properties.

[Colton Idle]

I guess I was just trying to see if there was any magical morph animation or something lol

[tad]

Underneath, MaterialButton and OutlinedButton just call Surface anyway

[tad]

I guess I'm confused why you need to use one over the other if you're setting a border on both

[Colton Idle]

I guess my example above is bad. I was just trying to show that I have two different sized buttons, but I'm using two completely different composables. (Button and outlines button)

[Colton Idle]

alright. im using the same button now and just animating properties. much better so far, but still not perfect. going to continue iterating. thanks all

[Chrimaeon]

Would it be easier to not use a button but a “checkbox” type component? What you have to not really a button but rather a checkbox with a selected and an unselected state.

[Colton Idle]

im definitely open to ideas. I will give that a try!