O Material Design é um guia abrangente para design visual, de animação e interação entre plataformas e dispositivos. Para usar o Material Design nos seus apps Android, siga as diretrizes definidas na especificação do Material Design e use os novos componentes e estilos disponíveis na Biblioteca de Suporte do Material Design. Esta página oferece uma visão geral dos padrões e das APIs a serem usados.
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 cartões
- Novas 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 ao app.
Tema escuro do Material Design
Tema claro do Material Design
Para mais informações, veja como aplicar o tema do Material Design.
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 IU com um botão de ação flutuante (FAB).
- Mostre sua marca, navegação, pesquisa e outras ações com a barra de apps.
- Mostre e oculte a navegação do app com a gaveta de navegação.
- Use um dos 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, confira o Catálogo de componentes do Material Design para Android (em inglês).
Além disso, sempre que possível, use ícones predefinidos do Material Design. Por exemplo, o botão "menu" da gaveta de navegação deve usar 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 nova propriedade representa a elevação de uma visualização, que determina:
- 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 são exibidas acima de outras visualizações.
Muitas vezes, a elevação é aplicada quando seu layout inclui um layout baseado em cards, o que
ajuda a exibir partes importantes de informações dentro de cards que têm uma aparência do Material Design.
Você pode usar o widget CardView para criar cartões com
uma elevação padrão. Para mais informações, consulte
Criar um layout baseado em cards.
Para ver informações sobre como adicionar elevação a outras visualizações, consulte Criar sombras e recortar visualizações.
Animações
As novas 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 novas APIs permitem personalizar essas animações e adicioná-las a visualizações personalizadas.
Para mais informações, consulte Visão geral de animações.
Drawables
Estes novos 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 os 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. Veja como selecionar cores com a API Palette.