Cores dinâmicas, que foram adicionadas no Android 12, permitem que os usuários personalizem os dispositivos para se alinhar o tom com o esquema de cores do plano de fundo pessoal ou em uma cor escolhida no seletor de plano de fundo.
Você pode aproveitar esse recurso adicionando a API DynamicColors, que
aplica esse tema ao seu app ou à sua atividade para deixar 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 segue as etapas abaixo para gerar esquemas de cores com base na cor plano de fundo.
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 ainda mais cinco cores principais Conhecidas como primária, secundária, terciária, neutra e neutra variante.
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 único plano de fundo para derivar cinco cores diferentes comuns, que oferece 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 a partir do Android 12, com mais variantes adicionadas no Android 13. Para exemplo, um usuário com um smartphone Pixel com o Android 13 selecionaria uma variante na página Papéis de parede e de estilo, conforme mostrado na Figura 4.
O Android 12 adicionou a variante Tonal Spot, seguida pela variante Neutral, Vibrant Tonal e Expressive no Android 13. Cada variante tem um receita que transforma as cores iniciais do plano de fundo de um usuário com vitalidade e girar a tonalidade. O exemplo a seguir mostra um único esquema de cores expressos por essas quatro variantes de cor.
O app ainda vai usar os mesmos tokens para acessar essas cores. Para mais detalhes sobre tokens, consulte Criar seu tema com tokens nesta página.
Começar a usar o Compose
Se você está criando uma interface com o Compose, confira Temas do Material Design no Compose para detalhes sobre como aplicar cores dinâmicas às suas app.
Começar a usar o Views
Você pode aplicar cores dinâmicas no nível do app ou da atividade. Para isso, chame
applyToActivitiesIfAvailable() para registrar um
ActivityLifeCycleCallbacks ao 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 aproveita os tokens de design para fazer a atribuição de cores diferentes elementos de IU mais simplificados e consistentes. Com um token de design, atribuir semanticamente funções de cor, em vez de um valor definido, a diferentes elementos de uma interface. Isso permite que o sistema tonal do app tenha mais flexibilidade, escalonabilidade e consistência, e é particularmente útil quando projetando pensando em temas claros e escuros e cores dinâmicas.
Os snippets a seguir mostram exemplos de temas claros e escuros. um XML de cor correspondente, depois de aplicar 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, marque o Material Theme Builder, disponível por meio de uma 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).
Reter cores personalizadas ou da marca
Se o app tiver cores personalizadas ou de marca que você não quiser alterar com o preferências do usuário, você pode adicioná-las individualmente à medida que desenvolve sua cor esquema. 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
cores que estendem seu esquema de cores, criando assim um sistema de cores unificado.
Com essa opção, use HarmonizedColors para alterar o tom de
cores. Isso atinge um equilíbrio visual e contraste acessível quando combinado
com cores geradas pelo usuário. Ela ocorre em tempo de 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 a aplicação de temas de cores dinâmicas no app, também é possível oferecer Temas de cor dinâmicos para widgets começando em Android 12 e para ícones adaptativos começando em Android 13