FloatingToolbarDefaults

@ExperimentalMaterial3ExpressiveApi
object FloatingToolbarDefaults

Contains default values used for the floating toolbar implementations.

Properties

val ContainerSize: Dp

Default size used for HorizontalFloatingToolbar and VerticalFloatingToolbar container

val ContainerExpandedElevation: Dp =  // TODO read from token

Default expanded elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar

val ContainerCollapsedElevation: Dp =  // TODO read from token

Default collapsed elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar

val ContainerExpandedElevationWithFab: Dp =  // TODO read from token

Default expanded elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar with FAB.

This elevation will only affect the toolbar part of the component. The FAB that is provided in a slot will have its own elevation and can be controlled independently.

val ContainerCollapsedElevationWithFab: Dp =  // TODO read from token

Default collapsed elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar with FAB.

This elevation will only affect the toolbar part of the component. The FAB that is provided in a slot will have its own elevation and can be controlled independently.

val ContainerShape: Shape

Default shape used for HorizontalFloatingToolbar and VerticalFloatingToolbar

val ContentPadding =
    PaddingValues(
        start = FloatingToolbarTokens.ContainerLeadingSpace,
        top = FloatingToolbarTokens.ContainerLeadingSpace,
        end = FloatingToolbarTokens.ContainerTrailingSpace,
        bottom = FloatingToolbarTokens.ContainerTrailingSpace,
    )

Default padding used for HorizontalFloatingToolbar and VerticalFloatingToolbar when content are default size (24dp) icons in IconButton that meet the minimum touch target (48.dp).

val ScreenOffset = FloatingToolbarTokens.ContainerExternalPadding

Default offset from the edge of the screen used for HorizontalFloatingToolbar and VerticalFloatingToolbar.

val ScrollDistanceThreshold: Dp

A default threshold in Dp for the content's scrolling that defines when the toolbar should be collapsed or expanded.

Functions

animationSpec

@Composable
    fun <T> animationSpec(): FiniteAnimationSpec<T>

Returns a default animation spec used for HorizontalFloatingToolbars and VerticalFloatingToolbars.

exitAlwaysScrollBehavior

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun exitAlwaysScrollBehavior(
        exitDirection: FloatingToolbarExitDirection,
        state: FloatingToolbarState = rememberFloatingToolbarState(),
        snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value(),
        flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay(),
    ): FloatingToolbarScrollBehavior

Returns a FloatingToolbarScrollBehavior. A floating toolbar that is set up with this FloatingToolbarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

Parameters

horizontalEnterTransition

@Composable
    fun horizontalEnterTransition(expandFrom: Alignment.Horizontal) =
        expandHorizontally(animationSpec = animationSpec(), expandFrom = expandFrom)

Default enter transition used for HorizontalFloatingToolbar when expanding

verticalEnterTransition

@Composable
    fun verticalEnterTransition(expandFrom: Alignment.Vertical) =
        expandVertically(animationSpec = animationSpec(), expandFrom = expandFrom)

Default enter transition used for VerticalFloatingToolbar when expanding

horizontalExitTransition

@Composable
    fun horizontalExitTransition(shrinkTowards: Alignment.Horizontal) =
        shrinkHorizontally(animationSpec = animationSpec(), shrinkTowards = shrinkTowards)

Default exit transition used for HorizontalFloatingToolbar when shrinking

verticalExitTransition

@Composable
    fun verticalExitTransition(shrinkTowards: Alignment.Vertical) =
        shrinkVertically(animationSpec = animationSpec(), shrinkTowards = shrinkTowards)

Default exit transition used for VerticalFloatingToolbar when shrinking

standardFloatingToolbarColors

@Composable
    fun standardFloatingToolbarColors(): FloatingToolbarColors

Creates a FloatingToolbarColors that represents the default standard colors used in the various floating toolbars.

vibrantFloatingToolbarColors

@Composable
    fun vibrantFloatingToolbarColors(): FloatingToolbarColors

Creates a FloatingToolbarColors that represents the default vibrant colors used in the various floating toolbars.

standardFloatingToolbarColors

@Composable
    fun standardFloatingToolbarColors(
        toolbarContainerColor: Color = Color.Unspecified,
        toolbarContentColor: Color = Color.Unspecified,
        fabContainerColor: Color = Color.Unspecified,
        fabContentColor: Color = Color.Unspecified,
    ): FloatingToolbarColors

Creates a FloatingToolbarColors that represents the default standard colors used in the various floating toolbars.

Parameters

vibrantFloatingToolbarColors

@Composable
    fun vibrantFloatingToolbarColors(
        toolbarContainerColor: Color = Color.Unspecified,
        toolbarContentColor: Color = Color.Unspecified,
        fabContainerColor: Color = Color.Unspecified,
        fabContentColor: Color = Color.Unspecified,
    ): FloatingToolbarColors

Creates a FloatingToolbarColors that represents the default vibrant colors used in the various floating toolbars.

Parameters

VibrantFloatingActionButton

@Composable
    fun VibrantFloatingActionButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        shape: Shape = FloatingActionButtonDefaults.shape,
        containerColor: Color = vibrantFloatingToolbarColors().fabContainerColor,
        contentColor: Color = vibrantFloatingToolbarColors().fabContentColor,
        interactionSource: MutableInteractionSource? = null,
        content: @Composable () -> Unit,
    ) =
        FloatingActionButton(
            onClick = onClick,
            modifier = modifier.fillMaxSize(),
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            elevation =
                FloatingActionButtonDefaults.elevation(
                    defaultElevation = ElevationTokens.Level2,
                    pressedElevation = ElevationTokens.Level2,
                    focusedElevation = ElevationTokens.Level2,
                    hoveredElevation = ElevationTokens.Level3,
                ),
            interactionSource = interactionSource,
            content = content,
        )

Creates a FloatingActionButton that represents a toolbar floating action button with vibrant colors.

The FAB's elevation and size will be controlled by the floating toolbar, so it's applied with a Modifier.fillMaxSize.

Parameters

StandardFloatingActionButton

@Composable
    fun StandardFloatingActionButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        shape: Shape = FloatingActionButtonDefaults.shape,
        containerColor: Color = standardFloatingToolbarColors().fabContainerColor,
        contentColor: Color = standardFloatingToolbarColors().fabContentColor,
        interactionSource: MutableInteractionSource? = null,
        content: @Composable () -> Unit,
    ) =
        FloatingActionButton(
            onClick = onClick,
            modifier = modifier.fillMaxSize(),
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            elevation =
                FloatingActionButtonDefaults.elevation(
                    defaultElevation = ElevationTokens.Level2,
                    pressedElevation = ElevationTokens.Level2,
                    focusedElevation = ElevationTokens.Level2,
                    hoveredElevation = ElevationTokens.Level3,
                ),
            interactionSource = interactionSource,
            content = content,
        )

Creates a FloatingActionButton that represents a toolbar floating action button with standard colors.

The FAB's elevation and size will be controlled by the floating toolbar, so it's applied with a Modifier.fillMaxSize.

Parameters

floatingToolbarVerticalNestedScroll

fun Modifier.floatingToolbarVerticalNestedScroll(
        expanded: Boolean,
        onExpand: () -> Unit,
        onCollapse: () -> Unit,
        expandScrollDistanceThreshold: Dp = ScrollDistanceThreshold,
        collapseScrollDistanceThreshold: Dp = ScrollDistanceThreshold,
        reverseLayout: Boolean = false,
    ): Modifier

This Modifier tracks vertical scroll events on the scrolling container that a floating toolbar appears above. It then calls onExpand and onCollapse to adjust the toolbar's state based on the scroll direction and distance.

Essentially, it expands the toolbar when you scroll down past a certain threshold and collapses it when you scroll back up. You can customize the expand and collapse thresholds through the expandScrollDistanceThreshold and collapseScrollDistanceThreshold.

Parameters