Design do Material You

A partir do Android 12, o design do Material You se concentra na expressão e na fluidez do SO Android, com o objetivo de ajudar os usuários a criar e ter uma experiência única e coesa, adequada às necessidades deles. Como parceiro do Android, recomendamos que você incorpore o Material You design aos seus dispositivos Android nas seguintes áreas:

  • Cores dinâmicas
  • Motion
  • Widgets

Cores dinâmicas

A cor dinâmica é o centro do design do Material You e uma parte importante da estratégia de vários anos do Android para oferecer uma personalização mais simples e profunda aos usuários de uma forma que nenhum outro dispositivo oferece. O Material You oferece:

  • Usuários e desenvolvedores têm uma história consistente e rica de personalização, disponível em qualquer dispositivo Android.

  • Os OEMs do Android têm a oportunidade de continuar inovando a interface do sistema e os apps próprios de acordo com o hardware e a cor, a marca e o formato da marca deles.

Para aproveitar a cor dinâmica, use a história de extração de cores do Material You do Android 12 como uma parte importante da oferta de software para os usuários. No dispositivo, use a lógica de extração de cores do AOSP, principalmente aquela que usa uma única cor de origem do plano de fundo ou tema e a gera usando 65 APIs de cores. Para saber mais sobre os requisitos de cores dinâmicas, consulte Como usar cores dinâmicas.

O fluxo de cores dinâmico completo inclui quatro etapas, conforme ilustrado abaixo:

Fluxo de cores do Material You

Figura 1. Fluxo de cores dinâmicas do Material You

  1. O usuário muda o plano de fundo ou o tema pelo seletor OEM.

  2. O usuário seleciona uma das seguintes opções:

    • Tema do dispositivo. Quando selecionado, o Android escolhe automaticamente uma única cor de origem que atenda aos requisitos.

    • Novo plano de fundo + tema. Quando selecionada, a lógica do AOSP escolhe automaticamente uma única cor de origem do plano de fundo selecionado.

  3. O AOSP expande a cor de origem única em cinco paletas de tons com 13 variantes de cor tonal cada, de acordo com a lógica do AOSP, que preenche os 65 atributos de cor.

  4. A interface do app usa os 65 atributos de cor de maneira consistente em todo o ecossistema de apps Android. Recomendamos que você use a mesma paleta de cores para a IU do sistema do dispositivo e apps específicos do OEM.

Patches do Android 12

Para ter a lógica completa de extração de cores do plano de fundo e permitir que o dispositivo preencha as APIs de 65 cores de maneira consistente com o ecossistema, inclua os seguintes patches na implementação do Android 12:

Especificar cores personalizadas no ThemePicker

Se você estiver usando o app AOSP ThemePicker, ele vai mostrar a seção de cores se as duas condições abaixo forem atendidas:

  • flag_monet em frameworks/base/packages/SystemUI/res/values/flags.xml é true.
  • Um APK de rascunho do sistema com o nome do pacote é definido em themes_stub_package no arquivo packages/apps/ThemePicker/res/values/override.xml.

Formato de stub do APK

Uma versão de exemplo deste APK pode ser encontrada em packages/apps/ThemePicker/themes.

Esse APK vai conter apenas recursos, detalhando as cores básicas disponíveis e os nomes delas.

O stub precisa conter um arquivo XML em res/xml com o seguinte formato:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

Nesse arquivo, cada item em color_bundles tem um nome diferente, desde que as strings abaixo sejam nomeadas bundle_name_item.

Deve haver uma string bundle_name_item para cada cor, com um nome descritivo para cada cor. Elas podem ser traduzidas adicionando as strings traduzidas correspondentes aos diretórios res/values-language code.

Os valores de cor reais podem estar no mesmo XML ou em um arquivo XML de recursos separado com o seguinte formato:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Para cada item na matriz de pacotes de cores, é necessário ter uma entrada color_primary_item e uma color_secondary_item (e ambas as cores precisam ser iguais). Os valores dessas entradas color são os códigos de cores reais de cada cor que será mostrada na seção cor básica.

Etapa 1: criar uma experiência de aplicação de temas para os usuários

O seletor de temas é onde os usuários interagem com os novos recursos de personalização do Material You e podem escolher entre opções de cores ou predefinições. Como ele se encaixa no seu produto e no grupo demográfico de usuários, você pode oferecer aos usuários uma experiência de personalização e cores mais rica usando um seletor de temas ou um seletor de planos de fundo.

  • Quando você usa um seletor de plano de fundo, a extração de cores de plano de fundo fica ativada por padrão. No entanto, é possível fazer algumas personalizações no seletor para oferecer mais opções ao usuário.

Etapa 2: extrair a cor do plano de fundo para uma cor de origem

Para ativar a extração de cores do plano de fundo, escolha os patches do Android 12 listados acima. Essa funcionalidade será ativada por padrão em uma versão futura do AOSP. A lógica do AOSP que aciona a extração de plano de fundo começa em frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java, em ThemeOverlayController#mOnColorsChangedListener, por meio de WallpaperManager#onWallpaperColorsChanged. Recomendamos usar a lógica do AOSP não modificada para garantir uma experiência de desenvolvimento consistente.

Por padrão, a lógica escolhe a cor de maior frequência que é adequada para uso. Para aproveitar outras cores de origem retornadas pelo algoritmo e apresentar essas cores aos usuários no seletor de temas, use ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Para ser adequada ao uso, uma cor de origem (extraida do plano de fundo ou de uma predefinição escolhida pelo usuário) precisa ter um valor de croma CAM16 mínimo de 5. Isso garante que a cor de origem não seja afetada por tons escuros sutis quando é convertida de uma única cor para 65 cores tonais e permanece representativa da escolha do usuário. Para ler e modificar cores no CAM16, use Cam#fromInt ou Cam#getInt.

Como usar uma paleta de cores não dinâmica Para dispositivos que não oferecem suporte à extração de cores do plano de fundo, você ainda pode garantir que os apps do Google e de terceiros com suporte a cores dinâmicas tenham uma ótima aparência fazendo o seguinte:

  • Use a paleta padrão do Material Design desativando flag_monet em frameworks/base/packages/SystemUI/res/values/flags.xml.
  • Os usuários ainda podem personalizar o SO usando um seletor de temas predefinido.

Etapa 3: expandir a cor de origem em APIs de cores

Usando a cor de origem única derivada da etapa anterior, o Android gera cinco paletas tonais exclusivas (acento 1 a 3, neutro 1 a 2), cada paleta incluindo 13 cores, e cada cor incluindo diferentes valores de luminância (0 a 1000), para um total de 65 cores. A lógica fornecida nos patches do Android 12 implementa essa expansão de cores corretamente. Os detalhes fornecidos abaixo descrevem a implementação.

Para manter a consistência do desenvolvedor, as cinco paletas tonais (accent1, acento2, acento3, neutro1, neutro2) e as 13 cores correspondentes precisam ser baseadas na única cor de origem com as respectivas mudanças nos valores de chroma e matiz CAM16, conforme escrito abaixo:

O CTS inclui testes para validar chamadas de API de luminância e matiz. Para executar, use atest SystemPalette.

Etapa 4: usar cores dinâmicas em apps e na interface do sistema

Depois que cores dinâmicas são definidas em um dispositivo, os apps seguem as diretrizes do Material Design para usar as cores. As diretrizes do Material Design serão lançadas em material.io até 26 de outubro de 2021 para adoção por apps de terceiros. Para a interface do sistema e apps próprios, recomendamos integrar cores dinâmicas em toda a experiência do usuário de uma forma que se encaixe no seu hardware e marca e ajude a diferenciar seus dispositivos.

Para orientações gerais sobre cores dinâmicas, consulte:

  • Use cores de destaque para elementos em primeiro plano em apps e na interface do sistema:

    @android:color/system_accent1_0 … 1000 // most-used foreground color group
@android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
@android:color/system_accent3_0 … 1000 // playful, analogous color

  • Use cores neutras para elementos de plano de fundo em apps e na interface do sistema:

    @android:color/system_neutral1_0 … 1000 // most-used background color group
@android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces

Para mais informações sobre como o Material You mapeia cores e como as APIs são usadas no SysUI, consulte Recursos adicionais.

Etapa 5: adicionar opções de cores dinâmicas na implementação do AOSP WallpaperPicker

Criar para o Android 13 e versões mais recentes

No Android 13 e versões mais recentes, o uso de android.theme.customization.accent_color foi descontinuado. Um novo atributo android.theme.customization.theme_style foi adicionado para oferecer suporte a diferentes variantes de cor. No momento, temos quatro variantes na base de código:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Elas são enviadas para Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, conforme mostrado no JSON abaixo:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Criar para o Android 12 e versões anteriores

Ao usar um seletor de tema personalizado, o dispositivo precisa enviar uma cor de origem válida para Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES fornecendo um arquivo JSON no seguinte formato (em que 746BC1 é um exemplo de cor de origem válida):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Fazer isso pula a extração de cores do plano de fundo (Etapa 2) e expande diretamente a cor de origem fornecida em 65 atributos de cor (Etapa 3).

Etapa 6: registrar um tíquete

Além da integração do sistema, você precisa registrar um tíquete e nos informar o nome da sua marca (Build.MANUFACTURER). Como a maioria dos apps de terceiros usa os Componentes do Material Design para Android para mostrar cores dinâmicas, estamos usando uma lista de permissões fixada no código para informar quais dispositivos integraram o recurso Paletas tonais de cores dinâmicas.

Motion

O movimento fluido deixa os dispositivos com uma aparência moderna e premium. Para criar e manter a confiança e a satisfação dos desenvolvedores, o overscroll e o ripple são duas partes importantes do movimento fluido que precisam ter uma aparência e uma sensação consistentes.

Como usar a rolagem estendida no SO

O Android 12 inclui um movimento de rolagem mais responsivo e dinâmico na forma de um alongamento de visualização, mostrado quando o usuário tenta rolar além da borda de uma lista. Veja um exemplo abaixo:

Overscroll do Material You

Figura 2. Efeito de rolagem do Android 12, conforme mostrado nas Configurações

Para manter a consistência para os desenvolvedores, verifique se o efeito de rolagem geral nos dispositivos é semelhante ao seguinte:

  • Em dispositivos que retornam "true" para ActivityManager.isHighEndGfx(), o efeito de rolagem excessiva é um alongamento não linear da tela (como mostrado acima).

  • Em dispositivos de baixa performance, o efeito de alongamento é simplificado para um alongamento linear (para reduzir a carga no sistema).

Como usar o rolamento excessivo em apps próprios

Ao usar visualizações personalizadas, talvez seja necessário ajustar alguns apps e a interface do sistema que usam o efeito de alongamento.

  • Para oferecer suporte ao rolagem estendida, faça upgrade para as bibliotecas mais recentes:

    • androidx.recyclerview:recyclerview:1.3.0-alpha01 por RecyclerView
    • androidx.core:core:1.7.0-alpha01 para NestedScrollView e EdgeEffectCompat
    • androidx.viewpager:viewpager:1.1-alpha01 por ViewPager

  • Para layouts personalizados que usam EdgeEffect, considere as seguintes mudanças de UX:

    • Com a rolagem esticada, os usuários não podem interagir com o conteúdo do layout enquanto ele está sendo esticado. Os usuários precisam manipular apenas o próprio esticamento e não, por exemplo, pressionar um botão no conteúdo.

    • Quando os usuários tocam no conteúdo enquanto a animação EdgeEffect está acontecendo, eles precisam capturar a animação e ter permissão para manipular o estilo. O valor de pull atual está disponível em EdgeEffectCompat.getDistance().

    • Para manipular o valor de pull e retornar a quantidade consumida, use onPullDistance(). Isso permite que os desenvolvedores façam a transição suave do alongamento para a rolagem, à medida que o dedo alonga o conteúdo além da posição inicial.

    • Ao trabalhar com a rolagem aninhada, se o conteúdo for esticado, o estilo vai consumir o movimento de toque antes do conteúdo aninhado. Caso contrário, o aninhamento poderá rolar quando o dedo mudar de direção, em vez de liberar o alongamento.

Para saber mais sobre a rolagem excessiva, consulte Animar um gesto de rolagem.

Como usar o efeito de ondulação (feedback tátil) no SO

O Android 12 inclui uma ondulação de toque mais suave e sutil para fornecer feedback aos usuários ao tocar para baixo.

Ondulação do Material You

Figura 3. Efeito cascata do Android 12, com uma animação de preenchimento mais suave

Para que os desenvolvedores possam prever o comportamento e oferecer uma ótima experiência do usuário, verifique se o efeito cascata nos seus dispositivos é semelhante ao exemplo mostrado acima. Embora você não precise realizar etapas de integração específicas para oferecer suporte a efeitos de propagação, teste o efeito nos seus dispositivos para verificar se há regressões não intencionais introduzidas na implementação.

Widgets

Os widgets são componentes essenciais de um dispositivo Android. O Android 12 inclui novas APIs e recursos de API que todos os OEMs precisam oferecer suporte.

Outros recursos

Uso de cores do SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Uso de cores do Material You

Figura 4. Uso de cores dinâmicas na interface do sistema

Atualizações de atributos de cor da biblioteca do Material

O Material Design vai atualizar os atributos de tema na próxima versão, criando funções de cor usadas para fornecer cor a visualizações específicas.

Função de cor Atributo de tema do Android Tema claro
Cores dinâmicas		 Tema escuro
Cor dinâmica
Principal colorPrimary system_accent1_600 system_accent1_200
On Primary colorOnPrimary system_accent1_0 system_accent1_800
Secundário colorSecondary system_accent2_600 system_accent2_200
On Secondary colorOnSecondary system_accent2_0 system_accent2_800
Erro Errodecor N/D (vermelho_600) N/A (red_200)
On Error colorOnError N/A (branca) N/A (red_900)
Contexto Android:colorBackground system_neutral1_10 system_neutral1_900
On Background colorOnBackground system_neutro1_900 sistema_neutro1_100
Superfície colorSurface system_neutral1_10 system_neutral1_900
On Surface colorOnSurface system_neutral1_900 system_neutral1_100

O Material vai atualizar os atributos de estado com as seguintes instruções:

Função de cor Atributo de tema do Android Tema claro
Cores dinâmicas		 Tema escuro
Cor dinâmica
Conteúdo do estado principal colorPrimaryStateContent system_accent1_700 system_accent1_200
Camada de estado principal colorPrimaryStateLayer system_accent1_600 system_accent1_300
Conteúdo do estado secundário colorSecondaryStateContent system_accent2_700 system_accent2_200
Camada de estado secundário colorsecondaryStateLayer system_accent2_600 system_accent2_300
No conteúdo do estado principal colorOnPrimaryStateContent system_accent1_0 system_accent1_800
Na camada de estado primária colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
Sobre o conteúdo do estado secundário colorOnSecundário system_accent2_0 system_accent2_800
Na camada de estado secundário colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Sobre o conteúdo do estado do contêiner principal colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
Na camada de estado do contêiner principal colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
Sobre o conteúdo do estado do contêiner secundário colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
Na camada de estado do contêiner secundário colorOnsecondaryContainerStateLayer system_accent2_900 system_accent2_900
No conteúdo de estado do contêiner terciário colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
Na camada de estado do contêiner terciário colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
Conteúdo do estado da superfície colorOnSurfaceStateContent system_neutral1_900 sistema_neutro1_100
Camada de estado On Surface colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
Conteúdo do estado da variante na plataforma colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
Camada de estado da variante na superfície colorOnSurfaceVariantStateLayer system_neutral2_700 system_neutral2_200
Conteúdo do estado de erro colorErrorStateContent red800 red200

Perguntas frequentes

Extração de cor

Quando um usuário muda um plano de fundo, a extração de cores é feita automaticamente ou precisa ser acionada de algum lugar?

Com os patches do Android 12, a extração de cores do plano de fundo está ativada por padrão.

ThemeOverlayController.java aciona a lógica com ThemeOverlayController#mOnColorsChangedListener e WallpaperManager#onWallpaperColorsChanged.

Para planos de fundo interativos ou planos de fundo em vídeo, é possível saber quando a extração de cor extrai a cor da tela? Alguns usuários podem querer as cores do último frame, já que ele aparece na maior parte do tempo.

A extração de cor é acionada quando o usuário define o plano de fundo ou após uma reinicialização da tela (em resposta a WallpaperEngine#notifyColorsChanged). O último evento WallpaperColors (do plano de fundo interativo) é aplicado depois que o usuário desativa e ativa a tela novamente.

Seletor de tema/plano de fundo

Como faço para ativar o seletor de temas para mostrar várias cores de origem para os usuários escolherem a cor de maior frequência? Há uma maneira de extrair essas cores da lógica de extração?

Sim. No seletor de temas, é possível usar ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Há um recurso nos nomes do Pixel como Ícone temático. Está incluído nos três patches que você compartilhou? Como os OEMs podem implementar isso?

Não. Os ícones temáticos estão na versão Beta e não estão disponíveis no Android 12.

É possível usar o app Plano de fundo do Google com os recursos de extração e seleção de cores ativados?

Sim. Os recursos podem ser implementados na versão mais recente do app Plano de fundo do Google seguindo as etapas de integração descritas anteriormente nesta página.

Entre em contato com seu TAM para mais detalhes.

O Google pode compartilhar o app ou o código-fonte para que os OEMs implementem a própria versão da visualização de cores dinâmicas no menu de configurações, que é semelhante à seção de visualização mostrada no app de seleção de plano de fundo do Google?

As classes principais que renderizam a visualização são WallpaperPicker2 e Launcher3.

A tela de visualização do plano de fundo é WallpaperSectionController.

Como implementar a visualização depois de mudar a cor, conforme mostrado no app Papel de parede do Google?

O app de escolha de plano de fundo espera que um ContentProvider esteja disponível no acesso rápido (um acesso rápido baseado em Launcher3 tem isso). A visualização é fornecida por GridCustomizationsProvider no Launcher, que precisa ser referenciado nos metadados da atividade principal do Launcher para que o plano de fundo e o app de estilo possam lê-lo. Tudo isso é implementado no Launcher3 do AOSP e está disponível para OEMs.