TopAppBarDefaults

Artifact: androidx.compose.material3:material3

View Source

Added in 1.0.0

Common/AllAndroid/JVM

• Cmn

  object TopAppBarDefaults

---

Contains default values used for the top app bar implementations.

Summary

Public functions
TopAppBarColors	@Composable centerAlignedTopAppBarColors() This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarColors	@Composable centerAlignedTopAppBarColors(     containerColor: Color,     scrolledContainerColor: Color,     navigationIconContentColor: Color,     titleContentColor: Color,     actionIconContentColor: Color ) This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarScrollBehavior	@Composable enterAlwaysScrollBehavior(     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>? ) Returns a TopAppBarScrollBehavior.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable enterAlwaysScrollBehavior(     lazyListState: LazyListState,     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>? ) This function is deprecated. Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarScrollBehavior	@Composable enterAlwaysScrollBehavior(     scrollableState: ScrollableState,     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>? ) Returns a TopAppBarScrollBehavior.	Cmn
TopAppBarScrollBehavior	@Composable enterAlwaysScrollBehavior(     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>?,     isScrollingContentAtStart: () -> Boolean ) This function is deprecated. Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable enterAlwaysScrollBehavior(     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>?,     reverseLayout: Boolean ) This function is deprecated. Please use the enterAlwaysScrollBehavior() function that takes a scrollableState parameter.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable enterAlwaysScrollBehavior(     scrollState: ScrollState,     reverseScrolling: Boolean,     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>? ) This function is deprecated. Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarScrollBehavior	@Composable exitUntilCollapsedScrollBehavior(     state: TopAppBarState,     canScroll: () -> Boolean,     snapAnimationSpec: AnimationSpec<Float>?,     flingAnimationSpec: DecayAnimationSpec<Float>? ) Returns a TopAppBarScrollBehavior that adjusts its properties to affect the colors and height of the top app bar.	Cmn
TopAppBarColors	@Composable largeTopAppBarColors() This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarColors	@Composable largeTopAppBarColors(     containerColor: Color,     scrolledContainerColor: Color,     navigationIconContentColor: Color,     titleContentColor: Color,     actionIconContentColor: Color ) This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarColors	@Composable mediumTopAppBarColors() This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarColors	@Composable mediumTopAppBarColors(     containerColor: Color,     scrolledContainerColor: Color,     navigationIconContentColor: Color,     titleContentColor: Color,     actionIconContentColor: Color ) This function is deprecated. Use topAppBarColors instead	Cmn
TopAppBarScrollBehavior	@Composable pinnedScrollBehavior(state: TopAppBarState, canScroll: () -> Boolean) Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable pinnedScrollBehavior(     lazyListState: LazyListState,     state: TopAppBarState,     canScroll: () -> Boolean ) This function is deprecated. Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarScrollBehavior	@Composable pinnedScrollBehavior(     scrollableState: ScrollableState,     state: TopAppBarState,     canScroll: () -> Boolean ) Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable pinnedScrollBehavior(     state: TopAppBarState,     canScroll: () -> Boolean,     isScrollingContentAtStart: () -> Boolean ) This function is deprecated. Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarScrollBehavior	@ExperimentalMaterial3Api @Composable pinnedScrollBehavior(     scrollState: ScrollState,     reverseScrolling: Boolean,     state: TopAppBarState,     canScroll: () -> Boolean ) This function is deprecated. Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.	Cmn
TopAppBarColors	@Composable topAppBarColors() Creates a TopAppBarColors for small TopAppBar.	Cmn
TopAppBarColors	@Composable topAppBarColors(     containerColor: Color,     scrolledContainerColor: Color,     navigationIconContentColor: Color,     titleContentColor: Color,     actionIconContentColor: Color,     subtitleContentColor: Color ) Creates a TopAppBarColors for small TopAppBar.	Cmn

Public properties
PaddingValues	ContentPadding Default padding used for TopAppBar content	Cmn
Dp	LargeAppBarCollapsedHeight The default height of a LargeTopAppBar when collapsed by a TopAppBarScrollBehavior.	Cmn
Dp	LargeAppBarExpandedHeight The default expanded height of a LargeTopAppBar.	Cmn
Dp	LargeFlexibleAppBarWithSubtitleExpandedHeight The default expanded height of a LargeFlexibleTopAppBar with subtitle.	Cmn
Dp	LargeFlexibleAppBarWithoutSubtitleExpandedHeight The default expanded height of a LargeFlexibleTopAppBar without subtitle.	Cmn
Dp	MediumAppBarCollapsedHeight The default height of a MediumTopAppBar when collapsed by a TopAppBarScrollBehavior.	Cmn
Dp	MediumAppBarExpandedHeight The default expanded height of a MediumTopAppBar.	Cmn
Dp	MediumFlexibleAppBarWithSubtitleExpandedHeight The default expanded height of a MediumFlexibleTopAppBar with subtitle.	Cmn
Dp	MediumFlexibleAppBarWithoutSubtitleExpandedHeight The default expanded height of a MediumFlexibleTopAppBar without subtitle.	Cmn
Dp	TopAppBarExpandedHeight The default expanded height of a TopAppBar and the CenterAlignedTopAppBar.	Cmn
AnimationSpec<Float>	snapAnimationSpec Default AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position.	Cmn
WindowInsets	windowInsets Default insets to be used and consumed by the top app bars	Cmn

Public functions

centerAlignedTopAppBarColors

Cmn

Added in 1.2.0

Deprecated in 1.4.0

@Composable
fun centerAlignedTopAppBarColors(): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for CenterAlignedTopAppBars. The default implementation animates between the provided colors according to the Material Design specification.

centerAlignedTopAppBarColors

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@Composable
fun centerAlignedTopAppBarColors(
    containerColor: Color = Color.Unspecified,
    scrolledContainerColor: Color = Color.Unspecified,
    navigationIconContentColor: Color = Color.Unspecified,
    titleContentColor: Color = Color.Unspecified,
    actionIconContentColor: Color = Color.Unspecified
): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for CenterAlignedTopAppBars. The default implementation animates between the provided colors according to the Material Design specification.

Parameters
containerColor: Color = Color.Unspecified	the container color
scrolledContainerColor: Color = Color.Unspecified	the container color when content is scrolled behind it
navigationIconContentColor: Color = Color.Unspecified	the content color used for the navigation icon
titleContentColor: Color = Color.Unspecified	the content color used for the title
actionIconContentColor: Color = Color.Unspecified	the content color used for actions

Returns
TopAppBarColors	the resulting TopAppBarColors used for the top app bar

enterAlwaysScrollBehavior

Cmn

Added in 1.0.0

@Composable
fun enterAlwaysScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()
): TopAppBarScrollBehavior

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down. Note: If your layout utilizes reverseLayout or reverseScrolling, please use the overload that takes a ScrollableState parameter.

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun enterAlwaysScrollBehavior(
    lazyListState: LazyListState,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()
): TopAppBarScrollBehavior

This function is deprecated.
Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

This overload is intended for use cases with LazyColumn when the content is pre-scrolled or uses reverseLayout, as it correctly handles TopAppBar color transitions for these specific scroll states.

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
lazyListState: LazyListState	the LazyListState object observing the list's scroll position, used to determine if the list is scrolled to the start
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha22

@Composable
fun enterAlwaysScrollBehavior(
    scrollableState: ScrollableState,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()
): TopAppBarScrollBehavior

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

This overload is intended for use cases with scrollable containers (such as LazyColumn, a Column with verticalScroll, or any other container that implements ScrollableState) when the content is pre-scrolled or uses reverseLayout/reverseScrolling, as it correctly handles TopAppBar color transitions for these specific scroll states.

An enter always top app bar with reverse scrolling looks like:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val scrollBehavior =
    // Pass this state to ensure the top app bar color updates correctly when content has
    // reverse scrolling.
    TopAppBarDefaults.enterAlwaysScrollBehavior(scrollableState = scrollState)
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        Column(
            modifier =
                Modifier.fillMaxSize()
                    .padding(paddingValues = innerPadding)
                    .verticalScroll(state = scrollState, reverseScrolling = true),
            verticalArrangement = Arrangement.Bottom,
        ) {
            (0..75).forEach {
                Box(modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp)) {
                    Text(text = it.toString(), style = MaterialTheme.typography.bodyLarge)
                }
            }
        }
    },
)

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
scrollableState: ScrollableState	the ScrollableState of the scrollable container, used to determine if the content is at the start
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@Composable
fun enterAlwaysScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay(),
    isScrollingContentAtStart: () -> Boolean = { true }
): TopAppBarScrollBehavior

This function is deprecated.
Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

This overload is intended for use cases that are not covered by the standard overloads, such as when a custom isScrollingContentAtStart state needs to be determined for custom or complex layouts (e.g. LazyVerticalGrid with reverseLayout = true).

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.
isScrollingContentAtStart: () -> Boolean = { true }	A callback that returns true when the scrollable is at the origin of its content. Handles reversed layouts to ensure "start" always refers to the first logical item.

enterAlwaysScrollBehavior

Cmn

Added in 1.4.0

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun enterAlwaysScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay(),
    reverseLayout: Boolean = false
): TopAppBarScrollBehavior

This function is deprecated.
Please use the enterAlwaysScrollBehavior() function that takes a scrollableState parameter.

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this EnterAlwaysScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.
reverseLayout: Boolean = false	indicates that this behavior is applied to a scrollable content that has a reversed direction of scrolling and layout

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun enterAlwaysScrollBehavior(
    scrollState: ScrollState,
    reverseScrolling: Boolean = false,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()
): TopAppBarScrollBehavior

This function is deprecated.
Please use the enterAlwaysScrollBehavior function that takes a ScrollableState parameter.

Returns a TopAppBarScrollBehavior. A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the content is pulled up, and will immediately appear when the content is pulled down.

This overload is intended for use cases with composables that use a ScrollState, such as Column with verticalScroll, especially when the content is pre-scrolled or uses reverseScrolling. It correctly handles TopAppBar color transitions for these specific scroll states.

The returned TopAppBarScrollBehavior is remembered across compositions.

A sample for a small TopAppBar that collapses when the content is scrolled up, and appears when the content is scrolled down, using a Column with reverse scrolling:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val scrollBehavior =
    // Pass this state to ensure the top app bar color updates correctly when content has
    // reverse scrolling.
    TopAppBarDefaults.enterAlwaysScrollBehavior(scrollableState = scrollState)
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        Column(
            modifier =
                Modifier.fillMaxSize()
                    .padding(paddingValues = innerPadding)
                    .verticalScroll(state = scrollState, reverseScrolling = true),
            verticalArrangement = Arrangement.Bottom,
        ) {
            (0..75).forEach {
                Box(modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp)) {
                    Text(text = it.toString(), style = MaterialTheme.typography.bodyLarge)
                }
            }
        }
    },
)

Parameters
scrollState: ScrollState	state of the scroll
reverseScrolling: Boolean = false	reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.

exitUntilCollapsedScrollBehavior

Cmn

Added in 1.0.0

@Composable
fun exitUntilCollapsedScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec,
    flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()
): TopAppBarScrollBehavior

Returns a TopAppBarScrollBehavior that adjusts its properties to affect the colors and height of the top app bar.

A top app bar that is set up with this TopAppBarScrollBehavior will immediately collapse when the nested content is pulled up, and will expand back the collapsed area when the content is pulled all the way down.

The returned TopAppBarScrollBehavior is remembered across compositions.

A sample for a MediumTopAppBar with exitUntilCollapsedScrollBehavior:

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.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        MediumTopAppBar(
            title = {
                Text("Medium TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis)
            },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            actions = {
                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 = "Add to favorites"
                                }
                        ) {
                            Text("Add to favorites")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Add to favorites",
                        )
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyColumn(
            modifier = Modifier.padding(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),
                )
            }
        }
    },
)

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this ExitUntilCollapsedScrollBehavior
snapAnimationSpec: AnimationSpec<Float>? = TopAppBarDefaults.snapAnimationSpec	an optional AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position. If null is provided, the app bar will not snap and will remain in its current state.
flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()	an optional DecayAnimationSpec that defines how to fling the top app bar when the user flings the app bar itself, or the scrollable content. If null is provided, the app bar will not continue to animate its height based on the scroll velocity.

largeTopAppBarColors

Cmn

Added in 1.2.0

Deprecated in 1.4.0

@Composable
fun largeTopAppBarColors(): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for LargeTopAppBars. The default implementation interpolates between the provided colors as the top app bar scrolls according to the Material Design specification.

largeTopAppBarColors

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@Composable
fun largeTopAppBarColors(
    containerColor: Color = Color.Unspecified,
    scrolledContainerColor: Color = Color.Unspecified,
    navigationIconContentColor: Color = Color.Unspecified,
    titleContentColor: Color = Color.Unspecified,
    actionIconContentColor: Color = Color.Unspecified
): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for LargeTopAppBars. The default implementation interpolates between the provided colors as the top app bar scrolls according to the Material Design specification.

Parameters
containerColor: Color = Color.Unspecified	the container color
scrolledContainerColor: Color = Color.Unspecified	the container color when content is scrolled behind it
navigationIconContentColor: Color = Color.Unspecified	the content color used for the navigation icon
titleContentColor: Color = Color.Unspecified	the content color used for the title
actionIconContentColor: Color = Color.Unspecified	the content color used for actions

Returns
TopAppBarColors	the resulting TopAppBarColors used for the top app bar

mediumTopAppBarColors

Cmn

Added in 1.2.0

Deprecated in 1.4.0

@Composable
fun mediumTopAppBarColors(): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for MediumTopAppBars. The default implementation interpolates between the provided colors as the top app bar scrolls according to the Material Design specification.

mediumTopAppBarColors

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@Composable
fun mediumTopAppBarColors(
    containerColor: Color = Color.Unspecified,
    scrolledContainerColor: Color = Color.Unspecified,
    navigationIconContentColor: Color = Color.Unspecified,
    titleContentColor: Color = Color.Unspecified,
    actionIconContentColor: Color = Color.Unspecified
): TopAppBarColors

This function is deprecated.
Use topAppBarColors instead

Creates a TopAppBarColors for MediumTopAppBars. The default implementation interpolates between the provided colors as the top app bar scrolls according to the Material Design specification.

Parameters
containerColor: Color = Color.Unspecified	the container color
scrolledContainerColor: Color = Color.Unspecified	the container color when content is scrolled behind it
navigationIconContentColor: Color = Color.Unspecified	the content color used for the navigation icon
titleContentColor: Color = Color.Unspecified	the content color used for the title
actionIconContentColor: Color = Color.Unspecified	the content color used for actions

Returns
TopAppBarColors	the resulting TopAppBarColors used for the top app bar

pinnedScrollBehavior

Cmn

Added in 1.0.0

@Composable
fun pinnedScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true }
): TopAppBarScrollBehavior

Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly. Note: If your layout utilizes reverseLayout or reverseScrolling, please use the overload that takes a ScrollableState parameter.

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions.
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun pinnedScrollBehavior(
    lazyListState: LazyListState,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true }
): TopAppBarScrollBehavior

This function is deprecated.
Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.

Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.

This overload is intended for use cases with LazyColumn when the content is pre-scrolled or uses reverseLayout, as it correctly handles TopAppBar color transitions for these specific scroll states.

The returned TopAppBarScrollBehavior is remembered across compositions.

A sample for a pinned small TopAppBar when the content of the LazyColumn is pre-scrolled:

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.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val lazyListState = rememberLazyListState(initialFirstVisibleItemIndex = 30)
// Pass the state to ensure the top app bar color updates correctly when content is reversed or
// pre-scrolled.
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(scrollableState = lazyListState)
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyColumn(
            state = lazyListState,
            modifier = Modifier.padding(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),
                )
            }
        }
    },
)

Parameters
lazyListState: LazyListState	the LazyListState object observing the list's scroll position, used to determine if the list is scrolled to the start
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha22

@Composable
fun pinnedScrollBehavior(
    scrollableState: ScrollableState,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true }
): TopAppBarScrollBehavior

Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.

This overload is intended for use cases where the scroll state is represented by a ScrollableState (e.g. LazyVerticalGrid). It automatically determines if the content is at the start by observing the scroll position of the provided ScrollableState.

The returned TopAppBarScrollBehavior is remembered across compositions.

A sample for a pinned small TopAppBar that is scrolled with a reversed LazyVerticalGrid:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val lazyGridState = rememberLazyGridState()
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(scrollableState = lazyGridState)
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyVerticalGrid(
            columns = GridCells.Adaptive(minSize = 100.dp),
            reverseLayout = true,
            modifier = Modifier.padding(innerPadding),
            state = lazyGridState,
        ) {
            val list = (0..75).map { it.toString() }
            items(count = list.size) {
                Box(Modifier.fillMaxWidth().height(50.dp)) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                    )
                }
            }
        }
    },
)

Parameters
scrollableState: ScrollableState	the ScrollableState of the scrollable container, used to determine if the content is at the start
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun pinnedScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    isScrollingContentAtStart: () -> Boolean = { true }
): TopAppBarScrollBehavior

This function is deprecated.
Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.

Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.

This overload is intended for use cases that are not covered by the standard overloads, such as when a custom isScrollingContentAtStart state needs to be determined for custom or complex layouts (e.g. LazyVerticalGrid with reverseLayout = true).

The returned TopAppBarScrollBehavior is remembered across compositions.

A sample for a pinned small TopAppBar that is scrolled with a reversed LazyVerticalGrid:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
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.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val lazyGridState = rememberLazyGridState()
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(scrollableState = lazyGridState)
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            navigationIcon = {
                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 = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyVerticalGrid(
            columns = GridCells.Adaptive(minSize = 100.dp),
            reverseLayout = true,
            modifier = Modifier.padding(innerPadding),
            state = lazyGridState,
        ) {
            val list = (0..75).map { it.toString() }
            items(count = list.size) {
                Box(Modifier.fillMaxWidth().height(50.dp)) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                    )
                }
            }
        }
    },
)

Parameters
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior
isScrollingContentAtStart: () -> Boolean = { true }	A callback that returns true when the scrollable is at the origin of its content. Handles reversed layouts to ensure "start" always refers to the first logical item.

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha22

Deprecated in 1.5.0-alpha22

@ExperimentalMaterial3Api
@Composable
fun pinnedScrollBehavior(
    scrollState: ScrollState,
    reverseScrolling: Boolean = false,
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true }
): TopAppBarScrollBehavior

This function is deprecated.
Please use the pinnedScrollBehavior function that takes a ScrollableState parameter.

Returns a pinned TopAppBarScrollBehavior that tracks nested-scroll callbacks and updates its TopAppBarState.contentOffset accordingly.

This overload is intended for use cases with composables that use a ScrollState, such as Column with verticalScroll, especially when the content is pre-scrolled or uses reverseScrolling. It correctly handles TopAppBar color transitions for these specific scroll states.

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
scrollState: ScrollState	state of the scroll
reverseScrolling: Boolean = false	reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top
state: TopAppBarState = rememberTopAppBarState()	the state object to be used to control or observe the top app bar's scroll state. See rememberTopAppBarState for a state that is remembered across compositions
canScroll: () -> Boolean = { true }	a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

topAppBarColors

Cmn

Added in 1.2.0

@Composable
fun topAppBarColors(): TopAppBarColors

Creates a TopAppBarColors for small TopAppBar. The default implementation animates between the provided colors according to the Material Design specification.

topAppBarColors

Cmn

Added in 1.5.0-alpha22

@Composable
fun topAppBarColors(
    containerColor: Color = Color.Unspecified,
    scrolledContainerColor: Color = Color.Unspecified,
    navigationIconContentColor: Color = Color.Unspecified,
    titleContentColor: Color = Color.Unspecified,
    actionIconContentColor: Color = Color.Unspecified,
    subtitleContentColor: Color = Color.Unspecified
): TopAppBarColors

Creates a TopAppBarColors for small TopAppBar. The default implementation animates between the provided colors according to the Material Design specification.

Parameters
containerColor: Color = Color.Unspecified	the container color
scrolledContainerColor: Color = Color.Unspecified	the container color when content is scrolled behind it
navigationIconContentColor: Color = Color.Unspecified	the content color used for the navigation icon
titleContentColor: Color = Color.Unspecified	the content color used for the title
actionIconContentColor: Color = Color.Unspecified	the content color used for actions
subtitleContentColor: Color = Color.Unspecified	the content color used for the subtitle

Returns
TopAppBarColors	the resulting TopAppBarColors used for the top app bar

Public properties

ContentPadding

Cmn

Added in 1.5.0-alpha22

val ContentPadding: PaddingValues

Default padding used for TopAppBar content

LargeAppBarCollapsedHeight

Cmn

Added in 1.3.0

val LargeAppBarCollapsedHeight: Dp

The default height of a LargeTopAppBar when collapsed by a TopAppBarScrollBehavior.

LargeAppBarExpandedHeight

Cmn

Added in 1.3.0

val LargeAppBarExpandedHeight: Dp

The default expanded height of a LargeTopAppBar.

LargeFlexibleAppBarWithSubtitleExpandedHeight

Cmn

val LargeFlexibleAppBarWithSubtitleExpandedHeight: Dp

The default expanded height of a LargeFlexibleTopAppBar with subtitle.

LargeFlexibleAppBarWithoutSubtitleExpandedHeight

Cmn

val LargeFlexibleAppBarWithoutSubtitleExpandedHeight: Dp

The default expanded height of a LargeFlexibleTopAppBar without subtitle.

MediumAppBarCollapsedHeight

Cmn

Added in 1.3.0

val MediumAppBarCollapsedHeight: Dp

The default height of a MediumTopAppBar when collapsed by a TopAppBarScrollBehavior.

MediumAppBarExpandedHeight

Cmn

Added in 1.3.0

val MediumAppBarExpandedHeight: Dp

The default expanded height of a MediumTopAppBar.

MediumFlexibleAppBarWithSubtitleExpandedHeight

Cmn

val MediumFlexibleAppBarWithSubtitleExpandedHeight: Dp

The default expanded height of a MediumFlexibleTopAppBar with subtitle.

MediumFlexibleAppBarWithoutSubtitleExpandedHeight

Cmn

val MediumFlexibleAppBarWithoutSubtitleExpandedHeight: Dp

The default expanded height of a MediumFlexibleTopAppBar without subtitle.

TopAppBarExpandedHeight

Cmn

Added in 1.3.0

val TopAppBarExpandedHeight: Dp

The default expanded height of a TopAppBar and the CenterAlignedTopAppBar.

snapAnimationSpec

Cmn

val snapAnimationSpec: AnimationSpec<Float>

Default AnimationSpec that defines how the top app bar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position.

windowInsets

Cmn

Added in 1.0.0

val windowInsets: WindowInsets

Default insets to be used and consumed by the top app bars