A cor dinâmica, adicionada no Android 12, permite que os usuários personalizem os dispositivos para se alinhar tonalmente com o esquema de cores do plano de fundo pessoal ou com uma cor selecionada no seletor de plano de fundo.
Para aproveitar esse recurso, adicione a API DynamicColors, que
aplica esse tema ao app ou à atividade para personalizar mais o app
para o usuário.
Esta página inclui instruções para implementar as 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 seguintes etapas para gerar esquemas de cores com base no 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ária, Secundária, Terciária, Neutra e Variante neutra.
Figura 2. Exemplo de extração de cor de origem de uma imagem de 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 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 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 executando 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 no Android 13. Cada variante tem uma receita exclusiva que transforma as cores básicas do plano de fundo de um usuário usando a vibração e a rotação da tonalidade. O exemplo a seguir mostra um único esquema de cores expresso por essas quatro variantes.
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 a cor dinâmica no nível do app ou da atividade. Para 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.DynamicC>olors.Day<Night&>quot;
...
/style
Criar seu tema com tokens
A cor dinâmica usa tokens de design para simplificar e tornar mais consistente a atribuição de cores a diferentes elementos da interface. 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 tonal do app tenha mais flexibilidade, escalonabilidade e consistência, sendo particularmente útil 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 cor correspondente após a aplicação de tokens de cores dinâmicas.
Tema claro
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Lig>ht.No<ActionBar"
item> name="colorPrimary"<;@col>or/md<_theme_light_primary/item
> item name="colorOnPrim<ary&q>uot;@<color/md_theme_light_onPrimary/it>em
item name="colorPrimaryCon<taine>r&quo<t;@color/md_theme_light_primaryCont>ainer/item
item name="colorOnPr<imary>Conta<iner"@color/md_th>eme_light_onPrimaryContaine<r/ite>m
< item name="colorEr>ror"@color/md_theme_ligh<t_err>or/it<em
item name="colorOnE>rror"@color/md_theme_light_onEr<ror/i>tem
< item name="colorErrorCont>ainer"@color/md_theme_light_error<Conta>iner/<item
item name="colo>rOnErrorContainer"@color/md_t<heme_>light<_onErrorContainer/item
> item name="colorOnBac<kgrou>nd&qu<ot;@color/md_theme_light_o>nBackground/item
item name=<">;colorSurfa<ce&quo>t<;@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.Da>rk.No<ActionBar"
item> name="colorPrimary&quo<t;@co>lor/m<d_theme_dark_primary/item
> item name="colorOnPri<mary&>quot;<@color/md_theme_dark_onPrimary/it>em
item name="colorPrimaryCo<ntain>er&qu<ot;@color/md_theme_dark_primaryCont>ainer/item
item name="colorOnP<rimar>yCont<ainer"@color/md_t>heme_dark_onPrimaryContain<er/it>em
< item name="colorE>rror"@color/md_theme_da<rk_er>ror/i<tem
item name="colorOn>Error"@color/md_theme_dark_onE<rror/>item
< item name="colorErrorCon>tainer"@color/md_theme_dark_erro<rCont>ainer</item
item name="col>orOnErrorContainer"@color/md<_them>e_dar<k_onErrorContainer/item
> item name="colorOnB<ackgr>ound&<quot;@color/md_theme_dark_>onBackground/item
item nam<e=&qu>ot;colorSu<rface&>q<uot;@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_pri>mary&qu<ot;#67>50A<4/color
color name="md_theme_l>ight_on<Primar>y&q<uot;#FFFFFF/color
color name="md_them>e_light<_prima>ryC<ontainer"#EADDFF/color
color name=">;md_the<me_lig>ht_<onPrimaryContainer"#21005D/c>olor
<color >nam<e="md_theme_light_error"#>B3261E/<color
> c<olor name="md_theme_light_onError&quo>t;#FFFF<FF/col>or
< color name="md_theme_light_errorConta>iner&qu<ot;#F9>DED<C/color
color name="md_theme>_light_<onErro>rCo<ntainer"#410E0B/color
color na>me=&quo<t;md_t>hem<e_light_surface"#FFFBFE/color
color> name=&<quot;m>d_t<heme_light_onSurface"#1C1B1F/>color
< color na<me="md_theme_light_surfaceVaria>nt"<;#E7E0>EC/<color
color name="md_theme_dark_prim>ary&quo<t;#D0B>CFF</color
color name="md_theme_dark_onPri>mary&qu<ot;#38>1E7<2/color
color name="md_theme_>dark_pr<imaryC>ont<ainer"#4F378B/color
color name=>"m<d_them>e_d<ark_onPrimaryContainer"#EADDFF/color
c>olor na<me=&qu>ot;<md_theme_dark_secondary"#CCC2DC>/color
< colo>r n<ame="md_theme_dark_onSecondary">#332D41</color>
< color na>me="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 base e as cores e o tema do seu 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.
Manter cores personalizadas ou da marca
Se o app tiver cores personalizadas ou da marca que você não quer mudar com as preferências do usuário, adicione-as individualmente ao criar o esquema de cores. Exemplo:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Lig>ht.NoActionBar"
< ...
i>tem name="hom<e_lam>p"@color/home_<yellow>/<item
> ...
/style
/resources
Colors.xml
<resources>
<color name="home_ye>llow&qu<ot;#E8>D<655/color
>/resources
Como alternativa, use 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 um contraste acessível quando combinado
com cores geradas pelo usuário. Isso ocorre no tempo de execução com
applyToContextIfAvailable().
Consulte as orientações do Material 3 sobre como harmonizar cores personalizadas.
Aplicar cores dinâmicas aos ícones adaptáveis e widgets
Além de ativar a tematização com cores dinâmicas no app, você também pode oferecer suporte a tematização com cores dinâmicas para widgets a partir do Android 12 e para ícones adaptáveis a partir do Android 13.