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:
Figura 1. Material Você fluxo de cores dinâmico
O usuário altera o papel de parede ou tema por meio do seletor OEM.
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.
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.
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:
Obrigatório
Fortemente recomendado
- Corrige a condição de corrida ao definir sysprops de cor de inicialização.
- Permitir que as sobreposições sejam notificadas sobre alterações de tema
- Correção da condição de corrida ao definir sysprops de cor de inicialização (rodada 2)
- Mova FeatureFlags para o pacote de sinalizadores.
- Implemente corretamente o suporte a temas multiusuário
- Corrige a opção de cor de papel de parede especificada ausente após a reinicialização
- Corrigir erro de computação de tonalidade terciária
- Não permitir que aplicativos em segundo plano alterem o tema
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
emframeworks/base/packages/SystemUI/res/values/flags.xml
étrue
. - Um APK stub do sistema com o nome do pacote é definido em
themes_stub_package
no arquivopackages/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
emframeworks/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:
- Croma: use "16"
- Matiz: igual à fonte
- Croma: use "32"
- Matiz: girar em 60 graus positivos
- Croma: use "4"
- Matiz: igual à fonte
- Croma: use "8"
- Matiz: igual à fonte
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:
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
paraRecyclerView
-
androidx.core:core:1.7.0-alpha01
paraNestedScrollView
eEdgeEffectCompat
-
androidx.viewpager:viewpager:1.1-alpha01
paraViewPager
-
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 emEdgeEffectCompat.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.
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.
Em seu sistema operacional, ofereça suporte a APIs de desenvolvedor relacionadas a layouts de widgets, dimensionamento e parâmetros de software (por exemplo, tamanho de canto arredondado). Sua implementação deve suportar corretamente os widgets ao fornecer parâmetros por meio de APIs e garantir que os widgets sejam dimensionáveis e configuráveis pelo usuário.
Em seus aplicativos, aproveite os novos recursos da API para atualizar ou criar novos widgets primários sempre que possível. Para todos os widgets de aplicativos primários sob sua alçada, execute a lista de verificação do desenvolvedor abaixo.
- A prioridade é baseada nas recomendações da plataforma.
- Para obter detalhes sobre uma recomendação, siga o link na coluna Alterar.
Área Mudar Prioridade de implementação Melhore a experiência em casa Adicione visualizações escalonáveis P1 Adicionar uma descrição do widget P1 Facilite a personalização de widgets P2 (opcional) Ativar transições mais suaves P0 Evite trampolins de transmissão P0 Adote diretrizes de widgets Melhore os tamanhos e layouts dos widgets P2 Aplicar cores dinâmicas P0 Implementar cantos arredondados P0 Adicionar novos botões compostos P2 Simplifique o código do widget existente Simplifique as coleções do RemoteView P2 Simplifique o tempo de execução do RemoteView P2
Recursos adicionais
Uso de cores SysUI
(acento1 = A1, acento2 = A2, acento3 = A3, neutro1 = N1, neutro2 = N2)
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.