Utilizando Material Design em Android

Material Design

Fala, galera da Comunidade! Neste post, irei mostrar um pouco sobre como desenvolver uma UI em Android, já aplicando o novo conceito de design da Google: Material Design. Se você é iniciante e gostaria de saber como começar a desenvolver para Android, leia o post Iniciando com Android: Introdução ao Android Studio que está bem legal!

Material Design: O Design Unificado da Google

Antigamente, existiam várias “caras” para os produtos da Google, inclusive para tipos de dispositivos diferentes, como web, tablets e smartphones. Ficava complicado manter uma mesma experiencia de usuário, pois cada produto tinha a sua maneira de design. Com o tempo, a Google percebeu isso e reuniu todos designers para que de certa forma pudesse contornar esse problema.

E durante o keynote da Google I/O 2014 foi anunciado o Material Design, um novo conceito que unificou a a experiencia entre plataformas e dispositivos de tipos e tamanhos variados. Basicamente, o Material Design se baseia em papel e tinta (paper and ink, em inglês) e nomenclaturas comuns do mundo real, como folha de papel (Sheet), paleta, etc. Os designers da Google realizaram vários experimentos com folhas de papel e outros materiais para estudar aspectos comportamentais, como sombreamento, Física de movimentos, etc.

Um ambiente Material design é composto de um mundo 3D, com três eixos: x, y e z, sendo eles ortogonais entre si. Pense no seguinte cenário: Se você estiver em um local iluminado, levantar um material que está sobre uma mesa, por exemplo, você irá perceber um sombreamento abaixo do objeto. E se você continuar momento este mesmo objeto, a sombra irá acompanhar, conforme aprendemos nas aulas de Óptica. E os engenheiros da Google não esqueceram nenhum detalhe e trouxeram um eixo Z para objetos gráficos que herdam exatamente estes mesmos comportamentos, como é possível perceber no vídeo abaixo.

Material Design em Android

O Material Design foi utilizado no novo Android 5.0, com codinome Lollipop e trouxe várias novidades para o desenvolvimento Android, como o conceito de elevação (elevation), objetos compartilhados entre animações de telas, reveals (animações especiais), efeito ripple, novos widgets como RecyclerView, CardView, Pallete, Toolbar e muito mais! Seria necessário um novo post dedicado para explicar todas as melhorias trazidas nessa atualização, que é sem dúvida a maior de todas até o momento.

Os primeiros dispositivos a serem lançados com suporte a Android Lollipop foram o Nexus 6 e Nexus 9, ambos fabricados em parceria com a Motorola. Porém, outros fabricantes já estão lançando atualizações e novos dispositivos com a nova versão. Mas como faço para adaptar minha app para já suportar o Android Lollipop? Calma que explico na próxima seção! 😉

Projeto BizuSafo para Android

Vamos utilizar o projeto BizuSafo para Android, um cliente do BizuSafo, projeto open source que está disponível no GitHub do Tá Safo. Primeiramente, você deve clonar este repositório. Para isso, com o Android Studio aberto, vá em VCS > Checkout from Version Control > GitHub. Na tela que abrir, informe a URL https://github.com/tasafo/bizusafo-android.git no campo Git Repository URL e clique em Clone, conforme mostra a imagem a seguir.

Clone_Repository

Clonando o repositório do BizuSafo para Android.

 

Assim que o projeto for importado no Android Studio, já poderemos adaptar a app para utilizar Material Design, conforme irei mostrar a seguir.

 

Adaptando para utilizar Material Design

Se você fez download do Android Studio 1.0+, então o SDK e todas as ferramentas necessárias e imagem de sistema necessárias para criar um AVD com suporte a Android Lollipop já estarão disponíveis. Caso contrário, você terá que baixar indo em Tools > Android > SDK Manager e escolher para instalar a versão mais recente, que na época da escrita deste post era a Android 5.1.

Android_SDK_Manager_e_Editar_post_‹_Blog_do_Tá_safo__—_WordPress

Android SDK Manager baixando a versão mais recente da API

 

Depois disso, você terá que adicionar o qualifier “-v21” nos recursos que você desejar. Por exemplo, o arquivo res/layout-v21/activity_login.xml, será carregada dinamicamente quando o dispositivo estiver rodando com a versão Lollipop ou superior. Os qualifiers podem variar conforme você deseja adaptar seus layouts para vários dispositivos (ex: idioma, orientação, dimensões, etc).

Aplicando temas

Antes do Material

Antes com o Holo (tema disponível desde o Android Honeycomb – API Level 11), para alterar a cor primária ou o pigmento dos widgets, era necessário gerar inúmeros artefatos de imagens na pasta res. E caso fosse necessário alterar a cor da ActionBar da sua app, eram necessárias inúmeras imagens e linhas de código nos arquivos de estilos. Ferramentas como Android Holo Colors Generator  e Android Action Bar Style Generator facilitavam e muito esse processo gerando automaticamente todos os artefatos, porém mesmo assim sua app ficava com vários arquivos muitas vezes desnecessários. E a cada alteração, era necessário gerar novamente todos os artefatos, o que acabava por substituirmos todo o conteúdo da pasta res ou sobrescrevendo arquivo por arquivo, que era bem cansativo.

Com Material. O que mudou?

Se você quiser utilizar o novo tema do Material Design, basta criar um novo recurso res/values-v21/styles.xml e fazer com que seu tema inicial herde de @android:style/Theme.Material. Assim como a Holo, o novo tema possui 3 variações: a variação escura (Theme.Material), a clara (Theme.Material.Light) e a clara com ActionBar escura (Theme.Material.DarkActionBar). Além disso, agora não é mais necessário gerar inúmeros 9-patch drawables, arquivos de estilos. Basicamente, basta utilizarmos três atributos de estilo:

  • android:colorPrimary: Indica a cor primária da sua app, geralmente, a cor da sua Action Bar ou Toolbar.
  • android:colorPrimaryDark: Representa a cor primária em seu tom mais escuro, geralmente que será utilizado na cor da barra de status, que com Android Lollipop agora é possível!
  • android:colorAccent: Este atributo representa a cor acentuada do seu aplicativo. Essa cor será utilizada para dar pigmentação para os componentes gráficos, como EditText, Switch, RadioButton e outros.

O aquivo styles.xml fica dessa maneira, bem mais enxuto, não é? 🙂

<resources>
    <style name="AppTheme" parent="@android:style/Theme.Material.Light">
        <item name="android:colorPrimary">@color/primary_color</item>
        <item name="android:colorPrimaryDark">@color/primary_color_dark</item>
        <item name="android:colorAccent">@color/color_accent</item>
    </style>
</resources>

Faça esse teste e verifique a diferença na app!

 

Utilizando Material em dispositivos pre-Lollipop

Bibliotecas de Compatibilidade (Support Libraries)

Um dos grandes desafios até hoje em Android tem sido você desenvolver uma app que seja compatível com a maioria dos dispositivos do mercado. Ainda tem o detalhe de determinadas APIs serem específicas de uma determinada versão. Uma alternativa que deu bastante certo foi utilizar APIs de terceiros, como as famosas NineOldAndroids, para permitir utilização das APIs de animação do Honeycomb (ex: ObjectAnimator) desde a versão 1.0; e a ActionBarSherlock, que trouxe a portabilidade de ActionBars para versões antigas.

Pensando em minimizar ainda mais esse problema, a Google vem desenvolvendo e mantendo bibliotecas de suporte (Support Library) que permite utilizar aspectos de APIs novas em versões desde a API Level 4 (support-v4) como Fragments, ViewPager; ou API Level 7 (appcompat-v7, recyclerview-v7, cardview-v7). E com o advento do Lollipop, a appcompat-v7 (conhecida também como AppCompat v21) foi atualizada para que os dispositivos mais antigos já pudessem utilizar as novas APIs, como RecyclerView, CardView, Palette, Toolbar e muitas outras.

 

AppCompat v21

Adaptar sua app para utilizar os novos estilos do Material Design é muito simples e rápido! Basta você alterar seu arquivo de estilos localizado em res/values e fazer seu tema estender de Theme.AppCompat.<Variacao>, onde <Variacao> pode ser Light, Dark ou Dark.ActionBar para indicar um tema claro, escuro ou claro com Action Bar escura, respectivamente. O código xml a seguir mostra como deve ficar o seu arquivo de estilos.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primary_color</item>
        <item name="colorPrimaryDark">@color/primary_color_dark</item>
        <item name="colorAccent">@color/color_accent</item>
    </style>
</resources>

 

Pronto! Assim, sua app já será compatível com a maioria de dispositivos que existem no mercado mundial! Nos próximos posts, irei falar mostrar as novidades do Android Lollipop, como RecyclerView e CardView.

Até o próximo post! 😉

Referências

Material Design Spec

Android Design Guide

AppCompat v21 — Material Design for Pre-Lollipop Devices!

2 comentários sobre “Utilizando Material Design em Android

  1. Muito interessante o artigo, faz tempo que venho pesquisando sobre material design e são poucos os materiais disponíveis em português.
    Ramon uma dúvida que eu tenho, talvez tu saiba me responder: existe algum tema de material design para app pré-pronto pra se utilizar no android studio? Por exemplo: baixo, instalo ele e posso fazer algumas alterações nas cores ou em alguns elementos.
    Vlw!

    Curtir

O que tu achas?

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s