Como usar as novas cores dinâmicas no Material Design 3 do Android

Como usar as novas cores dinâmicas no Material Design 3 do Android
Junior Martins
Junior Martins

Compartilhe

Resumindo

Buscando renovar seu já conhecido Material Design, em maio de 2021, a Google anunciou sua mais nova versão do padrão de design que foi chamado de Material You, dentre outras novidades, ele trouxe o recurso de gerar paletas de cores baseadas no papel de parede do usuário e repassar isso para o sistema assim como para os apps instalados.

Então, hoje vamos:

  • Conhecer o Material You / Material 3;
  • Entender como as cores dinâmicas funcionam;
  • Aplicar as cores dinâmicas a um app como um todo;
  • Ver algumas peculiaridades dessa nova função.

Vamos lá?

Banner da Escola de Mobile: Matricula-se na escola de Mobile. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

Antes de prosseguir

Em 2021, além do Material You, a Google também apresentou o Jetpack Compose, que é um novo kit de ferramentas para criação de aplicativos Android. Embora a introdução das cores dinâmicas contida neste artigo possa ser útil ao lidar com Compose, faremos as implementações em um app que usa o sistema de views que está em uso na maioria dos aplicativos nativo atualmente.

Material You ou Material 3

Já explicamos, em um artigo anterior, os principais conceitos do Material Design, que é um conjunto de diretrizes de design sugerido pela Google para criação de layouts. Ou seja, especifica cores padrão, tamanho de botões etc.

O Material You é a terceira evolução desse conjunto de diretrizes e, por isso, também é conhecido como Material 3 (ou M3 como também é chamado) e traz mudanças para widgets, fontes, estilos e outros elementos comuns no desenvolvimento de interfaces.

Você pode aprender mais sobre as principais diferenças entre o Material 3 e sua versão anterior nesse guia oficial da Google.

Imagem que mostra duas telas de um app que possuem alguns elementos de design como botões de ação flutuante e uma appbar com o título da tela. As telas estão organizadas da mesma forma, porém a que está à esquerda usa o Material Design 2, os botões de ação são redondos e verdes, a app bar é roxa. Na tela a direita, a cor da app bar é bem mais clara, quase branca, os botões de ação são quadrados com cantos redondos e em um tom de roxo bem claro. Ambas as telas possuem dois botões normais na parte inferior; na tela com Material Design 2, os botões são retangulares e roxo forte; na outra, são mais arredondados e com um roxo mais fraco.

Cores dinâmicas

Imagem animado da tela de um celular que mostra um aplicativo com uma lista de imagens e alguns botões. O celular está sobre uma imagem que muda constantemente, quando a imagem é verde, as cores dos elementos do app são em tons de verde, quando a imagem é roxo, os tons do app são em tons de roxo e quando ela é amarela e marrom os tons do app são em amarelo e marrom.

A partir do Android 12, quando um papel de parede é aplicado, o sistema Android extrai as principais cores desse wallpaper e gera uma paleta (conjunto de cores diferentes) que pode ser usada tanto na interface do sistema, quanto também dentro de aplicativos para personalizar a experiência de usuário.

Além do wallpaper, podemos personalizar as cores de nosso app a partir do conteúdo dinâmico que ele exibe, por exemplo, a capa de um álbum de música:

Um pequeno widget de uma player de música está à esquerda na cor rosa claro, à direita temos a capa de um álbum de música em azul. Um linha desce dos dois e aponta para um player de música semelhante ao anterior mas com tons de azul para dar a ideia de combinação dos dois primeiros elementos.

Geração das paletas

Além das cores que podemos extrair do papel de parede e do conteúdo dinâmico dentro do app, também é possível:

  • Gerar nossa própria paleta com tons semelhantes ao que o próprio sistema gera; e
  • Fazer a customização que acharmos necessária.

Por exemplo, a partir da cor roxa (#5b49cd), temos a paleta para o tema claro e escuro:

Imagem que mostra duas paletas de cores uma de cada lado da imagem, a primeira possui o texto “Light Theme” em cima, suas cores são tons de roxo, vermelho, marrom e cinza mas todas cores claras. A segunda paleta possui o texto “Dark Theme” e possui as mesmas cores da outra paleta, mas com tons mais escuros.

Essas paletas podem ser geradas por meio do Material Builder, uma ferramenta oficial da Google que auxilia na criação e visualização de paletas que seguem o padrão do Material 3 e também permite fazer o upload de uma imagem e ver como suas cores serão extraídas/aplicadas à tela de um app de demonstração:

Tela que mostra a página inicial do site Material Builder. A página é dividida em duas partes; na direita, vemos um celular sobre uma imagem de folhas secas em tons de marrom, e o aplicativo aberto no celular possui as cores da imagem de fundo aplicada. Abaixo do celular, há um botão marrom para adicionar um wallpaper. No lado esquerdo da página, é possível ler o título “Visualize cores dinâmicas” e, abaixo dele, um texto que indica para tocar em uma das outras imagens mais abaixo do texto ou adicionar sua própria imagem, para “ver a cor gerada em ação”. Também é dito que cinco cores principais são geradas como cores dinâmicas a partir desta ação.

Você pode customizar manualmente cada uma das cores principais se desejar e, no fim, exportar um arquivo de temas em diferentes formatos que pode ser usado no Android (XML e Compose), Flutter, Web (CSS) ou no padrão DSP.

Imagem que mostra uma tela dividida em três partes ou colunas. Na primeira coluna, à direita, há o título “seu tema” seguido dos títulos “tema claro” e “tema escuro” e tabela com as cores roxo claro e escuro, branco, marrom e vermelho. Na segunda coluna, ao meio, há a representação de um celular com um aplicativo aberto. Na terceira coluna, à esquerda, há um texto ilegível e, logo abaixo, o título “cores principais” seguido de bolas coloridas que contém a cor azul e outros tons de cinza.

Para saber mais detalhes sobre como usar o Material Theme Builder, consulte este guia da documentação. Importante notar que não vamos usá-lo neste artigo, mas é uma ótima ferramenta para entender como essa nova função funciona.

Seja gerando as cores baseadas no papel de parede, conteúdo dinâmico ou mesmo pela ferramenta de criação de temas, o algoritmo usado vai garantir duas vantagens:

  • Compatibilidade com o modo escuro;
  • Paletas de cor que atendam aos requisitos de acessibilidade.

Agora, é importante que você se atente a dois pontos importantes.

Avisos

É bom frisar que a função de cores dinâmicas está disponível apenas para dispositivos que possuam o Android 12 ou superior. Outro detalhe importante é que, para que as cores dinâmicas tenham o resultado esperado, é preciso garantir que não haja cores codificadas permanentemente no aplicativo; nossos componentes devem receber as cores via tema e não diretamente no layout ou via código. Combinado?

Considerados esses avisos, vamos colocar a mão na massa (ou melhor dizendo, no código)!

Colocando a mão na massa: como personalizar cores no Material Design 3

Imagem animada de um gato preto sentado em uma mesa, digitando apressadamente em um notebook cinza.

Agora é hora de colocar a mão na massa e descobrir como personalizar cores e widgets no Material Design 3.

Pensando em facilitar o seu entendimento do assunto, vamos utilizar um aplicativo pronto: o Orgs, que foi desenvolvido no Curso de Android com Kotlin persistência de dados com o Room, e simula um e-commerce de produtos orgânicos.

Passo 1): Como atualizar o Material Design 2 para Material Design 3 no aplicativo

Segundo o guia oficial para implementação das cores dinâmicas, o primeiro passo a se fazer é atualizar o projeto do aplicativo para o Material Design 3. Nosso aplicativo possui uma versão mais antiga do Material, porém caso seu projeto não o possua, confira essas instruções de introdução aos componetes do Material Design para Android.

No seu projeto, abra o arquivo build.gradle do módulo app, e atualize a dependência do Material para pelo menos 1.5.0-alpha04 (no momento em que esse artigo é escrito a versão atual é 1.6.1):

dependencies {
// outras dependências …
implementation 'com.google.android.material:material:1.6.1'
// outras dependências …
}

Neste mesmo arquivo, altere as opções compileSdkVersion e targetSdkVersion para, pelo menos, 31 (número da API do Android 12):

android {
    compileSdkVersion 31
    // outros códigos …

    defaultConfig {
        // outros códigos …
        targetSdkVersion 31
    }
}

Nos arquivos de temas do Orgs, faça com que tudo que usa Theme.MaterialComponents agora passe a usar Theme.Material3, então, dentro do arquivo themes.xml, localizado em res\values, antes era assim:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Orgs" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
// outros atributos…
</resources>

Agora, passa ser assim:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Orgs" parent="Theme.Material3.DayNight">
// outros atributos…
</resources>

Faça a mesma modificação para outros arquivos que contenham uma referência semelhante, como o de tema escuro.

Os atributos entre as versões do Material podem ser diferentes como a Documentação explica. Assim, a tabela a seguir mostra a equivalência entre alguns atributos da versão antiga com a mais nova para auxiliar nesta troca:

MaterialComponentsMaterial3
Theme.MaterialComponents.LightTheme.Material3.Light
Theme.MaterialComponents.Light.NoActionBarTheme.Material3.Light.NoActionBar
Theme.MaterialComponentsTheme.Material3.Dark
Theme.MaterialComponents.NoActionBarTheme.Material3.Dark.NoActionBar
Theme.MaterialComponents.DayNightTheme.Material3.DayNight
Theme.MaterialComponents.DayNight.NoActionBarTheme.Material3.DayNight.NoActionBar
Theme.MaterialComponents.Light.DarkActionBarNão existe
Theme.MaterialComponents.DayNight.DarkActionBarNão existe

Passo 2: Como personalizar cores e Widgets no Material Design 3

Agora, com a versão do Material atualizada, podemos focar no que interessa! Ao realizar essa mudança e rodar o app, podemos perceber mudanças significativas na tela:

Imagem que coloca, lado a lado, duas representações de celulares com o aplicativo Orgs aberto. O celular à esquerda mostra uma lista de produtos (os quais são uva e banana) no modelo do Material Design 2. O celular à direita mostra a mesma lista de produtos, porém agora atualizada para o Material Design 3.

É possível perceber dois tipos principais de mudanças:

1) Mudanças estéticas e de layout: como o botão, que no Material 2 tinha formato redondo e, agora, no Material 3, é quadrado com cantos arredondados.

2) Mudanças em como as cores são tratadas: há duas mudanças principais, segundo a documentação. O primeiro ponto é sobre atributos que continuam em uso e atributos que foram descontinuados:

O sistema de cores do Material 3 usa uma abordagem organizada para aplicar cores à sua interface do usuário. Vários atributos de Theme.AppCompat ainda estão em uso. No entanto, mais atributos foram adicionados Theme.MaterialComponents. e ainda mais, Theme.Material3. por isso é importante examinar todas as telas do seu aplicativo para garantir que nenhuma propriedade não implementada esteja saindo do tema base.

O texto acima é complementado pela tabela que relaciona os atributos antigos com os mais novos, e inclusive indica que o padrão colorPrimaryVariant foi descontinuado, então vamos removê-lo do nosso tema e do nosso arquivo de cores para garantir que a cores dinâmicas funcionem melhor:

<!-- outros atributos do color.xml -->
<item name="colorPrimary">@color/colorPrimary</item>
remover essa linha >>> <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>
<!-- outros atributos -->
<!-- outros atributos do themes.xml -->
<item name="colorPrimary">@color/colorPrimary</item>
remover essa linha >>> <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>
<!-- outros atributos -->

O segundo ponto relacionado às mudanças no tratamento de cor é que o Material 3 usa um tom roxo para as cores de destaque padrão se as cores dinâmicas não estiverem disponíveis.

Isso fica claro ao compararmos o floating action button da imagem anterior que antes era verde e agora está roxo claro. Para mudar isso (por questões de marca por exemplo), no color.xml, adicione os seguintes atributos com as cores de nossa escolha:

<!-- outros atributos -->
<color name="colorPrimaryContainer">#4CAF50</color>
<color name="colorOnPrimaryContainer">#FFFFFF</color>
<!-- outros atributos -->

E, no themes.xml, faça referência a essas cores:

<!-- outros atributos -->
        <item name="colorPrimaryContainer">@color/colorPrimaryContainer</item>
        <item name="colorOnPrimaryContainer">@color/colorOnPrimaryContainer</item>
<!-- outros atributos -->

Note que adicionamos dois atributos de cor, um para o fundo do botão colorPrimaryContainer e outro para seu ícone colorOnPrimaryContainer. Mas por qual razão? Bem, isso foi feito para manter um bom contraste pensando em acessibilidade e manter consistência visual.

Caso você tenha dúvidas sobre quais cores são usadas por um componente específico, consulte essa seção da documentação.

Imagem que coloca, lado a lado, duas representações de celulares com o aplicativo Orgs aberto. O celular à esquerda mostra uma lista de produtos (os quais são uva e banana) no canto inferior direito da tela, há um botão em um tom claro de roxo destacado por uma seta vermelha com a palavra “antes”. O celular à direita mostra a mesma lista de produtos, porém agora atualizada, no lado direito inferior da tela, há um botão, mas na cor verde, e uma seta precedida pela palavra “agora”.

Por fim, os Cards no Material 3, por padrão, apresentam uma borda em volta. Para mudar isso, adicionamos um atributo de estilo às implementações desse widget:

<com.google.android.material.card.MaterialCardView 
<!-- outros atributos -->
    style="?attr/materialCardViewFilledStyle">
Imagem que mostra um trecho da página da documentação do Material Design 3. Na parte superior da imagem, há algumas demonstrações de estilo. Na parte inferior da imagem, há uma tabela com as colunas “element”, “design attribute”, “role” e “token”, descrevendo característica do elemento Container.

O MaterialCardViewFilledStyle é um dos estilos que podem ser implementados para os cards; cada estilo também terá um padrão de cor no tom de roxo e, mais uma vez, para personalizar isso, caso seja necessário, adicione um atributo ao arquivo de cor (no caso de exemplo, a cor escolhida será o branco, que faz parte da identidade visual do aplicativo Orgs):

<!-- outros atributos -->
<color name="colorSurfaceVariant">#FFFFFF</color>
<!-- outros atributos -->

E o referenciamos no arquivos de temas:

<!-- outros atributos -->
        <item name="colorSurfaceVariant">@color/colorSurfaceVariant</item>
<!-- outros atributos -->

Agora temos:

Imagem que coloca, lado a lado, duas representações de celulares com o aplicativo Orgs aberto. O celular à esquerda mostra uma lista de dois cards na cor cinza claro com uma borda preta em volta; pode-se ler a palavra “antes” sobrescrita ao modelo. O celular à direita mostra a mesma lista de cards, porém na cor branca, sem a borda em volta dos cards e pode-se ler a palavra “agora” sobre o aplicativo.

Nós mudamos algumas cores e o estilo dos cards que exibem os itens para que o layout desse app em específico atenda ao visual que esperamos. Vale ressaltar que, na sua implementação, pode ser necessário fazer outros ajustes, então recomendamos que consulte a documentação oficial do Material Design 3.

Como adicionar cores dinâmicas no Material Design 3 do Android

Passo 1): Crie um arquivo de classe que estenda de Application. Em nosso exemplo, chamamos esse arquivo de ‘OrgsApplication’, e sua função é ser responsável por aplicar as cores dinâmicas no app (caso elas estejam disponíveis):

class OrgsApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Passo 2): Faça a essa classe no AndroidManifest.xml do app, então, dentro dele, procure a procure a tag application e adicione o atributo android:name apontando para o local de nosso arquivo recém-criado:

<?xml version="1.0" encoding="utf-8"?>
<manifest …
    <application
        android:name=".OrgsApplication"
<!-- outros códigos -->
    </application>
</manifest>

Nossa configuração está pronta! Como resultado, ao trocar o papel de parede e reabrir o aplicativo, suas cores são alteradas:

Imagem animada de um celular preto que mostra sua tela inicial com alguns aplicativos. Um papel de parede com formas geométricas em vermelho é visto ao fundo. O ícone do aplicativo Orgs em verde, é clicado e quando o app abre, as cores dos elementos visuais dele como botão e cards estão em tons de vermelho. O app é minimizado e o papel de parede é trocado para um idêntico, mas com cores roxas, o app é reaberto e o tom da cor dos elementos visuais muda para roxo. O mesmo procedimento de minimizar, trocar o papel de parede e abrir o app é feito mais duas vezes com papéis de parede na cor laranja e verde. Toda vez que a cor do papel de parede muda, os tons de cor do aplicativo também mudam.

Como adicionar cores dinâmicas a componentes específicos no Material 3 do Android

A UI (interface do usuário) do Orgs está adaptada para as cores dinâmicas, mas nem todos os elementos serão influenciados pela paleta de cores gerada pelo sistema. Pode ser do nosso interesse que, por exemplo, um texto, um widget ou mesmo o fundo de uma tela também apresente o comportamento de mudar cor conforme o wallpaper.

As cores dinâmicas extraídas a que temos acesso são divididas em cinco categorias, sendo três cores de destaque e duas cores neutras:

Imagem que mostra, à direita, uma lista de cores. Primeiro, há as “accent colors”, ou seja, cores x, seguida de três cores: a “primary key color” - cor-chave primária -, a “secondary key color” - cor-chave secundária - em um tom acinzentado e a tertiary key color - cor-chave terciária - em um tom marrom. Em seguida, há as “neutral colors” - cores neutras - que são duas: a neutral key color - cor- chave neutra em um tom cinza e a neutral variant key color - cor-chave neutra variante - em um outro tom acinzentado. Do lado esquerdo da imagem, há a imagem da tela de um celular que exibe uma flor de tons rosa, amarelo e laranja e, logo atrás dessa tela, o verso do celular em que se vê duas câmeras e o logo da empresa Google.

Cada uma dessas cores possui uma variação de tom do mais claro para o mais escuro e são identificadas pelos números: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

Imagem que mostra uma escala de variação de tons da cor vinho, composta por dez intervalos de tom, da esquerda para a direita, que vão do número 900 (mais escuro), passando pelo tom principal em 700, até o tom mais claro no valor 50.

Em qualquer lugar de nossos layouts, podemos acessar a propriedade @android:color/system_accent ou @android:color/system_neutral e suas variações para obter acesso a uma cor dinâmica atual, por exemplo, em nossa activity principal activity_lista_produtos_activity.xml vamos colocar um background:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<!-- outros atributos -->
android:background="@android:color/system_accent1_300"
tools:targetApi="s">
<!-- restante do código -->

Veja como nosso app ficou com um papel de parede roxo e outro verde respectivamente:

Imagem que coloca, lado a lado, duas representações de celulares com o aplicativo Orgs aberto. O celular à esquerda mostra uma lista de dois cards e um fundo na cor roxa. O celular à direita mostra a mesma lista de cards, porém o fundo do aplicativo está na cor verde.

Note que, no código anterior, usamos o namespace tools:targetApi="s para permitir a adição de cores dinâmicas em um layout que pode não estar rodando em um aparelho com suporte a essa função. Isso não é o ideal, mas permite que o app continue funcionando normalmente em versões anteriores do Android, como no 10, por exemplo:

Tela do aplicativo rodando na versão 10 do Android, as cores exibidas não refletem a paleta de cores do papel de parede.

Uma maneira mais correta de lidar com essa situação é criar um arquivo attrs.xml dentro do diretório values de seu app e, nele, definir uma propriedade que lidará com a cor de fundo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="backgroundColor" format="color"/>
</resources>

O nome backgroundColor pode ser qualquer coisa como corApenasDosBotõesRedondos; o importante é que format seja do tipo color.

Agora, vamos criar um arquivo de temas a que só versões do Android 12 ou superior tenham acesso:

Passo 1): Clique com botão direito em cima da pasta values (que está dentro de res), selecione New e depois Values Resource File.

Imagem animada que mostra o cursor, no Android Studio, clicando com botão direito em cima da pasta values, seleciona new e, depois, values resource file.

Passo 2): Na janela que surgirá em File name, coloque o nome themes e, no campo Directory name, deixe como values-v31:

Imagem que exibe a janela New Resource File no Android Studio.

Clique em ok e o arquivo criado será aberto contendo um código similar a este:

<?xml version="1.0" encoding="utf-8"?>
<resources></resources>

Passo 3): Precisamos que esse tema herde as mesmas características de nosso tema base. Para fazer isso, crie uma tag style que possua o mesmo name e parent do arquivo de temas que viemos trabalhando ao longo do artigo:

<resources >
    <style name="Theme.Orgs" parent="Theme.Material3.DayNight">
    </style>
</resources>

Passo 4): Dentro da tag style, faça referência à propriedade que criamos em attrs.xml e apontamos para cor dinâmica escolhida (@android:color/system_accent1_300, no nosso caso):

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.Orgs" parent="Theme.Material3.DayNight">

        <item name="backgroundColor" >@android:color/system_accent1_300</item>

    </style>
</resources>

Passo 5): Na activity_lista_produtos_activity.xml, coloque, no atributo de background, a referência ao ?attr/backgroundColor e não mais diretamente a cor, eliminando também a necessidade de usar o tools:targetApi="s":

<androidx.constraintlayout.widget.ConstraintLayout 
<!-- outros atributos -->
android:background="?attr/backgroundColor">
<!-- restante do código -->

Pronto! O arquivo de tema exclusivo do Android 12 está criado. O resultado é o mesmo de quando adicionamos a propriedade android:background="@android:color/system_accent1_300" diretamente ao nosso arquivo de layout anteriormente, mas fizemos o uso de uma abordagem altamente recomendada, com as vantagens de:

  • Permitir aplicar esse mesmo tema a outras telas caso desejarmos;
  • Dar suporte a criação de temas escuros com comportamentos equivalentes se necessário.

E ah, claro! Mantemos a compatibilidade com versões anteriores do Android:

Imagem que coloca, lado a lado, três representações de celulares com o aplicativo Orgs aberto, duas do Android 12 e uma do Android 10. O primeiro celular, à direita, mostra uma lista de produtos com um fundo em tom vermelho e, em cima da tela, pode-se ler “Android 12”. O segundo celular, ao meio, mostra uma lista de produtos com um fundo em tom azul e, em cima da tela, pode-se ler “Android 12”. O terceiro celular, à esquerda, mostra uma lista de produtos com um fundo em tom branco e, em cima da tela, pode-se ler “Android 10”.

Pronto! Vimos várias dicas para usar as novas cores dinâmicas do Material 3 no Android, seja na sua versão atual - da data de publicação deste artigo - ou anterior.

Um último detalhe: TopApp

Imagem que mostra a comparação entre “antes” e “agora” da barra superior do aplicativo Orgs. No celular à esquerda, o “antes”, a barra está na cor verde. No celular à direita, o “agora”, a barra está na cor cinza claro.

O Material Design traz inúmeros novos padrões de cor e estilos que impactam muito alguns aspectos que já estamos acostumados, e vimos muito isso ao longo deste tutorial. A AppBar - que antes trazia cores mais vibrantes -, agora traz tons mais suaves como regra; esse é um novo padrão sugerido pela Google que inclusive pode ser visto em seus próprios aplicativos:

Imagem que mostra a interface de quatro aplicativos da Google: gmail, agenda, telefone e google tradutor, todos em tons mais claros e neutros.

Por questões de marca, você pode selecionar uma cor específica da AppBar. Ao fazer isso, perdemos um elemento de interação importante com as cores dinâmicas. Por outro lado, ao não fazer, temos que prestar atenção às telas que possuem ícones de menu e mudar a cor dos ícones, para que contrastem melhor com o fundo e sejam mais visíveis.

Você, inclusive, pode optar por uma abordagem semelhante à usada anteriormente para mudar o fundo da tela, em que temos uma cor padrão para quando as cores dinâmicas não estão disponíveis e, outra, para quando estão:

Imagem estática que mostra a parte superior do aplicativo Orgs em dois modelos celulares diferentes. À esquerda, com o subtítulo “sem cores dinâmicas”, a barra de notificação do aplicativo está na cor verde. À direita, com o subtítulo “com cores dinâmicas”, a barra de notificação do celular está em um tom de vinho, refletindo a cor do papel de parede atual.

Conclusão

Neste artigo, foram muitos aprendizados:

  • Saber o que são e como funcionam as cores dinâmicas;
  • Conhecer mais sobre o novo Material Design 3 ou “Material You”, como a Google o nomeou;
  • Adaptar um aplicativo para que passe a fornecer suporte a essa nova função;
  • Aplicar algumas técnicas ao realizar a atualização do Material em outros layouts.

Recomendamos muito que você separe um tempo e leia a documentação do Material 3 que é bem detalhada e pode ser útil em casos mais pontuais.

Para aprender mais sobre a programação de apps Android, lembre de conferir nos nossos cursos da Formação Mobile.

Muito obrigado pela presença e até mais!

Fontes

Junior Martins
Junior Martins

Desenvolvedor Android e produtor de conteúdo Tech. Criando coisas legais e mostrando ao mundo como fiz

Veja outros artigos sobre Mobile