Material Design para Android

Teste o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a trabalhar com temas no Compose.

O Material Design é um guia abrangente para design visual, de movimento e de interação entre plataformas e dispositivos. Para usar o Material Design nos seus apps Android, siga as diretrizes definidas nas especificações do Material Design (link em inglês). Se o app usa o Jetpack Compose, é possível usar a biblioteca Compose Material 3. Se o app usa visualizações, você pode usar a biblioteca Android Material Components.

O Android oferece os seguintes recursos para ajudar você a criar apps do Material Design:

  • Um tema de app do Material Design para definir o estilo de todos os widgets de IU.
  • Widgets para visualizações complexas, como listas e cards.
  • APIs para sombras e animações personalizadas

Tema e widgets do Material Design

Para aproveitar os recursos do Material Design, como o estilo para widgets de IU padrão, e simplificar a definição de estilo do seu app, aplique um tema baseado no Material Design.

Figura 1. Tema escuro do Material Design.
Figura 2. Tema claro do Material Design.

Se você usar o Android Studio para criar seu projeto Android, um tema do Material Design será aplicado por padrão. Para saber como atualizar o tema do projeto, consulte Estilos e temas.

Para oferecer aos usuários uma experiência familiar, use os padrões de UX mais comuns do Material Design:

  • Promova a principal ação da interface com um botão de ação flutuante (FAB, na sigla em inglês).
  • Mostre sua marca, navegação, pesquisa e outras ações usando a barra de apps.
  • Mostre e oculte a navegação do seu app com a gaveta de navegação.
  • Escolha entre muitos outros componentes do Material Design para o layout e a navegação do seu app, como barras de ferramentas recolhíveis, guias, uma barra de navegação inferior e muito mais. Para conferir todos eles, consulte o catálogo do Material Design para Android (link em inglês).

Sempre que possível, use ícones predefinidos do Material Design. Por exemplo, para o botão "menu" da gaveta de navegação, use o ícone padrão de "hambúrguer". Consulte Ícones do Material Design (link em inglês) para conferir uma lista dos ícones disponíveis. Você também pode importar ícones SVG da biblioteca de ícones do Material Design com o Vector Asset Studio do Android Studio.

Sombras e cartões de elevação

Além das propriedades X e Y, as visualizações no Android têm uma propriedade Z. Essa propriedade representa a elevação de uma visualização, que determina o seguinte:

  • o tamanho da sombra: visualizações com valores de Z mais altos lançam sombras maiores.
  • A ordem do desenho: visualizações com valores Z mais altos aparecem acima de outras visualizações.
Figura 3. O valor Z que representa a elevação.

Você pode aplicar elevação a um layout baseado em cards, o que ajuda a mostrar partes importantes de informações dentro de cards que dão uma aparência do Material Design. Você pode usar o widget CardView para criar cartões com uma elevação padrão. Para saber mais, consulte Criar um layout baseado em cards.

Para saber mais sobre como adicionar elevação a outras visualizações, consulte Criar sombras e recortar visualizações.

Animações

Figura 4. Uma animação de feedback por toque.

As APIs de animação permitem criar animações personalizadas para feedback de toque em controles de IU, mudanças no estado da visualização e transições de atividade.

Essas APIs permitem:

  • responder a eventos de toque nas suas visualizações com animações de feedback de toque;
  • ocultar e mostrar visualizações com animações de revelação circular.
  • alternar entre atividades com animações de transição de atividade personalizadas;
  • criar animações mais naturais com movimentos curvos;
  • Anime mudanças em uma ou mais propriedades de visualização com animações de mudança do estado da visualização.
  • Mostrar animações em drawables da lista de estado entre mudanças de estado de visualização.

As animações de feedback de toque são integradas a diversas visualizações padrão, como botões. As APIs de animação permitem personalizar essas animações e adicioná-las às visualizações personalizadas.

Para ver mais informações, consulte Introdução a animações.

Drawables

Esses recursos para drawables ajudam a implementar apps do Material Design:

  • Drawables vetoriais são escalonáveis sem perder definição e são perfeitos para ícones de uma cor no app. Saiba mais sobre drawables vetoriais.
  • Tonalidade de drawables: permite definir os bitmaps como uma máscara alfa e colori-los com uma cor no tempo de execução. Consulte como adicionar tonalidades a drawables.
  • Extração de cor: permite extrair automaticamente as cores em destaque de uma imagem de bitmap. Confira como selecionar cores com a API Palette.