A cor dinâmica, adicionada no Android 12, permite que os usuários personalizem os dispositivos para que se alinhem tonalmente ao esquema de cores do plano de fundo pessoal ou usando uma cor selecionada no seletor de plano de fundo.
Você pode aproveitar esse recurso adicionando a API DynamicColors, que
aplica esse tema ao app ou atividade para torná-lo 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 executa as etapas abaixo para gerar esquemas de cores usando o plano de fundo de um usuário.
O sistema detecta as cores principais na imagem de plano de fundo selecionada e extrai uma cor da origem.
O sistema usa essa cor de origem para extrapolar ainda mais cinco cores principais, conhecidas como Primária, Secundária, Tertiária, Neutro e Variante neutra.
Figura 2. Exemplo de extração de cor de origem da imagem do plano de fundo e extração para cinco cores principais O sistema interpreta cada cor principal em uma paleta tonal de 13 tons.
Figura 3. Exemplo de geração de uma determinada paleta tonal. O sistema usa esse único plano de fundo para derivar cinco esquemas de cores diferentes, que fornece a base para qualquer tema claro e escuro.
Como as variantes de cor são mostradas no dispositivo de um usuário
Os usuários podem selecionar variantes de cores das cores extraídas do plano de fundo e diferentes temas do Android 12 em diante, 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 iniciais do plano de fundo de um usuário com a vitalidade e a rotação da tonalidade. O exemplo abaixo mostra um único esquema de cores expresso usando essas quatro variantes de cores.
Seu app ainda usa os mesmos tokens para acessar essas cores. Para saber mais sobre tokens, consulte Criar seu tema com tokens nesta página.
Começar a usar o Compose
Se você estiver criando sua interface com o Compose, confira Temas do Material Design no Compose para ver detalhes sobre como aplicar cores dinâmicas ao app.
Começar a usar as visualizações
Você pode aplicar cores dinâmicas no nível do app ou da atividade. Para fazer isso, chame
applyToActivitiesIfAvailable() para registrar um
ActivityLifeCycleCallbacks no 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 Dynamic Color 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 funções de cor, em vez de um valor definido, a diferentes elementos de uma interface. Isso permite que o sistema de tons do app tenha mais flexibilidade, escalonabilidade e consistência, além de ser particularmente eficiente ao projetar para temas claros e escuros e cores dinâmicas.
Os snippets a seguir mostram exemplos de temas claro e escuro e um XML de cores correspondente depois da aplicação dos 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 geração de tokens, confira 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.
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).
Manter as cores personalizadas ou da marca
Caso seu app tenha cores personalizadas ou da marca que você não quer mudar de acordo com as preferências do usuário, adicione-as individualmente ao criar 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 o esquema de cores, criando assim um sistema de cores unificado.
Com essa opção, use HarmonizedColors para mudar o tom das cores
personalizadas. Isso alcança um equilíbrio visual e um contraste acessível quando combinado
com cores geradas pelo usuário. Ele ocorre durante a execução com
applyToContextIfAvailable().
Consulte as orientações do Material 3 sobre harmonização de cores personalizadas (link em inglês).
Aplicar cores dinâmicas aos ícones e widgets adaptáveis
Além de ativar os temas de cores dinâmicas no app, também é possível oferecer suporte ao tema de cores dinâmicas para widgets a partir do Android 12 e para ícones adaptativos a partir do Android 13.