TopAppBarDefaults

Artifact: androidx.compose.material3:material3

Added in 1.0.0

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`	`@ExperimentalMaterial3Api @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>? )` Returns a `TopAppBarScrollBehavior`.	Cmn
`TopAppBarScrollBehavior`	`@ExperimentalMaterial3Api @Composable enterAlwaysScrollBehavior( state: TopAppBarState, canScroll: () -> Boolean, snapAnimationSpec: AnimationSpec<Float>?, flingAnimationSpec: DecayAnimationSpec<Float>?, isAtTop: () -> Boolean )` Returns a `TopAppBarScrollBehavior`.	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 lazyListState or scrollState parameters.	Cmn
`TopAppBarScrollBehavior`	`@ExperimentalMaterial3Api @Composable enterAlwaysScrollBehavior( scrollState: ScrollState, reverseScrolling: Boolean, state: TopAppBarState, canScroll: () -> Boolean, snapAnimationSpec: AnimationSpec<Float>?, flingAnimationSpec: DecayAnimationSpec<Float>? )` Returns a `TopAppBarScrollBehavior`.	Cmn
`TopAppBarScrollBehavior`	`@ExperimentalMaterial3Api @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`	`@ExperimentalMaterial3Api @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 )` Returns a pinned `TopAppBarScrollBehavior` that tracks nested-scroll callbacks and updates its `TopAppBarState.contentOffset` accordingly.	Cmn
`TopAppBarScrollBehavior`	`@ExperimentalMaterial3Api @Composable pinnedScrollBehavior( state: TopAppBarState, canScroll: () -> Boolean, isAtTop: () -> Boolean )` Returns a pinned `TopAppBarScrollBehavior` that tracks nested-scroll callbacks and updates its `TopAppBarState.contentOffset` accordingly.	Cmn
`TopAppBarScrollBehavior`	`@ExperimentalMaterial3Api @Composable pinnedScrollBehavior( scrollState: ScrollState, reverseScrolling: Boolean, state: TopAppBarState, canScroll: () -> Boolean )` Returns a pinned `TopAppBarScrollBehavior` that tracks nested-scroll callbacks and updates its `TopAppBarState.contentOffset` accordingly.	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
`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

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-alpha15

Deprecated in 1.5.0-alpha15

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

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

@ExperimentalMaterial3Api
@Composable
fun enterAlwaysScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = MotionSchemeKeyTokens.DefaultEffects.value(),
    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 with LazyListState or involves reverseScrolling with ScrollState, consider using other overloads that are specifically designed for these use cases.

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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha15

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

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 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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it

enterAlwaysScrollBehavior

Cmn

Added in 1.5.0-alpha15

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

This overload is intended for use cases that are not covered by the standard overloads, such as when a custom isAtTop 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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it
`isAtTop: () -> Boolean = { true }`	state that indicates whether the content is scrolled to the top

enterAlwaysScrollBehavior

Cmn

Added in 1.4.0

Deprecated in 1.5.0-alpha15

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

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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it
`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-alpha15

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

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.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val scrollBehavior =
    // Pass these parameters to ensure the top app bar color updates correctly when content has
    // reverse scrolling.
    TopAppBarDefaults.enterAlwaysScrollBehavior(
        scrollState = scrollState,
        reverseScrolling = true,
    )
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 { 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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it

exitUntilCollapsedScrollBehavior

Cmn

Added in 1.0.0

@ExperimentalMaterial3Api
@Composable
fun exitUntilCollapsedScrollBehavior(
    state: TopAppBarState = rememberTopAppBarState(),
    canScroll: () -> Boolean = { true },
    snapAnimationSpec: AnimationSpec<Float>? = MotionSchemeKeyTokens.DefaultEffects.value(),
    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.

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>? = MotionSchemeKeyTokens.DefaultEffects.value()`	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
`flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()`	an optional `DecayAnimationSpec` that defined how to fling the top app bar when the user flings the app bar itself, or the content below it

largeTopAppBarColors

Cmn

Added in 1.2.0

Deprecated in 1.4.0

@Composable
fun largeTopAppBarColors(): TopAppBarColors

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-alpha15

Deprecated in 1.5.0-alpha15

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

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

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-alpha15

Deprecated in 1.5.0-alpha15

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

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

@ExperimentalMaterial3Api
@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 with LazyListState or involves reverseScrolling with ScrollState, consider using other overloads that are specifically designed for these use cases.

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-alpha15

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

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

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.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(lazyListState = 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 { Text("Menu") } },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyColumn(
            state = lazyListState,
            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),
                )
            }
        }
    },
)

Parameters
`lazyListState: LazyListState`	the `LazyListState` object observing the list's scroll position, used to determine if the list is scrolled to the 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`

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha15

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

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

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.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

val lazyGridState = rememberLazyGridState()
// In a reversed grid, we need to provide a custom `isAtTop` to the scroll behavior
// to ensure the top app bar's color changes correctly.
val isAtTop =
    remember(lazyGridState) {
        derivedStateOf {
            if (lazyGridState.layoutInfo.reverseLayout) {
                !lazyGridState.canScrollForward
            } else {
                !lazyGridState.canScrollBackward
            }
        }
    }
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(isAtTop = { isAtTop.value })
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 { 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,
            contentPadding = 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`
`isAtTop: () -> Boolean = { true }`	state that indicates whether the content is scrolled to the top

pinnedScrollBehavior

Cmn

Added in 1.5.0-alpha15

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

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

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-alpha15

@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-alpha15

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.

windowInsets

Cmn

Added in 1.0.0

val windowInsets: WindowInsets

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