A cor dinâmica, que foi adicionada no Android 12, permite que os usuários personalizem os dispositivos para se alinharem de maneira harmoniosa ao esquema de cores do plano de fundo pessoal ou com uma cor selecionada no seletor de plano de fundo.
Você pode aproveitar esse recurso adicionando a API DynamicColors, que
aplica esse tema ao seu app ou atividade para tornar o app mais personalizado
para o usuário.
Esta página inclui instruções para implementar cores dinâmicas no seu app. Esse recurso também está disponível separadamente para widgets e ícones adaptativos, conforme descrito mais adiante nesta página. Você também pode testar o codelab.
Como o Android cria esquemas de cores
O Android realiza as etapas abaixo para gerar esquemas de cores do plano de fundo de um usuário.
O sistema detecta as cores principais na imagem de plano de fundo selecionada e extrai uma cor de origem.
O sistema usa essa cor de origem para extrapolar cinco cores principais, conhecidas como Primárias, Secundárias, Terciárias, Neutras e Variantes neutras.
Figura 2. Exemplo de extração de cor de origem da imagem de plano de fundo e extração para cinco cores principais. O sistema interpreta cada cor principal em uma paleta de tons de 13 tons.
Figura 3. Exemplo de geração de determinadas paletas tonais O sistema usa esse plano de fundo único para derivar cinco esquemas de cores diferentes, que fornecem a base para temas claros e escuros.
Como as variantes de cor são exibidas no dispositivo de um usuário
Os usuários podem selecionar variantes de cor das cores extraídas do plano de fundo e diferentes temas a partir do Android 12, com mais variantes adicionadas no Android 13. Por exemplo, um usuário com um smartphone Pixel com o Android 13 selecionaria uma variante nas configurações de Plano de fundo e estilo, conforme mostrado na Figura 4.
O Android 12 adicionou a variante Tonal Spot, seguida pelas variantes Neutral, Vibrant Tonal e Expressive. Cada variante tem uma receita exclusiva que transforma as cores originais do plano de fundo de um usuário com vivacidade e rotação da matiz. O exemplo a seguir mostra um único esquema de cores expresso por essas quatro variantes.
O app ainda vai usar os mesmos tokens para acessar essas cores. Para detalhes sobre tokens, consulte Criar seu tema com tokens nesta página.
Começar a usar o Compose
Se você está criando sua interface com o Compose, consulte Temas do Material Design no Compose para ver detalhes sobre como aplicar cores dinâmicas ao seu app.
Começar a usar o Views
Você pode aplicar cores dinâmicas no nível do app ou da atividade. Para fazer isso, chame
applyToActivitiesIfAvailable() para registrar um
ActivityLifeCycleCallbacks no seu app.
Kotlin
class MyApplication: Application() {
override fun onCreate() {
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Java
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
Em seguida, adicione o tema ao app.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Criar seu tema com tokens
A cor dinâmica usa tokens de design para tornar a atribuição de cores a diferentes elementos da interface mais simples e consistente. Um token de design permite atribuir semanticamente papéis de cor, em vez de um valor definido, a diferentes elementos de uma interface. Isso permite que o sistema tonal do seu app tenha mais flexibilidade, escalonabilidade e consistência, além de ser particularmente útil ao projetar para temas claros e escuros e cores dinâmicas.
Os snippets a seguir mostram exemplos de temas claros e escuros, além de um XML de cores correspondente, depois da aplicação de tokens de cores dinâmicas.
Tema claro
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Tema escuro
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
XML de cores
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Para mais informações:
Para saber mais sobre cores dinâmicas, cores personalizadas e gerar tokens, consulte a página Cores dinâmicas do Material 3.
Para gerar a paleta de cores básica e as cores e o tema do app, confira o Material Theme Builder, disponível em um plug-in do Figma ou no navegador (links em inglês).
Para saber mais sobre como o uso de esquemas de cores pode melhorar a acessibilidade no seu app, consulte a página do Material 3 sobre Acessibilidade do sistema de cores (link em inglês).
Reter cores personalizadas ou da marca
Se o app tiver cores personalizadas ou de marca que você não quer mudar de acordo com as preferências do usuário, adicione cada uma delas à medida que cria o esquema de cores. Por exemplo:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Como alternativa, você pode usar o Material Theme Builder para importar outras
cores que estendem seu esquema de cores, criando um sistema de cores unificado.
Com essa opção, use HarmonizedColors para mudar o tom das cores
personalizadas. Isso atinge um equilíbrio visual e contraste acessível quando combinado
com cores geradas pelo usuário. Ela ocorre durante a execução com
applyToContextIfAvailable().
Consulte as orientações do Material 3 sobre como harmonizar cores personalizadas (link em inglês).
Aplicar cores dinâmicas aos ícones e widgets adaptativos
Além de ativar os temas de cores dinâmicas no app, também é possível oferecer suporte aos temas de cores dinâmicas para widgets no Android 12 e para ícones adaptativos a partir do Android 13.