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 para várias 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, pode usar a biblioteca Compose Material 3. Se o seu app usa visualizações, você pode usar a biblioteca Android Material Components.

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

  • Um tema de app do Material Design para estilizar todos os widgets de interface.
  • 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 interface padrão, e simplificar a definição de estilo do seu app, aplique um tema baseado no Material Design ao app.

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

Se você usar o Android Studio para criar um projeto Android, ele vai aplicar um tema do Material Design por padrão. Para saber como atualizar o tema do seu 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:

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 de "hambúrguer" padrão. Consulte Ícones do Material Design (em inglês) para conferir uma lista dos ícones disponíveis. Você também pode importar ícones SVG da biblioteca Material Icon 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 de desenho: visualizações com valores Z mais altos aparecem sobre 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 informações importantes dentro de cards que oferecem uma aparência do Material Design. Você pode usar o widget CardView para criar cards com uma elevação padrão. Para saber mais, consulte Criar um layout baseado em cards.

Para saber 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 Animation permitem criar animações personalizadas para feedback de toque em controles de interface, mudanças no estado da visualização e transições de atividades.

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;
  • Crie animações mais naturais com movimento curvo.
  • Anime mudanças em uma ou mais propriedades de visualização com animações de mudança do estado de visualização.
  • Mostrar animações em drawables de 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 mais informações, consulte Introdução às animações.

Drawables

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

  • Drawables vetoriais são escalonáveis sem perder a definição e são perfeitos para ícones de uma única 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. Saiba 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.