Introdução ao Material Design

Tempo de leitura: 8 minutos

introducao-material-design

Em 2014 o Google anunciou o conceito de Material Design em seu evento, o Google I/O. Com a liberação da versão Lollipop da plataforma Android, o novo conceito começou a fazer suas primeiras aparições no mercado mobile. Designers e desenvolvedores de todos os lugares do mundo, ficaram animados com a nova linguagem de design, que tem a intenção de mostrar um rico conjunto de princípios e estilos de uma forma diferente.

O que é Material Design?

Basicamente, o Material Design foi inspirado em materiais e objetos do mundo real, que reagem de acordo como são manuseados.

Na prática, o novo conceito conta com várias novidades como interações em terceira dimensão, aplicação de um sistema de camadas – que pulam umas em frente às outras para separar e trazer novas informações, facilidades na transição entre aplicativos em plataformas móveis como smartphones e tablets, mais animações e feedbacks por meio de comandos touch (sensíveis ao toque).

Os 03 Princípios

A intenção do Google é desenvolver uma forma única de design que permite a o usuário ter a mesma experiência em todas as plataformas e tamanhos de dispositivos.

O Material é a Metáfora

Metáfora material é a teoria que une o espaço racional e um sistema de movimento. O material é baseado na realidade tátil, inspirado no estudo de papel e tinta, mas tecnologicamente avançado e aberto à imaginação e magia. As superfícies e bordas são provas visuais que tudo é baseado na realidade.

Ousado, Gráfico e Intencional

Os elementos fundamentais do projeto baseado em impressão são: tipografia, grades, espaço, escala, cor e uso de imagens-guia. Estes elementos fazem muito mais do que agradar aos olhos. Eles criam hierarquia, significado e foco. Opções de cores, aparência de borda a borda, tipografia em grande escala, e espaço em branco intencional, criam uma interface gráfica ousada.

Movimento Fornece Significado

O movimento respeita e reforça o usuário como o motor principal. Ações primárias do usuário são os pontos que iniciam o movimento. Toda a ação ocorre em um único ambiente, os objetos são apresentados ao usuário sem quebrar a continuidade da experiência, mesmo quando eles se transformam e se reorganizam. O movimento é significativo e apropriado, que serve para concentrar a atenção e manter a continuidade. O feedback é sutil, mas claro. As transições são eficientes e claras.

Veja abaixo um video rápido com alguns exemplos do Material Design feito pelo Google.

**Conteúdo adaptado de Material Design – Introdução

Usando o Material Design

Agora que já sabemos um pouco do conceito de Material Design, vou mostrar um tutorial simples de como iniciar o desenvolvimento de um aplicativo utilizando esse novo conceito.

Esse será um tutorial simplificado apenas para ajudar você a dar os primeiros passos. Vou dividir em 06 passos para facilitar o entendimento.

  1. Estudar a especificação do Material Design.
  2. Aplicar o tema do Material Design em seu aplicativo.
  3. Criar seus layouts seguindo as regras do Material Design.
  4. Definir a configuração do efeito “elevation”.
  5. Usar os novos componentes de Lists e Cards.
  6. Personalizar as animações do seu aplicativo.

Estudar a Especificação

Este é o primeiro e mais importante passo que deve ser feito.

Você pode adicionar muitas características de Material Design ao seu aplicativo, mas sempre deve manter a compatibilidade com as versões do Android anteriores à 5.0.

Para atualizar um aplicativo existente ou criar um novo aplicativo usando o Material Design, atualize seus layouts seguindo as diretrizes da especificação. Também certifique-se de usar as funcionalidades de profundidade, feedback tátil e animações.

Aplicar o Tema no Aplicativo

É muito simples aplicar o tema do Material Design em seu aplicativo, apenas especifique em seu arquivo estilos o tema: Theme.Material:

O tema fornece o sistema de widgets que permitem definir suas cores da paleta padrão e as animações para feedback tátil e transições de Activites.

Criar Layouts de Acordo com as Regras

Além de aplicar e personalizar o tema, seus layouts devem estar de acordo com as regras do Material Design. Quando você for desenvolver seus layouts, de uma atenção especial para os seguintes itens.

Alinhamentos Baseados em Grids

Alinhamentos baseado em grids

Todo os componentes, tipografia, e iconografia são alinhados baseando-se em um grid de posicionamento. Veja as regras em Baseline Grids.

Linhas e Espaçamentos

Linhas e espaçamentos

Os modelos de layouts para mobile, tablet e desktop incluiem uma ampla variedade de telas e informações sobre como utilizar linhas e espaçamentos através das bordas da tela e elementos entre si. Veja mais sobre os exemplos em Keylines.

Área de Toque

Área de toque

Para garantir que todos os aplicativos fiquem utilizáveis, as áreas de toque devem ter o tamanho de, pelo menos, 48x48dp. Na maioria dos casos, o espaço entre as áreas de toque deve ter 8dp ou mais.

Tenha isso em mente quando for definir o espaçamento dos ícones em um layout. As áreas sensíveis ao toque não devem se sobrepor.

Configuração do Efeito “Elevation”

Definir a configuração do efeito elevation

O efeito de “elevation” consiste em mostrar uma sombra em baixo do componente simulando uma elevação entre o componente e o layout atrás. Para configurar o efeito de elevação de um componente, use o atributo android:elevation:

Para mais detalhes, de uma olhada em Defining Shadows and Clipping Views.

Usar os Novos Lists e Cards

Junto com Material Design o Google lançou novos componentes para serem usados. O RecyclerView é uma versão mais versátil do ListView que suporta diferentes tipos de layout e fornece melhorias de desempenho. O CardView permite mostrar as informações dentro de cartões visualmente muito agradáveis para o usuário. O exemplo de código a seguir demonstra como incluir um CardView em seu layout:

Para obter mais informações, vá em Creating Lists and Cards.

Personalizar as Animações

A nova API 21 do Android 5.0 inclui novas funcionalidades para criar animações personalizadas em seu aplicativo. Por exemplo, você pode ativar as transições de uma Activity e usar uma transição no momento que sua Activity for fechada.

Quando você inicia uma outra Activity, a transição será ativada.

Para saber mais sobre as novas APIs de animação, vá em Defining Custom Animations.

Materiais de Apoio

Agora que já vimos o que é o Material Design e uma breve explicação de como utilizá-lo, vou indicar para vocês alguns materiais que para inspirá-los e ajudá-los a utilizar esse novo conceito de design em seus aplicativos.

Links oficiais do Google:

Links extras:

Conclusão

Esse foi um post para inserir você no conceito do Material Design e incentivá-lo a melhorar a interface dos seus aplicativos ou desenvolver novos com uma interface muito mais amigável.

O conceito é simples de entender, mas aplicá-lo pode ser um pouco confuso, as vezes, e é necessário ter um bom conhecimento sobre desenvolvimento Android. Espero ter esclarecido muitas coisas e ajudado você a dar o ponta pé inicial no Material Design.

Se você quiser desenvolver Aplicativos Android profissionalmente, dá uma olhada nesse Treinamento Completo que foi preparado para revelar absolutamente todos os recursos da plataforma Android que você precisa saber antes de tentar usar o Material Design.

Dúvidas, sugestões e novos materiais são sempre bem vindos. Deixe sua contribuição nos comentários abaixo.

Abraços.

  • gustavo Diniz

    Muito Show !

  • Fala Gustavo, blzs?

    Valeu, espero ter ajudado esse mini tutorial.

    Abraços.

  • Tarik da Costa

    Parabéns pela postagem, eu “li” esse material no site oficial, mas tudo em inglês, sempre fica algo sem entender hehehe.

    Muito bom!

  • Obrigado Tarik 😀

  • Renato Oliveira

    Parabéns pelo conteúdo, como sempre de ótima qualidade

  • Obrigado Renato 😀

  • Juliano Costa

    Muito bom o artigo. Bastante esclarecedor e prático. Parabéns

  • Renan Siqueira

    Todos os dispositivos estão aptos pra funcionar com o material?

  • Guilherme Carvalho

    Sim, basta usar a bibliotecca de suporte

  • Obrigado Juliano 😀

  • Renan,

    É isso mesmo o que o Guilherme disse, usando a bilbioteca de suporte funciona nos dispositivos.

    Abraços

  • Leandro Ricardo Quadros Faria

    Legal pra caramba. Ja havia visto algumas coisas sobre o material design, mas não entendendo perfeitamente o objetivo e intuito disso… devagar vou pesquisando e aprendendo, mas o artigo foi fera…

  • Leandro,

    O intuito do MD é tentar deixar o design mais parecido com o comportamento do mundo fisico e com transições de telas mais suaves. Alem de tentar encontrar um formula para todo design ficar bem em todos os tipos de dispositivos.

    Mas continue estudando sobre o MD que vale a pena.

    Abraços.

  • Olá. Quero iniciar no mundo Android, tenho um pouco de conhecimento em Java, mas no últimos anos tenho desenvolvimento apenas em PHP por causa do trabalho.

    Alguém pode me indicar um primeiro passo? Vejo tanto material na internet, que seria péssimo começar da forma errada!

    E parabéns pelo post, muito bom!
    Att

  • Olá Thiago,

    Baixa o ebook grátis do blog que vai te ajudar.
    No dia 07 vou abrir vagas para nosso curso de Android. Faça o cadastro na lista de espera se interessar.

    http://Www.androidpro.com.br/android-accelerate

  • εu รσu ค łεหdค

    tirou minhas dúvidas.. boa matéria!!

  • Renan Siqueira

    Que legal, onde encontro essa biblioteca?

  • Obrigado 😀

  • Já baixei, vou instalar a IDE e começar estudar nesse fim de semana! (:

  • Romulo Augusto

    Bacana o material

  • Valeu Romulo 😀

  • Rafael

    Olá!
    Não consegui adicionar o tema ao meu arquivo de estilos. Seria o arquivo resvaluesstyles.xml?
    Se sim, copiando o colando o código que você mostrou, nada muda. Me parece inclusive que o código está comentado.
    Poderia me ajudar?
    Obrigado

  • debangshu

    a helix where revent exclusively

  • Jasian Pereira Cardoso

    boa tarde gostei muito da explicação, mas tenho uma duvida como faço para centralizar os itens usando o gridlayoutmanager ?

    https://uploads.disquscdn.com/images/f17f737259f362c021a3d7552c45cc4a7921f96ea5b4a33f3bd1278541dd4ab2.png

    quando tenho uma quantidade de objetos que não e
    multiplo de três não completa as três colunas como podemos ver na imagem
    acima.

    preciso que fique igual as imagens abaixo sempre que tenha dois ou um unico objeto naquela linha.

    https://uploads.disquscdn.com/images/9a9d8cfa5d569081a4605839bd2766822134406b418c9a28fa92a2c7cee7f5d7.png

    https://uploads.disquscdn.com/images/4f3e8ab3b7835bff93b465cb7491be7f7b02bd3d007906b198349a2e7a638239.png

    independente da quantidade de objetos que eu tenha na lista a ultima linha que não completa tem que ficar centralizado.

  • Yasuo

    Pow.. o conteudo do cara é bom.. mas tem um monte de post aqui no blogue, com duvidas que muitos gostariam de saber e que ninguem responde… o Kara so responde comentário do tipo: “Muito bom”, “Me ajudou”, “Parabens” … e só! PQP….

  • Ol Jasian, tudo bem?

    Talvez esse post possa te ajduar http://www.androidpro.com.br/android-layouts-viewgroups-intro/.

    Abraços.

  • Ola Yasuo, tudo bem?

    Entendo sua questão, mas a maioria das duvidas ja estavam respondidas ou por mim ou pelos leitores do blog.

    Posso te ajudar em alguma coisa?

    Abraços.

  • Yasuo

    Sim! Pode! Aproveitando que me deu a oportunidade, vou enviar uma solicitação pelo formulário de contato do site.