Object

TopAppBarDefaults

Contains default values used for the top app bar implementations.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
object TopAppBarDefaults

Contains default values used for the top app bar implementations.

Properties

Common
val ContentPadding = PaddingValues(all = 0.dp)

Default padding used for TopAppBar content

Common
val windowInsets: WindowInsets

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

Common
val TopAppBarExpandedHeight: Dp

The default expanded height of a TopAppBar and the CenterAlignedTopAppBar.

Common
val MediumAppBarCollapsedHeight: Dp

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

Common
val MediumAppBarExpandedHeight: Dp

The default expanded height of a MediumTopAppBar.

Common
val MediumFlexibleAppBarWithoutSubtitleExpandedHeight: Dp

The default expanded height of a MediumFlexibleTopAppBar without subtitle.

Common
val MediumFlexibleAppBarWithSubtitleExpandedHeight: Dp

The default expanded height of a MediumFlexibleTopAppBar with subtitle.

Common
val LargeAppBarCollapsedHeight: Dp

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

Common
val LargeAppBarExpandedHeight: Dp

The default expanded height of a LargeTopAppBar.

Common
val LargeFlexibleAppBarWithoutSubtitleExpandedHeight: Dp

The default expanded height of a LargeFlexibleTopAppBar without subtitle.

Common
val LargeFlexibleAppBarWithSubtitleExpandedHeight: Dp

The default expanded height of a LargeFlexibleTopAppBar with subtitle.

Functions

@Composable fun topAppBarColors() = MaterialTheme.colorScheme.defaultTopAppBarColors

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

topAppBarColors

@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 the container color
scrolledContainerColor the container color when content is scrolled behind it
navigationIconContentColor the content color used for the navigation icon
titleContentColor the content color used for the title
actionIconContentColor the content color used for actions
subtitleContentColor the content color used for the subtitle

Returns
the resulting TopAppBarColors used for the top app bar

topAppBarColors

@Composable
    fun topAppBarColors(
        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 small TopAppBar. The default implementation animates between the provided colors according to the Material Design specification.

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

Returns
the resulting TopAppBarColors used for the top app bar

centerAlignedTopAppBarColors

@Composable
    fun centerAlignedTopAppBarColors() = MaterialTheme.colorScheme.defaultTopAppBarColors

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

centerAlignedTopAppBarColors

@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 the container color
scrolledContainerColor the container color when content is scrolled behind it
navigationIconContentColor the content color used for the navigation icon
titleContentColor the content color used for the title
actionIconContentColor the content color used for actions

Returns
the resulting TopAppBarColors used for the top app bar

mediumTopAppBarColors

@Composable
    fun mediumTopAppBarColors() = MaterialTheme.colorScheme.defaultTopAppBarColors

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

@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 the container color
scrolledContainerColor the container color when content is scrolled behind it
navigationIconContentColor the content color used for the navigation icon
titleContentColor the content color used for the title
actionIconContentColor the content color used for actions

Returns
the resulting TopAppBarColors used for the top app bar

largeTopAppBarColors

@Composable
    fun largeTopAppBarColors() = MaterialTheme.colorScheme.defaultTopAppBarColors

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

@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 the container color
scrolledContainerColor the container color when content is scrolled behind it
navigationIconContentColor the content color used for the navigation icon
titleContentColor the content color used for the title
actionIconContentColor the content color used for actions

Returns
the resulting TopAppBarColors used for the top app bar

pinnedScrollBehavior

@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 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 a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

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

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:

Parameters
lazyListState the LazyListState object observing the list's scroll position, used to determine if the list is scrolled to the start
state 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 a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

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

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 state of the scroll
reverseScrolling reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top
state 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 a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior

pinnedScrollBehavior

@Composable
    fun pinnedScrollBehavior(
        state: TopAppBarState = rememberTopAppBarState(),
        canScroll: () -> Boolean = { true },
        isScrollingContentAtStart: () -> 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 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:

Parameters
state 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 a callback used to determine whether scroll events are to be handled by this pinned TopAppBarScrollBehavior
isScrollingContentAtStart 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

@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 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 a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
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
flingAnimationSpec 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

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

The returned TopAppBarScrollBehavior is remembered across compositions.

Parameters
state 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 a callback used to determine whether scroll events are to be handled by this EnterAlwaysScrollBehavior
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
flingAnimationSpec 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 indicates that this behavior is applied to a scrollable content that has a reversed direction of scrolling and layout

enterAlwaysScrollBehavior

@Composable
    fun enterAlwaysScrollBehavior(
        lazyListState: LazyListState,
        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.

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 the LazyListState object observing the list's scroll position, used to determine if the list is scrolled to the start
state 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 a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
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
flingAnimationSpec 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

@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

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:

Parameters
scrollState state of the scroll
reverseScrolling reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top
state 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 a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
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
flingAnimationSpec 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

@Composable
    fun enterAlwaysScrollBehavior(
        state: TopAppBarState = rememberTopAppBarState(),
        canScroll: () -> Boolean = { true },
        snapAnimationSpec: AnimationSpec<Float>? = MotionSchemeKeyTokens.DefaultEffects.value(),
        flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay(),
        isScrollingContentAtStart: () -> Boolean = { true },
    ): 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 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 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 a callback used to determine whether scroll events are to be handled by this TopAppBarScrollBehavior
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
flingAnimationSpec 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
isScrollingContentAtStart 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.

exitUntilCollapsedScrollBehavior

@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 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 a callback used to determine whether scroll events are to be handled by this ExitUntilCollapsedScrollBehavior
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
flingAnimationSpec 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