https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

05/14/2022, 9:36 PM
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?
t

tad

05/14/2022, 10:28 PM
Should be pretty easy to animate the button content with AnimatedContent and the border/background with
animateColorAsState
c

Colton Idle

05/14/2022, 10:38 PM
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.
1
I guess I was just trying to see if there was any magical morph animation or something lol
t

tad

05/14/2022, 10:54 PM
Underneath,
MaterialButton
and
OutlinedButton
just call
Surface
anyway
I guess I'm confused why you need to use one over the other if you're setting a border on both
c

Colton Idle

05/14/2022, 11:28 PM
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)
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
c

Chrimaeon

05/15/2022, 6:21 AM
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.
c

Colton Idle

05/15/2022, 8:33 AM
im definitely open to ideas. I will give that a try!
5 Views