I'm trying to recreate the animation for the expanded Speed Dial shown on the Material Design website but I'm struggling to achieve the exact same result in Compose. For now I tried to play with the AnimatedVisibility of the ColumnScope but I don't thin it's possible to replicate the same behavior.
Any suggestion on how to achieve this?
I found the expected output by using Floating Action Button Speed Dial library.
The library is available on Jcenter so no additonal repository is required.
Check whether you get the desired result https://github.com/leinardi/FloatingActionButtonSpeedDial.
It can definitely be achieved, that's for sure. One method that I can think of currently is something like this:
Create a single Composable that accepts a state (shown/hidden) and any other parameters you require. Inside that, create a state-holder for the visibility of each dial item, and trigger the animation on them at certain millis apart from each other.
Something like this
@Composable
fun SpeedDial(expanded: Boolean){
LaunchedEffect(expanded){
handleAnimation()
}
val visibilityList = remember { mutableStateListOf<Boolean>(/* List Of Booleans */) }
AnimatedVisibility(visible == visibilityList(0)){
Item1() // Visible only if the first item in list is visible
}
// Copy-paste for other items
suspend fun handleAnimation() {
visibilityList.forEachIndexed { index, visibility ->
visibilityList.set(index, expanded)
delay(150) // Alter per-requirement
}
}
}
This should achieve the effect without lag. Try it out.
expanded received currently. It will not be re-initialized with that because of remember.animationSpec of AnimatedVisibility, like tween can take a delayMillis and that can be used to delay the animations without the need to do it directly with coroutine.