FloatingToolbarDefaults

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha22

Common/AllAndroid/JVM

• Cmn

  object FloatingToolbarDefaults

---

Contains default values used for the floating toolbar implementations.

Summary

Public functions
Unit	@Composable StandardFloatingActionButton(     onClick: () -> Unit,     modifier: Modifier,     shape: Shape,     containerColor: Color,     contentColor: Color,     interactionSource: MutableInteractionSource?,     content: @Composable () -> Unit ) Creates a FloatingActionButton that represents a toolbar floating action button with standard colors.	Cmn
Unit	@Composable VibrantFloatingActionButton(     onClick: () -> Unit,     modifier: Modifier,     shape: Shape,     containerColor: Color,     contentColor: Color,     interactionSource: MutableInteractionSource?,     content: @Composable () -> Unit ) Creates a FloatingActionButton that represents a toolbar floating action button with vibrant colors.	Cmn
FiniteAnimationSpec<T>	@Composable <T : Any?> animationSpec() Returns a default animation spec used for HorizontalFloatingToolbars and VerticalFloatingToolbars.	Cmn
FloatingToolbarScrollBehavior	@Composable exitAlwaysScrollBehavior(     exitDirection: FloatingToolbarExitDirection,     state: FloatingToolbarState,     snapAnimationSpec: AnimationSpec<Float>,     flingAnimationSpec: DecayAnimationSpec<Float> ) Returns a FloatingToolbarScrollBehavior.	Cmn
Modifier	Modifier.floatingToolbarVerticalNestedScroll(     expanded: Boolean,     onExpand: () -> Unit,     onCollapse: () -> Unit,     expandScrollDistanceThreshold: Dp,     collapseScrollDistanceThreshold: Dp,     reverseLayout: Boolean ) This Modifier tracks vertical scroll events on the scrolling container that a floating toolbar appears above.	Cmn
EnterTransition	@Composable horizontalEnterTransition(expandFrom: Alignment.Horizontal) Default enter transition used for HorizontalFloatingToolbar when expanding	Cmn
ExitTransition	@Composable horizontalExitTransition(shrinkTowards: Alignment.Horizontal) Default exit transition used for HorizontalFloatingToolbar when shrinking	Cmn
FloatingToolbarColors	@Composable standardFloatingToolbarColors() Creates a FloatingToolbarColors that represents the default standard colors used in the various floating toolbars.	Cmn
FloatingToolbarColors	@Composable standardFloatingToolbarColors(     toolbarContainerColor: Color,     toolbarContentColor: Color,     fabContainerColor: Color,     fabContentColor: Color ) Creates a FloatingToolbarColors that represents the default standard colors used in the various floating toolbars.	Cmn
EnterTransition	@Composable verticalEnterTransition(expandFrom: Alignment.Vertical) Default enter transition used for VerticalFloatingToolbar when expanding	Cmn
ExitTransition	@Composable verticalExitTransition(shrinkTowards: Alignment.Vertical) Default exit transition used for VerticalFloatingToolbar when shrinking	Cmn
FloatingToolbarColors	@Composable vibrantFloatingToolbarColors() Creates a FloatingToolbarColors that represents the default vibrant colors used in the various floating toolbars.	Cmn
FloatingToolbarColors	@Composable vibrantFloatingToolbarColors(     toolbarContainerColor: Color,     toolbarContentColor: Color,     fabContainerColor: Color,     fabContentColor: Color ) Creates a FloatingToolbarColors that represents the default vibrant colors used in the various floating toolbars.	Cmn

Public properties
Dp	ContainerCollapsedElevation Default collapsed elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar	Cmn
Dp	ContainerCollapsedElevationWithFab Default collapsed elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar with FAB.	Cmn
Dp	ContainerExpandedElevation Default expanded elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar	Cmn
Dp	ContainerExpandedElevationWithFab Default expanded elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar with FAB.	Cmn
Shape	ContainerShape Default shape used for HorizontalFloatingToolbar and VerticalFloatingToolbar	Cmn
Dp	ContainerSize Default size used for HorizontalFloatingToolbar and VerticalFloatingToolbar container	Cmn
PaddingValues	ContentPadding Default padding used for HorizontalFloatingToolbar and VerticalFloatingToolbar when content are default size (24dp) icons in IconButton that meet the minimum touch target (48.dp).	Cmn
Dp	ScreenOffset Default offset from the edge of the screen used for HorizontalFloatingToolbar and VerticalFloatingToolbar.	Cmn
Dp	ScrollDistanceThreshold A default threshold in Dp for the content's scrolling that defines when the toolbar should be collapsed or expanded.	Cmn

Public functions

StandardFloatingActionButton

Cmn

Added in 1.5.0-alpha22

@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
): Unit

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
onClick: () -> Unit	called when this FAB is clicked
modifier: Modifier = Modifier	the Modifier to be applied to this FAB
shape: Shape = FloatingActionButtonDefaults.shape	defines the shape of this FAB's container and shadow
containerColor: Color = standardFloatingToolbarColors().fabContainerColor	the color used for the background of this FAB. Defaults to the FloatingToolbarColors.fabContainerColor from the standardFloatingToolbarColors.
contentColor: Color = standardFloatingToolbarColors().fabContentColor	the preferred color for content inside this FAB. Defaults to the FloatingToolbarColors.fabContentColor from the standardFloatingToolbarColors.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this FAB. You can use this to change the FAB's appearance or preview the FAB in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit	the content of this FAB, typically an Icon

VibrantFloatingActionButton

Cmn

Added in 1.5.0-alpha22

@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
): Unit

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
onClick: () -> Unit	called when this FAB is clicked
modifier: Modifier = Modifier	the Modifier to be applied to this FAB
shape: Shape = FloatingActionButtonDefaults.shape	defines the shape of this FAB's container and shadow
containerColor: Color = vibrantFloatingToolbarColors().fabContainerColor	the color used for the background of this FAB. Defaults to the FloatingToolbarColors.fabContainerColor from the vibrantFloatingToolbarColors.
contentColor: Color = vibrantFloatingToolbarColors().fabContentColor	the preferred color for content inside this FAB. Defaults to the FloatingToolbarColors.fabContentColor from the vibrantFloatingToolbarColors.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this FAB. You can use this to change the FAB's appearance or preview the FAB in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit	the content of this FAB, typically an Icon

animationSpec

Cmn

Added in 1.5.0-alpha22

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

Returns a default animation spec used for HorizontalFloatingToolbars and VerticalFloatingToolbars.

exitAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha22

@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

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.FloatingToolbarDefaults
import androidx.compose.material3.FloatingToolbarDefaults.ScreenOffset
import androidx.compose.material3.FloatingToolbarExitDirection.Companion.Bottom
import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex

val exitAlwaysScrollBehavior =
    FloatingToolbarDefaults.exitAlwaysScrollBehavior(exitDirection = Bottom)
Scaffold(
    modifier = Modifier.nestedScroll(exitAlwaysScrollBehavior),
    content = { innerPadding ->
        Box(Modifier.padding(innerPadding)) {
            // The toolbar should receive focus before the screen content, so place it first.
            // Make sure to set its zIndex so it's above the screen content visually.
            HorizontalFloatingToolbar(
                modifier =
                    Modifier.align(Alignment.BottomCenter).offset(y = -ScreenOffset).zIndex(1f),
                expanded = true,
                leadingContent = { LeadingContent() },
                trailingContent = { TrailingContent() },
                content = {
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        //  where tooltip text is not announced by a11y screen
                                        //  readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) {
                                Text("Localized description")
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        FilledIconButton(
                            modifier = Modifier.width(64.dp),
                            onClick = { /* doSomething() */ },
                        ) {
                            Icon(Icons.Filled.Add, contentDescription = "Localized description")
                        }
                    }
                },
                scrollBehavior = exitAlwaysScrollBehavior,
            )
            LazyColumn(
                state = rememberLazyListState(),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                    )
                }
            }
        }
    },
)

on how to disable scrolling when touch exploration is enabled.

Parameters
exitDirection: FloatingToolbarExitDirection	indicates the direction towards which the floating toolbar exits the screen
state: FloatingToolbarState = rememberFloatingToolbarState()	the state object to be used to control or observe the floating toolbar's scroll state. See rememberFloatingToolbarState for a state that is remembered across compositions.
snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value()	an AnimationSpec that defines how the floating toolbar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position
flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay()	a DecayAnimationSpec that defines how to fling the floating tool bar when the user flings the toolbar itself, or the content below it

Modifier.floatingToolbarVerticalNestedScroll

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha22

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
expanded: Boolean	the current expanded state of the floating toolbar
onExpand: () -> Unit	callback to be invoked when the toolbar should expand
onCollapse: () -> Unit	callback to be invoked when the toolbar should collapse
expandScrollDistanceThreshold: Dp = ScrollDistanceThreshold	the scroll distance (in dp) required to trigger an onExpand
collapseScrollDistanceThreshold: Dp = ScrollDistanceThreshold	the scroll distance (in dp) required to trigger an onCollapse
reverseLayout: Boolean = false	indicates that the scrollable content has a reversed scrolling direction

horizontalEnterTransition

Cmn

Added in 1.5.0-alpha22

@Composable
fun horizontalEnterTransition(expandFrom: Alignment.Horizontal): EnterTransition

Default enter transition used for HorizontalFloatingToolbar when expanding

horizontalExitTransition

Cmn

Added in 1.5.0-alpha22

@Composable
fun horizontalExitTransition(shrinkTowards: Alignment.Horizontal): ExitTransition

Default exit transition used for HorizontalFloatingToolbar when shrinking

standardFloatingToolbarColors

Cmn

Added in 1.5.0-alpha22

@Composable
fun standardFloatingToolbarColors(): FloatingToolbarColors

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

standardFloatingToolbarColors

Cmn

Added in 1.5.0-alpha22

@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
toolbarContainerColor: Color = Color.Unspecified	the container color for the floating toolbar.
toolbarContentColor: Color = Color.Unspecified	the content color for the floating toolbar.
fabContainerColor: Color = Color.Unspecified	the container color for an adjacent floating action button.
fabContentColor: Color = Color.Unspecified	the content color for an adjacent floating action button.

verticalEnterTransition

Cmn

Added in 1.5.0-alpha22

@Composable
fun verticalEnterTransition(expandFrom: Alignment.Vertical): EnterTransition

Default enter transition used for VerticalFloatingToolbar when expanding

verticalExitTransition

Cmn

Added in 1.5.0-alpha22

@Composable
fun verticalExitTransition(shrinkTowards: Alignment.Vertical): ExitTransition

Default exit transition used for VerticalFloatingToolbar when shrinking

vibrantFloatingToolbarColors

Cmn

Added in 1.5.0-alpha22

@Composable
fun vibrantFloatingToolbarColors(): FloatingToolbarColors

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

vibrantFloatingToolbarColors

Cmn

Added in 1.5.0-alpha22

@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
toolbarContainerColor: Color = Color.Unspecified	the container color for the floating toolbar.
toolbarContentColor: Color = Color.Unspecified	the content color for the floating toolbar.
fabContainerColor: Color = Color.Unspecified	the container color for an adjacent floating action button.
fabContentColor: Color = Color.Unspecified	the content color for an adjacent floating action button.

Public properties

ContainerCollapsedElevation

Cmn

val ContainerCollapsedElevation: Dp

Default collapsed elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar

ContainerCollapsedElevationWithFab

Cmn

val ContainerCollapsedElevationWithFab: Dp

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.

ContainerExpandedElevation

Cmn

val ContainerExpandedElevation: Dp

Default expanded elevation used for HorizontalFloatingToolbar and VerticalFloatingToolbar

ContainerExpandedElevationWithFab

Cmn

val ContainerExpandedElevationWithFab: Dp

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.

ContainerShape

Cmn

val ContainerShape: Shape

Default shape used for HorizontalFloatingToolbar and VerticalFloatingToolbar

ContainerSize

Cmn

val ContainerSize: Dp

Default size used for HorizontalFloatingToolbar and VerticalFloatingToolbar container

ContentPadding

Cmn

Added in 1.5.0-alpha22

val ContentPadding: PaddingValues

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

ScreenOffset

Cmn

val ScreenOffset: Dp

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

ScrollDistanceThreshold

Cmn

val ScrollDistanceThreshold: Dp

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