Barras de apps

Barras de apps são contêineres que fornecem ao usuário acesso aos principais recursos e itens de navegação. Há dois tipos de barras de apps: a de cima e a de baixo barras. Suas respectivas aparência e finalidade são as seguintes:

Tipo	Aparência	Objetivo
Barra de apps superior	Na parte superior da tela.	Dá acesso às principais tarefas e informações. Geralmente, hospeda um título, itens de ação principais e determinados itens de navegação.
Barra de apps inferior	Na parte inferior da tela.	Normalmente inclui os principais itens de navegação. Também pode fornecer acesso a outras ações importantes, como um botão de ação flutuante contido.

Para implementar uma barra de apps superior e inferior, use TopAppBar e BottomAppBar, respectivamente. Eles permitem criar modelos interfaces que englobam controles de navegação e ação e que são alinhadas aos princípios do Material Design.

Principais barras de apps

A tabela abaixo descreve os quatro tipos de barras de apps principais:

Tipo	Exemplo
Pequena: para telas que não exigem muita navegação ou ações.
Alinhado ao centro: para telas que têm uma única ação principal.
Média: para telas que exigem uma quantidade moderada de navegação e ações.
Grande: para telas que exigem muita navegação e ações.

Plataforma da API

Os vários elementos combináveis que permitem implementar os quatro principais apps diferentes das barras são bastante semelhantes. Eles compartilham vários parâmetros importantes:

• title: o texto que aparece na barra de apps.
• navigationIcon: o ícone principal da navegação. Aparece no à esquerda da barra de apps.
• actions: ícones que fornecem ao usuário acesso às principais ações. Eles parecem à direita da barra de apps.
• scrollBehavior: determina como a barra de apps superior responde à rolagem de o conteúdo interno da estrutura.
• colors: determina como a barra de apps aparece.

Comportamento de rolagem

É possível controlar como a barra de apps responde quando o usuário rola a tela o conteúdo interno de scaffold. Para isso, crie uma instância do TopAppBarScrollBehavior e passe-o para a barra de apps superior para o scrollBehavior.

Há três tipos de TopAppBarScrollBehavior. Eles são os seguintes:

• enterAlwaysScrollBehavior: quando o usuário puxa o interior do scaffold a barra de apps superior será fechada. A barra de apps se expande quando o usuário puxa o conteúdo interno para baixo.
• exitUntilCollapsedScrollBehavior: semelhante a enterAlwaysScrollBehavior. embora a barra do aplicativo também se expanda quando o usuário chega ao final do o conteúdo interno de scaffold.
• pinnedScrollBehavior: a barra de apps permanece no lugar e não reage ao rolagem.

Os exemplos a seguir implementam várias dessas opções.

Exemplos

As seções a seguir fornecem implementações para os quatro tipos diferentes de principais barras de apps, incluindo exemplos variados de como controlar o comportamento de rolagem.

Pequeno

Para criar uma barra de apps pequena na parte de cima, use o elemento combinável TopAppBar. Esta é a barra de apps superior mais simples possível e, neste exemplo, contém apenas um título.

O exemplo a seguir não transmite a TopAppBar um valor para scrollBehavior e, portanto, não reage à rolagem do bloco conteúdo.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira:

Alinhado ao centro

A barra de apps superior alinhada ao centro é essencialmente a mesma barra de apps pequena, embora o título esteja centralizado no componente. Para implementá-la, use o um elemento combinável CenterAlignedTopAppBar dedicado.

Este exemplo usa enterAlwaysScrollBehavior() para receber o valor transmitido para scrollBehavior. Dessa forma, a barra se recolhe quando o usuário rola o o conteúdo interno de scaffold.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira:

Médio

A barra superior média de apps coloca o título abaixo de todos os ícones adicionais. Para criar Primeiro, use o elemento combinável MediumTopAppBar.

Como o snippet anterior, este exemplo usa enterAlwaysScrollBehavior() para receber o valor transmitido para scrollBehavior.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira, com uma demonstração de como a rolagem comportamento de enterAlwaysScrollBehavior() é exibido:

Grande

Uma barra de apps superior grande é semelhante à mídia, embora o padding entre o e os ícones são maiores e ocupa mais espaço na tela em geral. Para criar um, use o elemento combinável LargeTopAppBar.

Ao contrário dos snippets anteriores, este exemplo usa exitUntilCollapsedScrollBehavior() para receber o valor a que ele é transmitido scrollBehavior. Dessa forma, a barra se recolhe quando o usuário rola o conteúdo interno de scaffold, mas que se expande quando o usuário rola até o fim o conteúdo interno.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira:

Barra de apps inferior

Para criar uma barra de apps inferior, use o elemento combinável BottomAppBar. Usar este é muito semelhante aos principais elementos combináveis da barra de apps descritos nos nas seções anteriores desta página. Você transmite elementos combináveis para a chave a seguir parâmetros:

• actions: uma série de ícones que aparecem no lado esquerdo da barra. Esses geralmente são ações-chave para a tela especificada ou itens de navegação.
• floatingActionButton: o botão de ação flutuante que aparece no lado direito da barra.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira:

Outros recursos

• Documentos do Material 3: barra de apps na parte de cima
• Documentos do Material 3: barra de apps inferior (link em inglês)
• Scaffold