Mostrar uma barra de apps

As barras de apps são contêineres na parte de cima ou de baixo da tela que dão aos usuários acesso aos principais recursos e itens de navegação:

Tipo

Aparência

Objetivo
Barra de apps na parte de cima

Na parte de cima da tela.

Permite acesso a tarefas e informações importantes. Normalmente, hospeda um título, itens de ação principais e alguns itens de navegação.
Barra de apps na parte de baixo

Na parte de baixo da tela.

Normalmente, inclui os itens de navegação principais. Pode dar acesso a outras ações, por exemplo, usando um botão de ação flutuante.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Implementar uma barra de apps na parte de cima

O código a seguir mostra implementações para os quatro tipos de barras de apps na parte de cima, incluindo vários exemplos de como controlar o comportamento de rolagem.

Barra de apps pequena na parte de cima

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

O exemplo a seguir não transmite um valor de TopAppBar para scrollBehavior. Portanto, a barra de apps na parte de cima não reage à rolagem do conteúdo interno.

Resultado

Exemplo de uma pequena barra de apps na parte de cima.
Figura 1. Uma pequena barra de apps na parte de cima.

Barra de apps superior centralizada

A barra de apps de cima centralizada é igual à barra de apps pequena, exceto pelo título centralizado no componente. Para implementar, use o elemento combinável dedicado CenterAlignedTopAppBar.

Este exemplo usa enterAlwaysScrollBehavior() para acessar o valor transmitido para scrollBehavior. A barra é recolhida quando o usuário rola o conteúdo interno do scaffold.

Resultado

Escreva o texto alternativo aqui
Figura 2. Uma barra de apps superior centralizada.

Barra de apps superior média

A barra de apps de cima média coloca o título abaixo de outros ícones. Para criar um, use o elemento combinável MediumTopAppBar.

Como no código anterior, este exemplo usa enterAlwaysScrollBehavior() para receber o valor transmitido para scrollBehavior.

Resultado

Figura 3. Uma barra de apps superior média demonstrando o comportamento de rolagem de enterAlwaysScrollBehavior.

Barra de apps grande na parte de cima

Uma barra de apps grande na parte de cima é semelhante à média, embora o padding entre o título e os ícones seja maior e ela ocupe mais espaço na tela. Para criar um, use o elemento combinável LargeTopAppBar.

Este exemplo usa exitUntilCollapsedScrollBehavior() para acessar o valor transmitido para scrollBehavior. A barra é recolhida quando o usuário rola o conteúdo interno do esqueleto, mas se expande quando o usuário rola até o final do conteúdo interno.

Resultado

Uma tela em um app com uma barra de apps na parte de baixo que contém ícones de ação no lado esquerdo e um botão de ação flutuante à direita.
Figura 4. Exemplo de implementação de uma barra de apps grande na parte de cima.

Implementar uma barra de apps na parte de baixo

Para criar uma barra de apps na parte de baixo, use o elemento combinável BottomAppBar, que é semelhante ao elemento combinável da barra de apps na parte de cima.

Você transmite elementos combináveis para os seguintes parâmetros chave:

  • actions: uma série de ícones que aparecem no lado esquerdo da barra. Elas geralmente são ações principais da tela em questão ou itens de navegação.
  • floatingActionButton: o botão de ação flutuante que aparece no lado direito da barra.

Resultado

Uma tela em um app com uma barra de apps na parte de baixo que contém ícones de ação no lado esquerdo e um botão de ação flutuante à direita.
Figura 5. Exemplo de implementação de uma barra de apps inferior.

Pontos principais

  • Geralmente, você transmite as barras de apps para o elemento combinável Scaffold, que tem parâmetros específicos para recebê-las.

  • Os elementos combináveis usados para implementar as barras de apps superiores compartilham os seguintes parâmetros principais:

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

  • É possível controlar como a barra de apps responde quando o usuário rola o conteúdo interno do esqueleto. Para fazer isso, crie uma instância de TopAppBarScrollBehavior e transmita-a para a barra de apps superior para o parâmetro scrollBehavior. Há três tipos de TopAppBarScrollBehavior:

    • enterAlwaysScrollBehavior: quando o usuário puxa o conteúdo interno do scaffold, a barra de apps de cima é recolhida. A barra de apps se expande quando o usuário puxa o conteúdo interno para baixo.
    • exitUntilCollapsedScrollBehavior: semelhante a enterAlwaysScrollBehavior, mas a barra de apps também se expande quando o usuário chega ao final do conteúdo interno do scaffold.
    • pinnedScrollBehavior: a barra de apps permanece no lugar e não reage à rolagem.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback