/
Android Studio Sign in

LargeTopAppBar

Functions summary

Unit
@Composable
LargeTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable () -> Unit,
    actions: @Composable RowScope.() -> Unit,
    collapsedHeight: Dp,
    expandedHeight: Dp,
    windowInsets: WindowInsets,
    colors: TopAppBarColors,
    scrollBehavior: TopAppBarScrollBehavior?
)

Material Design large top app bar
Cmn

Functions

LargeTopAppBar

Cmn 
@Composable
fun LargeTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    collapsedHeight: Dp = TopAppBarDefaults.LargeAppBarCollapsedHeight,
    expandedHeight: Dp = TopAppBarDefaults.LargeAppBarExpandedHeight,
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
): Unit

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.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.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
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.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
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 = {
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = {
                        PlainTooltip(
                            modifier =
                                Modifier.semantics {
                                    // TODO(b/496338253): Remove this modifier once bug where
                                    //   tooltip text is not announced by a11y screen readers
                                    //   is resolved.
                                    liveRegion = LiveRegionMode.Assertive
                                    paneTitle = "Menu"
                                }
                        ) {
                            Text("Menu")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                    }
                }
            },
            actions = {
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = {
                        PlainTooltip(
                            modifier =
                                Modifier.semantics {
                                    // TODO(b/496338253): Remove this modifier once bug where
                                    //   tooltip text is not announced by a11y screen readers
                                    //   is resolved.
                                    liveRegion = LiveRegionMode.Assertive
                                    paneTitle = "Add to favorites"
                                }
                        ) {
                            Text("Add to favorites")
                        }
                    },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Add to favorites",
                        )
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    content = { innerPadding ->
        LazyColumn(
            modifier = Modifier.padding(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
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.
collapsedHeight: Dp = TopAppBarDefaults.LargeAppBarCollapsedHeight

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.LargeAppBarCollapsedHeight.
expandedHeight: Dp = TopAppBarDefaults.LargeAppBarExpandedHeight

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.LargeAppBarExpandedHeight.
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 to the collapsedHeight
Morty Proxy This is a proxified and sanitized view of the page, visit original site.