Mostrar uma barra de apps na parte de cima

Crie uma barra de apps superior para ajudar os usuários a navegar e acessar funções no app, usando o elemento combinável TopAppBar.

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

Criar um elemento combinável para a barra de apps superior

Crie uma barra de apps de cima usando o elemento combinável MediumTopAppBar, que é recolhido quando o usuário rola para baixo na área de conteúdo e é expandido quando o usuário rola de volta para o topo do conteúdo:

Pontos principais sobre o código

  • Uma Scaffold externa com um TopBar definido.
  • Um título que consiste em um único elemento Text.
  • Uma barra superior com uma única ação definida.
  • Uma ação IconButton com uma lambda onClick para realizar a ação.
  • Um IconButton que contém um Icon com uma imagem de ícone e um texto de descrição do conteúdo.
  • O comportamento de rolagem do conteúdo interno do Scaffold é definido como enterAlwaysScrollBehavior(). Isso reduz a barra de apps quando o usuário puxa o conteúdo interno e a expande quando o usuário puxa para baixo o conteúdo interno.
  • Além de MediumTopBar, que contém o título, você também pode usar:
    • TopAppBar: use para telas que não exigem muita navegação ou ações.
    • CenterAlignedTopAppBar: use para telas com uma única ação principal.O título fica centralizado no componente.
    • MediumTopAppBar: use para telas que exigem uma quantidade moderada de navegação e ações.
    • LargeTopAppBar: use para telas que exigem muita navegação e ações. Usa mais preenchimento do que MediumTopAppBar e coloca o título abaixo de outros ícones.

Resultados

Figura 1. Uma barra de apps superior média.

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:

Descubra como usar uma plataforma padronizada para criar interfaces do usuário complexas. O esqueleto reúne diferentes partes da interface, dando aos apps uma aparência coerente.
Coletânea de guias rápidos
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