animateFloatingActionButton

Apply this modifier to a [FloatingActionButton] to show or hide it with an animation, typically

animateFloatingActionButton

Compose Modifier

Common
@ExperimentalMaterial3ExpressiveApi
fun Modifier.animateFloatingActionButton(
    visible: Boolean,
    alignment: Alignment,
    targetScale: Float = FloatingActionButtonDefaults.ShowHideTargetScale,
    scaleAnimationSpec: AnimationSpec<Float>? = null,
    alphaAnimationSpec: AnimationSpec<Float>? = null,
): Modifier

Apply this modifier to a FloatingActionButton to show or hide it with an animation, typically based on the app's main content scrolling.

Parameters

visiblewhether the FAB should be shown or hidden with an animation
alignmentthe direction towards which the FAB should be scaled to and from
targetScalethe initial scale value when showing the FAB and the final scale value when hiding the FAB
scaleAnimationSpecthe AnimationSpec to use for the scale part of the animation, if null the Fast Spatial spring spec from the MotionScheme will be used
alphaAnimationSpecthe AnimationSpec to use for the alpha part of the animation, if null the Fast Effects spring spec from the MotionScheme will be used

Code Examples

AnimatedFloatingActionButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun AnimatedFloatingActionButtonSample() {
    val listState = rememberLazyListState()
    // The FAB is initially shown. Upon scrolling past the first item we hide the FAB by using a
    // remembered derived state to minimize unnecessary compositions.
    val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
    Scaffold(
        floatingActionButton = {
            // A FAB should have a tooltip associated with it.
            TooltipBox(
                positionProvider =
                    TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
                tooltip = { PlainTooltip { Text("Localized description") } },
                state = rememberTooltipState(),
            ) {
                MediumFloatingActionButton(
                    modifier =
                        Modifier.animateFloatingActionButton(
                            visible = fabVisible,
                            alignment = Alignment.BottomEnd,
                        ),
                    onClick = { /* do something */ },
                ) {
                    Icon(
                        Icons.Filled.Add,
                        contentDescription = "Localized description",
                        modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
                    )
                }
            }
        },
        floatingActionButtonPosition = FabPosition.End,
    ) {
        LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
            for (index in 0 until 100) {
                item { Text(text = "List item - $index", modifier = Modifier.padding(24.dp)) }
            }
        }
    }
}