TwoRowsTopAppBar

Component in Material 3 Compose

A basic two-rows Material Design top app bar.

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

Last updated: 2025-02-05 12:19

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha07")
}

Overloads

@OptIn(ExperimentalMaterial3Api::class)
@ExperimentalMaterial3ExpressiveApi
@Composable
fun TwoRowsTopAppBar(
    title: @Composable (expanded: Boolean) -> Unit,
    modifier: Modifier = Modifier,
    subtitle: (@Composable (expanded: Boolean) -> Unit?) = { null },
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
    height: (expanded: Boolean) -> Dp = { Dp.Unspecified },
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)

Parameters

name	description
title	a labmda for providing a title to be displayed in the top app bar in collapsed and expanded states. By default a small-app-bar [TextStyle] is applied to the Composition, and you may override it by wrapping your provided component with a composition local. Note that unlike the large or medium top app bars, the TwoRowsTopAppBar does not append bottom padding to the expanded title Composable by default. Padding should be applied directly to the provided expanded title, or to the [subtitle] that appears below it.
modifier	the [Modifier] to be applied to this top app bar
subtitle	a labmda for providing an optional subtitle to be displayed in the top app bar in collapsed and expanded 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 [IconButton]s. The default layout here is a [Row], so icons inside will be placed horizontally.
titleHorizontalAlignment	the horizontal alignment of the title and subtitle
height	a lambda that provides the app bar's height in collapsed or expanded states. When a [scrollBehavior] causes the app bar to collapse or expand, the expanded height represents the total height the app-bar will expand to. In case the provided height values are [Dp.Unspecified] or [Dp.Infinity], the height will fallback to the [MediumFlexibleTopAppBar] defaults. Note that the height values may be adjusted to support displaying larger fonts and that the expanded height is expected to be greater or equal to the collapsed height, and the function will throw an [IllegalArgumentException] otherwise.
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].

Code Example

CustomTwoRowsTopAppBar

/**
 * A sample for a [TwoRowsTopAppBar] that collapses when the content is scrolled up, and appears
 * when the content is completely scrolled back down.
 */
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun CustomTwoRowsTopAppBar() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TwoRowsTopAppBar(
                title = { expanded ->
                    if (expanded) {
                        Text("Expanded TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis)
                    } else {
                        Text("Collapsed TopAppBar", maxLines = 1, overflow = TextOverflow.Ellipsis)
                    }
                },
                subtitle = { expanded ->
                    if (expanded) {
                        Text(
                            "Expanded Subtitle",
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis,
                            modifier = Modifier.padding(bottom = 24.dp)
                        )
                    } else {
                        Text("Collapsed Subtitle", maxLines = 1, overflow = TextOverflow.Ellipsis)
                    }
                },
                height = { expanded ->
                    if (expanded) {
                        156.dp
                    } else {
                        64.dp
                    }
                },
                navigationIcon = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            Column(
                Modifier.fillMaxWidth().padding(innerPadding).verticalScroll(rememberScrollState())
            ) {
                CompositionLocalProvider(
                    LocalTextStyle provides MaterialTheme.typography.bodyLarge
                ) {
                    Text(text = remember { LoremIpsum().values.first() })
                }
            }
        }
    )
}