MediumFlexibleTopAppBar

Common/AllAndroid/JVM

Functions summary

Unit

@ExperimentalMaterial3ExpressiveApi @Composable MediumFlexibleTopAppBar(     title: @Composable () -> Unit,     modifier: Modifier,     subtitle: (@Composable () -> Unit)?,     navigationIcon: @Composable () -> Unit,     actions: @Composable RowScope.() -> Unit,     titleHorizontalAlignment: Alignment.Horizontal,     collapsedHeight: Dp,     expandedHeight: Dp,     windowInsets: WindowInsets,     colors: TopAppBarColors,     scrollBehavior: TopAppBarScrollBehavior? ) Material Design medium flexible top app bar

Cmn

Functions

MediumFlexibleTopAppBar

Cmn

Artifact: androidx.compose.material3:material3

View Source

@ExperimentalMaterial3ExpressiveApi
@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
): Unit

Material Design medium flexible top app bar

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

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:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumFlexibleTopAppBar
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.Alignment
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 = {
        MediumFlexibleTopAppBar(
            title = {
                Text("Medium TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis)
            },
            subtitle = { Text("Subtitle", maxLines = 1, overflow = TextOverflow.Ellipsis) },
            titleHorizontalAlignment = Alignment.CenterHorizontally,
            navigationIcon = {
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = { PlainTooltip { Text("Menu") } },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            actions = {
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = { PlainTooltip { Text("Add to favorites") } },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Add to favorites",
                        )
                    }
                }
            },
            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
title: @Composable () -> Unit	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: Modifier = Modifier	the Modifier to be applied to this top app bar
subtitle: (@Composable () -> Unit)? = null	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: @Composable () -> Unit = {}	the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.
actions: @Composable RowScope.() -> Unit = {}	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: Alignment.Horizontal = Alignment.Start	the horizontal alignment of the title and subtitle
collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight	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: Dp = if (subtitle != null) { TopAppBarDefaults.MediumFlexibleAppBarWithSubtitleExpandedHeight } else { TopAppBarDefaults.MediumFlexibleAppBarWithoutSubtitleExpandedHeight }	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: WindowInsets = TopAppBarDefaults.windowInsets	a window insets that app bar will respect.
colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors()	TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.topAppBarColors.
scrollBehavior: TopAppBarScrollBehavior? = null	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
IllegalArgumentException	if the provided expandedHeight is smaller than the collapsedHeight