{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

AppBarKt

public final class AppBarKt


Summary

Public methods

static final void
@Composable
BottomAppBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom app bar.

static final void
@Composable
BottomAppBar(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> floatingActionButton,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets
)

Material Design bottom app bar.

static final void
@ExperimentalMaterial3Api
@Composable
BottomAppBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    BottomAppBarScrollBehavior scrollBehavior,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom app bar.

static final void
@ExperimentalMaterial3Api
@Composable
BottomAppBar(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> floatingActionButton,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    BottomAppBarScrollBehavior scrollBehavior
)

Material Design bottom app bar.

static final @NonNull BottomAppBarState
@ExperimentalMaterial3Api
BottomAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a BottomAppBarState.

static final void
@ExperimentalMaterial3Api
@Composable
CenterAlignedTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design center-aligned small top app bar.

static final void
@ExperimentalMaterial3Api
@Composable
LargeTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design large top app bar.

static final void
@ExperimentalMaterial3Api
@Composable
MediumTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design medium top app bar.

static final void
@ExperimentalMaterial3Api
@Composable
SmallTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

This method is deprecated. Use TopAppBar instead.

static final void
@ExperimentalMaterial3Api
@Composable
TopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design small top app bar.

static final @NonNull BottomAppBarState
@ExperimentalMaterial3Api
@Composable
rememberBottomAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a BottomAppBarState that is remembered across compositions.

static final @NonNull TopAppBarState
@ExperimentalMaterial3Api
@Composable
rememberTopAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a TopAppBarState that is remembered across compositions.

Public methods

BottomAppBar

@Composable
public static final void BottomAppBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom app bar.

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

Bottom app bar image

If you are interested in displaying a FloatingActionButton, consider using another overload.

Also see NavigationBar.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this BottomAppBar

@NonNull Color containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.

@NonNull Color contentColor

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@NonNull Dp tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull PaddingValues contentPadding

the padding applied to the content of this BottomAppBar

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content

the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomAppBar

@Composable
public static final void BottomAppBar(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> floatingActionButton,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets
)

Material Design bottom app bar.

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

Bottom app bar image

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

BottomAppBar(
    actions = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu, contentDescription = "Localized description")
        }
    }
)

It can optionally display a FloatingActionButton embedded at the end of the BottomAppBar.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

BottomAppBar(
    actions = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Check, contentDescription = "Localized description")
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(
                Icons.Filled.Edit,
                contentDescription = "Localized description",
            )
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = { /* do something */ },
            containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
        ) {
            Icon(Icons.Filled.Add, "Localized description")
        }
    }
)

Also see NavigationBar.

Parameters
@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

@NonNull Modifier modifier

the Modifier to be applied to this BottomAppBar

@Composable Function0<Unit> floatingActionButton

optional floating action button at the end of this BottomAppBar

@NonNull Color containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.

@NonNull Color contentColor

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@NonNull Dp tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull PaddingValues contentPadding

the padding applied to the content of this BottomAppBar

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

BottomAppBar

@ExperimentalMaterial3Api
@Composable
public static final void BottomAppBar(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    BottomAppBarScrollBehavior scrollBehavior,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design bottom app bar.

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

Bottom app bar image

If you are interested in displaying a FloatingActionButton, consider using another overload.

Also see NavigationBar.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this BottomAppBar

@NonNull Color containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.

@NonNull Color contentColor

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@NonNull Dp tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull PaddingValues contentPadding

the padding applied to the content of this BottomAppBar

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

BottomAppBarScrollBehavior scrollBehavior

a BottomAppBarScrollBehavior which holds various offset values that will be applied by this bottom app bar to set up its height. A scroll behavior is designed to work in conjunction with a scrolled content to change the bottom app bar appearance as the content scrolls. See BottomAppBarScrollBehavior.nestedScrollConnection.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content

the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomAppBar

@ExperimentalMaterial3Api
@Composable
public static final void BottomAppBar(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> floatingActionButton,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull Dp tonalElevation,
    @NonNull PaddingValues contentPadding,
    @NonNull WindowInsets windowInsets,
    BottomAppBarScrollBehavior scrollBehavior
)

Material Design bottom app bar.

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

Bottom app bar image

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

BottomAppBar(
    actions = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu, contentDescription = "Localized description")
        }
    }
)

It can optionally display a FloatingActionButton embedded at the end of the BottomAppBar.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

BottomAppBar(
    actions = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Check, contentDescription = "Localized description")
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(
                Icons.Filled.Edit,
                contentDescription = "Localized description",
            )
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = { /* do something */ },
            containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
        ) {
            Icon(Icons.Filled.Add, "Localized description")
        }
    }
)

A bottom app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
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.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        BottomAppBar(
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Check, contentDescription = "Localized description")
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Edit, contentDescription = "Localized description")
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.offset(y = 4.dp),
            onClick = { /* do something */ },
            containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
        ) {
            Icon(Icons.Filled.Add, "Localized description")
        }
    },
    floatingActionButtonPosition = FabPosition.EndOverlay,
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)

Also see NavigationBar.

Parameters
@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

@NonNull Modifier modifier

the Modifier to be applied to this BottomAppBar

@Composable Function0<Unit> floatingActionButton

optional floating action button at the end of this BottomAppBar

@NonNull Color containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.

@NonNull Color contentColor

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@NonNull Dp tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull PaddingValues contentPadding

the padding applied to the content of this BottomAppBar

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

BottomAppBarScrollBehavior scrollBehavior

a BottomAppBarScrollBehavior which holds various offset values that will be applied by this bottom app bar to set up its height. A scroll behavior is designed to work in conjunction with a scrolled content to change the bottom app bar appearance as the content scrolls. See BottomAppBarScrollBehavior.nestedScrollConnection.

BottomAppBarState

@ExperimentalMaterial3Api
public static final @NonNull BottomAppBarState BottomAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a BottomAppBarState.

Parameters
float initialHeightOffsetLimit

the initial value for BottomAppBarState.heightOffsetLimit, which represents the pixel limit that a bottom app bar is allowed to collapse when the scrollable content is scrolled

float initialHeightOffset

the initial value for BottomAppBarState.heightOffset. The initial offset height offset should be between zero and initialHeightOffsetLimit.

float initialContentOffset

the initial value for BottomAppBarState.contentOffset

CenterAlignedTopAppBar

@ExperimentalMaterial3Api
@Composable
public static final void CenterAlignedTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design center-aligned small top app bar.

Top app bars display information and actions at the top of a screen.

This small top app bar has a header title that is horizontally aligned to the center.

Center-aligned top app bar image

This CenterAlignedTopAppBar has slots for a title, navigation icon, and actions.

A center aligned top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
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.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

Scaffold(
    topBar = {
        CenterAlignedTopAppBar(
            title = {
                Text(
                    "Centered TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            }
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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
@Composable @NonNull Function0<Unit> title

the title to be displayed in the top app bar

@NonNull Modifier modifier

the Modifier to be applied to this top app bar

@Composable @NonNull Function0<Unit> navigationIcon

the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@NonNull TopAppBarColors colors

TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.centerAlignedTopAppBarColors.

TopAppBarScrollBehavior scrollBehavior

a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

LargeTopAppBar

@ExperimentalMaterial3Api
@Composable
public static final void LargeTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design large top app bar.

Top app bars display information and actions at the top of a screen.

Large top app bar image

This LargeTopAppBar has slots for a title, navigation icon, and actions. In its default expanded state, the title is displayed in a second row under the navigation and actions.

A large top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
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.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        LargeTopAppBar(
            title = {
                Text(
                    "Large TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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
@Composable @NonNull Function0<Unit> title

the title to be displayed in the top app bar. This title will be used in the app bar's expanded and collapsed states, although in its collapsed state it will be composed with a smaller sized TextStyle

@NonNull Modifier modifier

the Modifier to be applied to this top app bar

@Composable @NonNull Function0<Unit> navigationIcon

the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@NonNull TopAppBarColors colors

TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.largeTopAppBarColors.

TopAppBarScrollBehavior scrollBehavior

a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

MediumTopAppBar

@ExperimentalMaterial3Api
@Composable
public static final void MediumTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design medium top app bar.

Top app bars display information and actions at the top of a screen.

Medium top app bar image

This MediumTopAppBar has slots for a title, navigation icon, and actions. In its default expanded state, the title is displayed in a second row under the navigation and actions.

A medium top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        MediumTopAppBar(
            title = {
                Text(
                    "Medium TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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
@Composable @NonNull Function0<Unit> title

the title to be displayed in the top app bar. This title will be used in the app bar's expanded and collapsed states, although in its collapsed state it will be composed with a smaller sized TextStyle

@NonNull Modifier modifier

the Modifier to be applied to this top app bar

@Composable @NonNull Function0<Unit> navigationIcon

the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@NonNull TopAppBarColors colors

TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.mediumTopAppBarColors.

TopAppBarScrollBehavior scrollBehavior

a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

SmallTopAppBar

@ExperimentalMaterial3Api
@Composable
public static final void SmallTopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design small top app bar.

Top app bars display information and actions at the top of a screen.

This SmallTopAppBar has slots for a title, navigation icon, and actions.

Small top app bar image

A simple top app bar looks like:

import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "Simple TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            }
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)

A top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                // RowScope here, so these icons will be placed horizontally
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)
import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)

use TopAppBar instead

Parameters
@Composable @NonNull Function0<Unit> title

the title to be displayed in the top app bar

@NonNull Modifier modifier

the Modifier to be applied to this top app bar

@Composable @NonNull Function0<Unit> navigationIcon

the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@NonNull TopAppBarColors colors

TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.topAppBarColors.

TopAppBarScrollBehavior scrollBehavior

a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

TopAppBar

@ExperimentalMaterial3Api
@Composable
public static final void TopAppBar(
    @Composable @NonNull Function0<Unit> title,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> navigationIcon,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions,
    @NonNull WindowInsets windowInsets,
    @NonNull TopAppBarColors colors,
    TopAppBarScrollBehavior scrollBehavior
)

Material Design small top app bar.

Top app bars display information and actions at the top of a screen.

This small TopAppBar has slots for a title, navigation icon, and actions.

Small top app bar image

A simple top app bar looks like:

import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "Simple TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            }
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)

A top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                // RowScope here, so these icons will be placed horizontally
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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)
                )
            }
        }
    }
)
import androidx.compose.foundation.layout.Arrangement
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.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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
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 scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    "TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { innerPadding ->
        LazyColumn(
            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
@Composable @NonNull Function0<Unit> title

the title to be displayed in the top app bar

@NonNull Modifier modifier

the Modifier to be applied to this top app bar

@Composable @NonNull Function0<Unit> navigationIcon

the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> actions

the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.

@NonNull WindowInsets windowInsets

a window insets that app bar will respect.

@NonNull TopAppBarColors colors

TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.topAppBarColors.

TopAppBarScrollBehavior scrollBehavior

a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

rememberBottomAppBarState

@ExperimentalMaterial3Api
@Composable
public static final @NonNull BottomAppBarState rememberBottomAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a BottomAppBarState that is remembered across compositions.

Parameters
float initialHeightOffsetLimit

the initial value for BottomAppBarState.heightOffsetLimit, which represents the pixel limit that a bottom app bar is allowed to collapse when the scrollable content is scrolled

float initialHeightOffset

the initial value for BottomAppBarState.heightOffset. The initial offset height offset should be between zero and initialHeightOffsetLimit.

float initialContentOffset

the initial value for BottomAppBarState.contentOffset

rememberTopAppBarState

@ExperimentalMaterial3Api
@Composable
public static final @NonNull TopAppBarState rememberTopAppBarState(
    float initialHeightOffsetLimit,
    float initialHeightOffset,
    float initialContentOffset
)

Creates a TopAppBarState that is remembered across compositions.

Parameters
float initialHeightOffsetLimit

the initial value for TopAppBarState.heightOffsetLimit, which represents the pixel limit that a top app bar is allowed to collapse when the scrollable content is scrolled

float initialHeightOffset

the initial value for TopAppBarState.heightOffset. The initial offset height offset should be between zero and initialHeightOffsetLimit.

float initialContentOffset

the initial value for TopAppBarState.contentOffset