Is there an easy way to animate the Checkbox checked-state in Compose so it doesn't look so abrupt?

# compose

[Florian]

Is there an easy way to animate the Checkbox checked-state in Compose so it doesn't look so abrupt?

[Tin Tran]

Im seeing checkboxes state animated by default in material theme. Is your theme extending material theme?

[Florian]

@Tin Tran Yes it does. I have a ripple effect but it looks very different to the old XML checkbox

[Florian]

Here is a comparison

[Florian]

left XML, right Compose

[Florian]

I'm not sure if I'm seeing any animation in Compose at all

[Florian]

@Tin Tran is the right one the same animation you have?

[Tin Tran]

Yeah I have the right one on my app

[Tin Tran]

It’s enough for me tho 😄

[Zach Klippenstein (he/him) [MOD]]

I thought I remembered seeing a CL specifically about animating the compose checkbox like 6 months ago - weird. It does look a little sudden to me too though.

[Zach Klippenstein (he/him) [MOD]]

It’s definitely being animated: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Checkbox.kt;l=258;drc=696caaf1f75d83dc5fbe4ec30434021db31668e8

[Florian]

Thank you very much! Good to know!

[Doris Liu]

The durations for animating various properties of CheckBox are pretty short:

private const val BoxInDuration = 50
private const val BoxOutDuration = 100
private const val CheckAnimationDuration = 100

defined at the end of the Checkbox.kt. It's likely a deliberate decision. @Louis Pullen-Freilich [G] would probably be able to share more insights.

[Louis Pullen-Freilich [G]]

Yes, these should be the correct up-to-date values from the Material spec

[Florian]

good to know, thank you!