Permitir que os usuários personalizem a experiência de cores no app

As cores dinâmicas, que foram adicionadas no Android 12, permitem 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 esses temas ao seu app ou atividade para torná-lo mais personalizado para o usuário.

Figura 1. Exemplos de esquemas de cores tonais derivados de planos de fundo diferentes

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 fazer um 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.

  1. O sistema detecta as cores principais na imagem de plano de fundo selecionada e extrai uma cor da origem.

  2. O sistema usa essa cor de origem para extrapolar ainda mais cinco cores principais, conhecidas como primária, secundária, terciária, neutra e variante neutra.

    Exemplo de extração de cor de origem
    Figura 2. Exemplo de extração de cor de origem da imagem do plano de fundo e extração para cinco cores principais
  3. O sistema interpreta cada cor principal em uma paleta tonal de 13 tons.

    Exemplo de geração de uma determinada paleta tonal
    Figura 3. Exemplo de geração de determinadas paletas tonais
  4. O sistema usa esse plano de fundo único para derivar cinco esquemas de cores diferentes, o que fornece a base para qualquer tema claro e escuro.

Como as variantes de cor são mostradas no dispositivo do usuário

Os usuários podem selecionar variantes de cores usando as cores extraídas do plano de fundo e temas diferentes 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 seleciona uma variante nas configurações de Plano de fundo e estilo, conforme mostrado na Figura 4.

Figura 4. Selecionar variantes de cor nas configurações de plano de fundo (mostradas em um dispositivo Pixel)

O Android 12 adicionou a variante Tonal Spot, seguida das variantes Neutral, Vibrant Tonal e Expressive. Cada variante tem uma receita única que transforma as cores iniciais do plano de fundo de um usuário usando a vibração e a rotação da tonalidade. O exemplo abaixo mostra um único esquema de cores expresso usando essas quatro variantes de cores.

Figura 5. Exemplo de como diferentes variantes de cor ficam em um único dispositivo

O app ainda usa os mesmos tokens para acessar essas cores. Para ver mais detalhes sobre tokens, consulte Criar seu tema com tokens nesta página.

Começar a usar o Compose

Se você estiver criando a interface com o Compose, confira Temas do Material Design no Compose para ver detalhes sobre como aplicar Cores dinâmicas ao app.

Comece a usar as visualizações

Você pode aplicar as 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

O Dynamic Color aproveita os 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 IU. Isso permite que o sistema de tons do app tenha mais flexibilidade, escalonabilidade e consistência, além de ser particularmente eficiente ao projetar temas claros e escuros e cores dinâmicas.

Os snippets a seguir mostram exemplos de temas claro e escuro, além de um XML de cor correspondente, após a 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 geração de tokens, consulte a página Cores dinâmicas do Material 3.

  • Para gerar a paleta de cores de base 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).

Manter as cores personalizadas ou da marca

Caso seu app tenha cores personalizadas ou de marca que você não quer mudar de acordo com as preferências do usuário, é possível adicioná-las individualmente à medida que cria seu 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 ampliam o esquema de cores, criando 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. Ocorre durante a execução com applyToContextIfAvailable().

Figura 6. Exemplo de harmonização de cores personalizadas

Consulte as orientações do Material 3 sobre harmonização de cores personalizadas.

Aplicar cor dinâmica aos ícones e widgets adaptáveis

Além de ativar os temas de cores dinâmicas no app, também é possível oferecer suporte a temas de cores dinâmicas para widgets do Android 12 em diante e para ícones adaptativos a partir do Android 13.