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
• Barra de apps na parte de cima alinhada ao centro
• Barra de apps na parte de cima, tamanho médio
• Barra de apps grande na parte de cima

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

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

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

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

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

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:

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