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

Testar o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a trabalhar com cores dinâmicas no Compose.

A cor dinâmica, que foi adicionada no Android 12, permite que os usuários personalizem os dispositivos para que eles se alinhem ao esquema de cores do plano de fundo pessoal ou a 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 personalizar o app para o usuário.

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

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 a seguir para gerar esquemas de cores com base no 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 de origem.

  2. O sistema usa essa cor de origem para extrapolar cinco cores principais conhecidas como Primária, Secundária, Terciária, Neutra e Variante Neutra.

    Exemplo de extração de cor da fonte
    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 de tons de 13 tons.

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

Como as variantes de cor aparecem no dispositivo de um usuário

Os usuários podem selecionar variantes de cores de 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.

Figura 4. Como selecionar variantes de cor nas configurações do plano de fundo (mostrado em um dispositivo Pixel)

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

Figura 5. Exemplo de como as variantes de cores diferentes aparecem em um único dispositivo

O app ainda usa 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 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.

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}
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 um 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 app tenha mais flexibilidade, escalonabilidade e consistência, e é particularmente poderoso ao projetar 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>

Colors.xml

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).

Manter cores personalizadas ou da marca

Se o app tem cores personalizadas ou da marca que você não quer mudar de acordo com as preferências do usuário, é possível adicioná-las individualmente ao criar o esquema de cores. 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 alcança um equilíbrio visual e contraste acessível quando combinado com cores geradas pelo usuário. Ela ocorre durante a execução com applyToContextIfAvailable().

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

Consulte as orientações do Material 3 sobre como harmonizar cores personalizadas.

Aplicar cores dinâmicas aos ícones e widgets adaptativos

Além de ativar a aplicação de temas de cores dinâmicas no app, você também pode oferecer suporte a temas de cores dinâmicas para widgets a partir do Android 12 e para ícones adaptativos a partir do Android 13.