Um primeiro olhar para o Material You
Durante o I/O de 2021, o Google anunciou a mais nova fase do Material Design, o Material You (ou M3). Esse novo design que chega primeiramente ao Android 12 é focado em personalização, responsividade e acessibilidade, tornando os dispositivos ainda mais pessoais.
Desde o anúncio, o Google lançou mais e mais conteúdos, tutoriais e bibliotecas para ajudar as pessoas desenvolvedoras a abraçar o Material You e criar aplicativos lindos e expressivos. Nesse artigo vamos dar uma olhada em alguns conceitos chave e como saber mais sobre esse novo design.
Cor dinâmica
A cor dinâmica (dynamic color) é um esquema de cores gerado pelo usuário que se integra com o sistema e aplicativos Android que implementam o sistema de cores do Material You. Essas cores são geradas a partir do papel de parede do usuário, criando uma paleta bela e única.
Aqui está um exemplo de uma paleta de cores gerada através de um papel de parede de flores vermelhas. O esquema também gera cores tanto para o tema claro quanto para o tema escuro.
E agora você pode fazer seu próprio aplicativo usar essa paleta de cores! Com a adição das novas funções dynamicLightColorScheme e dynamicDarkColorScheme, adicionar o suporte no seu app é tão simples quanto adicionar algumas linhas de código.
No momento, essa funcionalidade está disponível a partir do Android 12 e em alguns dispositivos selecionados.
Material Theme Builder
O Material Theme Builder é uma ferramenta desenvolvida para nos ajudar a visualizar e crias temas personalizados seguindo as diretrizes do Material You. É possível gerar temas tanto a partir de uma imagem quanto de alguma cor.
Essa ferramenta está disponível como um plugin no Figma e na Web. Além de prover uma melhor visualização, o Material Theme Builder nos permite exportar o código do tema em diversos formatos: Android Views (XML), Jetpack Compose (Kotlin) e Design System Package (DSP).
Atualizações de nomenclatura
Ao migrar do Material Design 2 para o M3, você irá perceber que algumas cores e tipografias tiveram seus nomes atualizados. A nova nomenclatura tem um foco maior em criar uma escala de fontes adaptativa, expressar estilo e comunicar melhor o seu significado. Então tipografias como “H1” e “Body1” dão espaço para “Headline Large” e “Body Medium”.
Os nomes das cores também sofreram atualização e receberam nomes mais significativos, facilitando o uso e a comunicação entre pessoas desenvolveras e designers. E graças ao Material 3 Design Kit e ao Material Theme Builder é fácil ter uma pré-visualização e entender as novas mudanças.
MDC-Android e Compose-Material3
O Google também atualizou a biblioteca Material Components for Android a fim de refletir as mudanças do Material You. A versão atual com suporte ao M3 ainda não está estável (mínimo 1.5.0-alpha ou mais recente) mas a biblioteca já suporta os principais componentes, temas, layouts e mais. E para tornar nossa vida ainda mais fácil, também foi lançado um guia de migração para tornar a transição mais leve.
E se você acha que o Material You já está disponível para Jetpack Compose, você está certo! Uma nova biblioteca chamada Compose Material 3 foi lançada para dar uma aparência renovada para nossos apps em Compose. A biblioteca está atualmente em alpha, mas muito trabalho está sendo feito para trazer todos os componentes para o M3.
Design to Code
Uma das agradáveis surpresas no Android Dev Summit 2021 foi o Material Design to Code. A ideia é que o time de design crie os componentes de interface de usuário no Figma e forneça um link compartilhável para o time de desenvolvimento. Esse link pode ser importado no Android Studio e o design é automaticamente criado em código de Jetpack Compose! 🤯
Os componentes de IU também podem ser atualizados no Figma e refletir no Android Studio com o clique de um botão, integrado com o sistema de controle de versão. Sem mais dores de cabeça e desentendimentos entre designers e pessoas desenvolvedoras.
Essa funcionalidade está atualmente em Preview e se você tem interesse em entrar no programa de acesso antecipado, você precisa se cadastrar nesse formulário de interesse.
E agora?
É um momento de muita animação para o Material Design e o que conseguimos fazer para criar aplicativos mais pessoais e bonitos. O Material You, as novas bibliotecas e ferramentas são revigorantes e o suporte que o Google está oferecendo e como está ouvindo a comunidade me faz sentir que estamos construindo algo grandioso juntos.
Eu comecei a migrar meu projeto open-source do Material Design 2 para o Material You. Esse pull request está em andamento uma vez que alguns dos componentes que uso ainda não foram portados para o M3. Se você quer ter uma noção de como é simples usar as cores dinâmicas, atualizar os componentes e integrar o tema criado no Material Theme Builder, essa PR é um bom começo.
Aqui está a implementação atual do pull request acima, com os componentes e cores dinâmicas do Material You:
Recursos externos
Eu também adoraria compartilhar alguns recursos externos para te ajudar a entender ainda mais as novas bibliotecas, ferramentas e conceitos do Material You. Todas os links abaixo estão disponíveis apenas em inglês no momento.
Muito obrigado por ler meu artigo! ❤️
