Compose Multiplatform Material3/androidx.compose.material3/MediumFlexibleTopAppBar

MediumFlexibleTopAppBar

@Composable
fun MediumFlexibleTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, subtitle: @Composable () -> Unit? = null, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start, collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight, expandedHeight: Dp = if (subtitle != null) { TopAppBarDefaults.MediumFlexibleAppBarWithSubtitleExpandedHeight } else { TopAppBarDefaults.MediumFlexibleAppBarWithoutSubtitleExpandedHeight }, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design medium flexible top app bar

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

Medium top app bar image

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

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

Parameters

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

modifier

the Modifier to be applied to this top app bar

subtitle

optional subtitle to be displayed in the top app bar. This subtitle will be used in the app bar's expanded and collapsed states

navigationIcon

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

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.

titleHorizontalAlignment

the horizontal alignment of the title and subtitle

collapsedHeight

this app bar height when collapsed by a provided scrollBehavior. This value must be specified and finite, otherwise it will be ignored and replaced with TopAppBarDefaults.MediumAppBarCollapsedHeight.

expandedHeight

this app bar's maximum height. When a specified scrollBehavior causes the app bar to collapse or expand, this value will represent the maximum height that the app-bar will be allowed to expand. The expanded height is expected to be greater or equal to the collapsedHeight, and the function will throw an IllegalArgumentException otherwise. Also, this value must be specified and finite, otherwise it will be ignored and replaced with TopAppBarDefaults.MediumFlexibleAppBarWithSubtitleExpandedHeight or TopAppBarDefaults.MediumFlexibleAppBarWithoutSubtitleExpandedHeight.

windowInsets

a window insets that app bar will respect.

colors

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

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.

Throws

if the provided expandedHeight is smaller than the collapsedHeight

Samples

androidx.compose.material3.samples.ExitUntilCollapsedCenterAlignedMediumFlexibleTopAppBar