Material que você projeta

A partir do Android 12, o design do Material You se concentra na expressão e na fluidez no sistema operacional Android, com o objetivo de ajudar os usuários a criar e possuir uma experiência única e coesa que atenda às suas necessidades. Como parceiro do Android, você é encorajado a incorporar o material que você cria em seus dispositivos Android nas seguintes áreas:

  • cor dinâmica
  • Movimento
  • Widgets

cor dinâmica

A cor dinâmica é a peça central do design do Material You e uma parte fundamental da estratégia plurianual do Android para trazer personalização mais simples e profunda para seus usuários de uma forma que nenhum outro dispositivo faz. Material Você oferece:

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

  • As oportunidades dos OEMs do Android para continuar inovando a interface do usuário do sistema e os aplicativos próprios de uma maneira alinhada com o hardware e a cor, marca e forma da marca.

Para aproveitar as cores dinâmicas, use a história de extração de cores do Android 12 Material You como uma parte fundamental da sua oferta de software aos usuários. No dispositivo, use a lógica de extração de cores que está no AOSP, especialmente a lógica que pega um único papel de parede ou cor de origem do tema e a envia por meio de 65 APIs de cores. Para requisitos de cores dinâmicas, consulte Usando cores dinâmicas .

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

Fluxo de material que você colore

Figura 1. Material Você fluxo de cores dinâmico

  1. O usuário altera o papel de parede ou tema por meio do seletor OEM.

  2. O usuário seleciona um dos seguintes:

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

    • Novo papel de parede + tema. Quando selecionada, a lógica AOSP seleciona automaticamente uma única cor de origem do papel de parede selecionado.

  3. O AOSP expande a cor de origem única em 5 paletas tonais com 13 variantes de cores tonais cada, de acordo com a lógica AOSP, que então preenche os 65 atributos de cores.

  4. A interface do usuário do aplicativo usa os 65 atributos de cores de maneira consistente em todo o ecossistema de aplicativos Android. Você é incentivado a usar a mesma paleta de cores para a interface do usuário do sistema do dispositivo e aplicativos específicos do OEM.

correções do Android 12

Para obter a lógica de ponta a ponta para extração de cores de papel de parede e permitir que o dispositivo preencha as APIs de 65 cores de maneira consistente com o ecossistema, inclua os seguintes patches em sua implementação do Android 12:

Especificando cores personalizadas no ThemePicker

Se você estiver usando o aplicativo AOSP ThemePicker, o aplicativo WallpaperPicker mostrará a seção de cores se ambas as condições a seguir forem atendidas:

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

Formato do APK do esboço

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

Este APK deve conter apenas recursos, detalhando as cores básicas disponíveis e seus nomes.

O stub deve 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>

Neste arquivo, cada item dentro de color_bundles tem um nome distinto, 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. Eles podem ser traduzidos adicionando as strings traduzidas correspondentes nos diretórios res/values- language code .

Os valores de cores 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 conjuntos de cores, deve haver uma entrada color_primary_ item e uma entrada color_secondary_ item (e ambas as cores devem ser da mesma cor). Os valores dessas entradas color são os códigos de cores reais para cada cor a ser exibida na seção de cores básicas .

Etapa 1: criar uma experiência de tema para o usuário

O seletor de temas é onde os usuários se envolvem com os novos recursos de personalização do Material You e podem escolher entre opções de cores ou predefinições. Como ele se adapta ao seu produto e à demografia do usuário, você pode oferecer aos usuários uma personalização mais rica e uma experiência de cores por meio do uso de um seletor de tema ou papel de parede .

  • Ao usar um seletor de papel de parede, a extração da cor do papel de parede é ativada por padrão. No entanto, você pode fazer algumas personalizações no seletor para fornecer mais opções ao usuário.

Etapa 2: extrair a cor do papel de parede em uma cor de origem

Para habilitar a extração de cores de papel de parede, escolha os patches do Android 12 listados acima (essa funcionalidade será habilitada por padrão em uma versão futura do AOSP). A lógica AOSP que aciona a extração do papel de parede 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 AOSP não modificada para garantir uma experiência de desenvolvimento consistente.

Por padrão, a lógica escolhe a cor de frequência mais alta 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 para uso, uma cor de origem (extraída do papel de parede ou de uma predefinição escolhida pelo usuário) deve ter um valor mínimo de croma CAM16 de 5; isso garante que a cor de origem não seja afetada por tons escuros sutis quando for convertida de uma única cor para 65 cores tonais e permaneça representativa da escolha do usuário. Para ler e modificar cores no CAM16, use Cam#fromInt ou Cam#getInt .

Usando uma paleta de cores não dinâmica Para dispositivos que não oferecem suporte à extração de cores de papel de parede, você ainda pode garantir que os aplicativos do Google e de terceiros que oferecem suporte a cores dinâmicas tenham uma ótima aparência fazendo o seguinte:

  • Use a paleta de materiais padrão desativando flag_monet em frameworks/base/packages/SystemUI/res/values/flags.xml .
  • Garanta que os usuários ainda possam personalizar seu sistema operacional usando um seletor de tema 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 5 paletas tonais exclusivas (acento 1-3, neutro 1-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 consistência do desenvolvedor, as 5 paletas tonais (accent1, acentua2, acentua3, neutro1, neutro2) e suas 13 cores correspondentes devem ser baseadas na cor de origem única com as respectivas alterações nos valores de croma e matiz do CAM16, conforme descrito abaixo:

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

Etapa 4: use cores dinâmicas em aplicativos e interface do sistema

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

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

  • Use cores de destaque para elementos de primeiro plano em aplicativos e na interface do usuário 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 aplicativos 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 obter mais informações sobre como o Material You mapeia as cores e como as APIs são usadas no SysUI, consulte Recursos adicionais .

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

Construir para Android 13 e superior

A partir do Android 13, android.theme.customization.accent_color está obsoleto. Um novo atributo android.theme.customization.theme_style foi adicionado para oferecer suporte a diferentes variantes de cores. Atualmente, temos quatro variantes na base de código da seguinte forma:

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.

Estes são enviados para Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , conforme mostrado no JSON abaixo:

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

Construir para Android 12 e inferior

Ao usar um seletor de tema personalizado, o dispositivo deve 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 da cor do papel de parede (Etapa 2) e expande diretamente a cor de origem fornecida em 65 atributos de cor (Etapa 3).

Etapa 6: arquivar um ticket

Além da integração do sistema, você precisa abrir um ticket e nos informar sua marca ( Build.MANUFACTURER ). Como a maioria dos aplicativos de terceiros está usando os componentes de material para Android para mostrar cores dinâmicas, estamos usando uma lista de permissões codificada para informar quais dispositivos integraram o recurso de paletas tonais de cores dinâmicas .

Movimento

O movimento fluido faz com que os dispositivos pareçam modernos e premium. Para construir e manter a confiança e a felicidade do desenvolvedor, overscroll e ripple são duas partes principais do movimento fluido que precisam parecer consistentes.

Usando overscroll em seu sistema operacional

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

Material que você sobrescreve

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

Para consistência do desenvolvedor, certifique-se de que o efeito geral de overscroll em seus dispositivos seja semelhante ao seguinte:

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

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

Usando overscroll em aplicativos originais

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

  • Para suportar a rolagem estendida, atualize para as bibliotecas mais recentes:

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

  • Para layouts personalizados que usam EdgeEffect , considere as seguintes alterações de UX:

    • Com a rolagem estendida, os usuários não devem interagir com o conteúdo do layout enquanto ele está sendo esticado. Os usuários devem manipular apenas o próprio trecho e não, por exemplo, poder apertar um botão no conteúdo.

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

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

    • Ao trabalhar com rolagem aninhada, se o conteúdo for esticado, o alongamento deve consumir o movimento de toque antes do conteúdo aninhado, ou então o aninhamento pode rolar quando o dedo muda de direção em vez de liberar o alongamento.

Para obter detalhes sobre overscroll, consulte Animar um gesto de rolagem .

Usando ripple (retorno de toque) em seu sistema operacional

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

Material que Você Ondula

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

Para previsibilidade do desenvolvedor e para fornecer uma ótima experiência ao usuário, certifique-se de que o efeito cascata em seus dispositivos seja semelhante ao exemplo mostrado acima. Embora você não precise executar nenhuma etapa de integração específica para dar suporte a efeitos de ondulação, você deve testar o efeito em seus dispositivos para verificar quaisquer regressões não intencionais introduzidas em sua implementação.

Widgets

Widgets são componentes-chave de um dispositivo Android. O Android 12 inclui novas APIs e recursos de API que devem ser compatíveis com todos os OEMs.

Recursos adicionais

Uso de cores SysUI

(acento1 = A1, acento2 = A2, acento3 = A3, neutro1 = N1, neutro2 = N2)

Material que você usa para colorir

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

Atualizações de atributos de cores da biblioteca de materiais

O material atualizará seus atributos de tema na próxima versão, criando funções de cores usadas para fornecer cores a exibições específicas.

papel de cor Atributo de tema do Android Tema claro
Cor Dinâmica		 Tema escuro
Cor Dinâmica
primário cor primária system_accent1_600 system_accent1_200
No Primário colorOnPrimary system_accent1_0 system_accent1_800
Secundário corSecundária system_accent2_600 system_accent2_200
No secundário colorOnSecondary system_accent2_0 system_accent2_800
Erro colorError N/A (vermelho_600) N/A (vermelho_200)
Em caso de erro colorOnError N/A (branco) N/A (vermelho_900)
Fundo android: fundo colorido system_neutral1_10 system_neutral1_900
No fundo corNofundo system_neutral1_900 system_neutral1_100
Superfície corSuperfície system_neutral1_10 system_neutral1_900
Na superfície colorOnSurface system_neutral1_900 system_neutral1_100

O material atualizará seus atributos de estados com os seguintes ponteiros:

papel de cor Atributo de tema do Android Tema claro
Cor Dinâmica		 Tema escuro
Cor Dinâmica
Conteúdo do Estado Primário colorPrimaryStateContent system_accent1_700 system_accent1_200
Camada de estado primário 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 primário colorOnPrimaryStateContent system_accent1_0 system_accent1_800
Na camada de estado primário colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
No conteúdo do estado secundário colorOnSecondaryStateContent system_accent2_0 system_accent2_800
Na Camada de Estado Secundário colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
No conteúdo do estado do contêiner principal colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
Na Camada de Estado do Contêiner Primário colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
No 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 do 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 na superfície colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
Na Camada de Estado da Superfície colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
Conteúdo do estado variante na superfície colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
Camada de estado 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

Depois que um usuário altera um papel de parede, a extração de cores é feita automaticamente ou precisa ser acionada de algum lugar?

Com os patches do Android 12 , a extração da cor do papel de parede está ativada por padrão .

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

Para papéis de parede ao vivo ou papéis de parede de vídeo , poderíamos saber quando a extração de cores tira a cor da tela? Alguns usuários podem querer as cores do último quadro, pois ele é exibido na maioria das vezes.

A extração de cores é acionada quando o usuário define o papel de parede ou após um ciclo de energia da tela (em resposta a WallpaperEngine#notifyColorsChanged ). O último evento WallpaperColors (do live wallpaper) é aplicado após o usuário desligar a tela e ligá-la novamente.

Seletor de tema/papel de parede

Como habilito o seletor de tema para mostrar várias cores de origem para os usuários escolherem além da cor de maior frequência? Existe uma maneira de obter essas cores da lógica de extração?

Sim. Em seu seletor de temas, você pode usar ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Há um recurso em nomes de 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.

Existe uma maneira de usar o aplicativo Google Wallpaper com os recursos de extração e seleção de cores ativados?

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

Entre em contato com seu TAM para obter mais detalhes.

O Google pode compartilhar o aplicativo ou o código-fonte para que os OEMs possam implementar sua própria versão da visualização dinâmica de cores em seu menu de configurações, que é semelhante à seção de visualização mostrada no aplicativo seletor de papel de parede do Google?

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

A tela de visualização do papel de parede é WallpaperSectionController .

Como implementar a visualização após alterar a cor, conforme mostrado no aplicativo Google Wallpaper?

O aplicativo seletor de papel de parede espera que um ContentProvider esteja disponível no Launcher (um iniciador baseado Launcher3 o possui). A visualização é fornecida por GridCustomizationsProvider no Launcher, que deve ser referenciado nos metadados principais da Activity do Launcher para que o papel de parede e o aplicativo de estilo sejam lidos. Tudo isso é implementado no Launcher3 do AOSP e está disponível para os OEMs.