O Material Design é um guia abrangente para design visual, de animação e interação em plataformas e dispositivos. Para usar o Material Design nos seus apps Android, siga as diretrizes definidas na especificação do Material Design. Se o app usa o Jetpack Compose, você pode usar a biblioteca Compose Material 3. Se o app usar visualizações, você poderá usar a biblioteca Android Material Components (link em inglês).
O Android oferece os seguintes recursos para ajudar a criar apps com o 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 de widgets de IU padrão, e simplificar a definição de estilo do seu app, aplique um tema baseado no Material Design ao app.
Se você usar o Android Studio para criar seu Projeto do Android, um tema do Material será aplicado por padrão. Para saber como atualizar o tema do projeto, consulte Estilos e temas.
Para oferecer uma experiência familiar aos usuários, 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).
- Mostre sua marca, navegação, pesquisa e outras ações usando a barra de apps.
- Mostre e oculte a navegação do app com a gaveta de navegação.
- Escolha entre os 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 ver todos eles, consulte o catálogo de componentes do Material Design para Android.
Sempre que possível, use ícones predefinidos do Material Design. Por exemplo, para o botão "menu" de navegação da gaveta de navegação, use o ícone de "hambúrguer" padrão. Consulte Ícones do Material Design (link em inglês) para ver 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 Z mais altos transmitem sombras maiores.
- A ordem dos desenhos: visualizações com valores Z mais altos aparecem acima de outras visualizações.
É possível aplicar elevação a um layout baseado em cards, o que ajuda a mostrar informações importantes dentro de cards que têm uma aparência do Material Design. Você pode usar o
widget CardView para
criar cards com uma elevação padrão. Para mais informações, consulte
Criar um layout baseado em cards.
Para informações sobre como adicionar elevação a outras visualizações, consulte Criar sombras e recortar visualizações.
Animações
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 movimento curvo;
- animar mudanças em uma ou mais propriedades de visualização com as 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 a visualizações personalizadas.
Para mais informações, consulte Introdução às animações.
Drawables
Estes recursos para drawables ajudam a implementar apps com 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. Veja como adicionar tonalidades a drawables.
- Extração de cor: permite extrair automaticamente as cores em destaque de uma imagem de bitmap. Saiba como selecionar cores com a API Palette.