Material que diseñas

A partir de Android 12, el diseño de Material You se centra en la expresión y la fluidez en el sistema operativo Android, con el objetivo de ayudar a los usuarios a crear y poseer una experiencia única y cohesiva que se adapte a sus necesidades. Como socio de Android, se le anima a incorporar Material que usted diseña en sus dispositivos Android en las siguientes áreas:

  • color dinámico
  • Movimiento
  • Widgets

color dinámico

El color dinámico es la pieza central del diseño de Material You y una parte clave de la estrategia de varios años de Android para brindar una personalización más simple y profunda a sus usuarios de una manera que no lo hacen otros dispositivos. Material que ofrece:

  • Usuarios y desarrolladores una historia consistente y rica de personalización disponible en cualquier dispositivo Android.

  • Los OEM de Android tienen la oportunidad de continuar innovando la interfaz de usuario del sistema y las aplicaciones propias de una manera que esté en línea con el color, la marca y la forma de su hardware y marca.

Para aprovechar el color dinámico, use la historia de extracción de color Material You de Android 12 como una parte clave de su oferta de software para los usuarios. En el dispositivo, use la lógica de extracción de color que está en AOSP, especialmente la lógica que toma un solo fondo de pantalla o color de origen de tema y lo genera a través de API de 65 colores. Para conocer los requisitos de color dinámico, consulte Uso de color dinámico .

El flujo de color dinámico completo incluye cuatro pasos, como se ilustra a continuación:

Material que Color Flujo

Figura 1. Flujo de color dinámico de Material You

  1. El usuario cambia el fondo de pantalla o el tema a través del selector de OEM.

  2. El usuario selecciona uno de los siguientes:

    • Tema del dispositivo. Cuando se selecciona, Android elige automáticamente un solo color de origen que cumple con los requisitos.

    • Nuevo fondo de pantalla + tema. Cuando se selecciona, la lógica AOSP selecciona automáticamente un único color de origen del fondo de pantalla seleccionado.

  3. AOSP expande el color de origen único en 5 paletas tonales con 13 variantes de color tonal cada una, según la lógica AOSP, que luego completa los 65 atributos de color.

  4. La interfaz de usuario de la aplicación utiliza los atributos de 65 colores de una manera coherente en todo el ecosistema de aplicaciones de Android. Se recomienda utilizar la misma paleta de colores para la interfaz de usuario del sistema del dispositivo y las aplicaciones específicas del OEM.

parches de android 12

Para obtener la lógica integral para la extracción del color del fondo de pantalla y permitir que el dispositivo llene las API de 65 colores de manera coherente con el ecosistema, incluya los siguientes parches en su implementación de Android 12:

Especificación de colores personalizados en ThemePicker

Si está utilizando la aplicación AOSP ThemePicker, la aplicación WallpaperPicker muestra la sección de color si se cumplen las dos condiciones siguientes:

  • flag_monet en frameworks/base/packages/SystemUI/res/values/flags.xml es true .
  • Se define un APK de código auxiliar del sistema con el nombre del paquete en themes_stub_package en el archivo packages/apps/ThemePicker/res/values/override.xml .

Formato APK de resguardo

Puede encontrar una versión de muestra de este APK en packages/apps/ThemePicker/themes .

Este APK debe contener solo recursos, detallando los colores básicos disponibles y sus nombres.

El resguardo debe contener un archivo XML en res/xml con el siguiente 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>

En este archivo, cada item dentro de color_bundles tiene un nombre distinto, siempre que las cadenas a continuación se llamen bundle_name_ item .

Debe haber una cadena bundle_name_ item para cada color, con un nombre descriptivo para cada color. Estos se pueden traducir agregando las cadenas traducidas correspondientes en los directorios res/values- language code .

Los valores de color reales pueden estar en el mismo XML o en un archivo XML de recursos separado con el siguiente 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 elemento de la matriz de paquetes de colores, debe haber una entrada color_primary_ item y color_secondary_ item (y ambos colores deben ser del mismo color). Los valores para estas entradas color son los códigos de color reales para cada color que se mostrarán en la sección de colores básicos .

Paso 1: Cree una experiencia de tematización de usuario

El selector de temas es donde los usuarios interactúan con las nuevas capacidades de personalización de Material You y potencialmente eligen entre opciones de color o ajustes preestablecidos. Como se adapta a su producto y a la demografía del usuario, puede ofrecer a los usuarios una personalización más rica y una experiencia de color mediante el uso de un selector de temas o un selector de papel tapiz .

  • Cuando se utiliza un selector de papel tapiz, la extracción del color del papel tapiz está activada de manera predeterminada. Sin embargo, puede realizar algunas personalizaciones en el selector para proporcionar más opciones al usuario.

Paso 2: extraiga el color del papel tapiz en un color de origen

Para habilitar la extracción del color del fondo de pantalla, seleccione los parches de Android 12 enumerados anteriormente (esta funcionalidad se habilitará de forma predeterminada en una versión futura de AOSP). La lógica de AOSP que activa la extracción del fondo de pantalla comienza en frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java , en ThemeOverlayController#mOnColorsChangedListener , a través de WallpaperManager#onWallpaperColorsChanged . Recomendamos utilizar la lógica AOSP sin modificar para garantizar una experiencia de desarrollo coherente.

De forma predeterminada, la lógica elige el color de mayor frecuencia que sea adecuado para su uso. Para aprovechar otros colores de origen devueltos por el algoritmo y presentar esos colores a los usuarios en el selector de temas, use ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Para ser adecuado para su uso, un color de origen (ya sea extraído de un fondo de pantalla o de un ajuste preestablecido elegido por el usuario) debe tener un valor de croma CAM16 mínimo de 5; esto garantiza que el color de origen no se vea afectado por sutiles tonos oscuros cuando se convierte de un solo color a 65 colores tonales y sigue siendo representativo de la elección del usuario. Para leer y modificar colores en CAM16, use Cam#fromInt o Cam#getInt .

Uso de una paleta de colores no dinámica Para los dispositivos que no admiten la extracción del color del fondo de pantalla, aún puede asegurarse de que las aplicaciones de Google y las aplicaciones de terceros que admiten el color dinámico se vean bien haciendo lo siguiente:

  • Use la paleta de materiales predeterminada al deshabilitar flag_monet en frameworks/base/packages/SystemUI/res/values/flags.xml .
  • Asegúrese de que los usuarios aún puedan personalizar su sistema operativo utilizando un selector de temas predeterminado.

Paso 3: expanda el color de origen en API de color

Utilizando el color de origen único derivado del paso anterior, Android genera 5 paletas tonales únicas (acento 1-3, neutral 1-2), cada paleta incluye 13 colores y cada color incluye diferentes valores de luminancia (0 a 1000), para un total de 65 colores. La lógica provista en los parches de Android 12 implementa correctamente esta expansión de color; los detalles proporcionados a continuación describen la implementación.

Para mantener la consistencia del revelador, las 5 paletas tonales (accent1, accent2, accent3, neutral1, neutral2) y sus 13 colores correspondientes deben basarse en el color de origen único con los cambios respectivos en los valores cromáticos y de tono de CAM16 como se indica a continuación:

CTS incluye pruebas para validar las llamadas API de luminancia y tono. Para ejecutar, use atest SystemPalette .

Paso 4: use colores dinámicos en las aplicaciones y la interfaz de usuario del sistema

Después de configurar los colores dinámicos en un dispositivo, las aplicaciones siguen las pautas de materiales para utilizar los colores. Las pautas de materiales deben publicarse en material.io antes del 26 de octubre de 2021 para que las adopten las aplicaciones de terceros. Para la interfaz de usuario del sistema y las aplicaciones propias, recomendamos enfáticamente integrar colores dinámicos en toda la experiencia del usuario de una manera que se ajuste a su hardware y marca y lo ayude a diferenciar sus dispositivos.

Para obtener una guía general de color dinámico, consulte lo siguiente:

  • Use colores de acento para los elementos de primer plano en las aplicaciones y la interfaz de usuario del 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 colores neutros para los elementos de fondo en las aplicaciones y la interfaz de usuario del sistema:

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

Para obtener más información sobre cómo Material You asigna los colores y cómo se utilizan las API en SysUI, consulte Recursos adicionales .

Paso 5: agregue opciones de color dinámico en su implementación AOSP WallpaperPicker

Construido para Android 13 y superior

A partir de Android 13, android.theme.customization.accent_color está obsoleto. Se agregó un nuevo atributo android.theme.customization.theme_style para admitir diferentes variantes de color. Actualmente tenemos cuatro variantes en el código base de la siguiente manera:

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.

Estos se envían a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , como se muestra en JSON a continuación:

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

Compilación para Android 12 y versiones anteriores

Al usar un selector de tema personalizado, el dispositivo debe enviar un color de origen válido a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES proporcionando un archivo JSON en el siguiente formato (donde 746BC1 es un ejemplo de color de origen válido):

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

Al hacer esto, se salta la extracción del color del papel tapiz (Paso 2) y se expande directamente el color de origen provisto en 65 atributos de color (Paso 3).

Paso 6: Presente un boleto

Además de la integración del sistema, debe presentar un ticket y hacernos saber su nombre de marca ( Build.MANUFACTURER ). Dado que la mayoría de las aplicaciones de terceros utilizan los componentes de material para Android para mostrar colores dinámicos, utilizamos una lista de permitidos codificada para indicar qué dispositivos han integrado la función de paletas tonales de colores dinámicos .

Movimiento

El movimiento fluido hace que los dispositivos se sientan modernos y premium. Para generar y mantener la confianza y la felicidad de los desarrolladores, el overscroll y el ripple son dos partes clave del movimiento fluido que deben verse y sentirse consistentes.

Uso de overscroll en su sistema operativo

Android 12 incluye un movimiento de overscroll dinámico y con mayor capacidad de respuesta en forma de extensión de vista, que se muestra cuando el usuario intenta desplazarse más allá del borde de una lista. A continuación se muestra un ejemplo:

Material que sobredesplaza

Figura 2. Efecto de desplazamiento excesivo de Android 12, como se muestra en Configuración

Para mantener la coherencia del desarrollador, asegúrese de que el efecto general de desplazamiento excesivo en sus dispositivos sea similar al siguiente:

  • En los dispositivos que devuelven verdadero para ActivityManager.isHighEndGfx() , el efecto de desplazamiento excesivo es un estiramiento no lineal de la pantalla (como se muestra arriba).

  • En dispositivos de bajo rendimiento, el efecto de estiramiento se simplifica a un estiramiento lineal (para reducir la carga en el sistema).

Uso de overscroll en aplicaciones propias

Al usar vistas personalizadas, es posible que deba modificar algunas aplicaciones y la interfaz de usuario del sistema que usan el efecto de estiramiento.

  • Para admitir el overscroll extendido, actualice a las bibliotecas más recientes:

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

  • Para diseños personalizados que usan EdgeEffect , considere los siguientes cambios de UX:

    • Con el overscroll estirado, los usuarios no deben interactuar con el contenido del diseño mientras se estira. Los usuarios deben manipular solo el tramo en sí y no, por ejemplo, poder presionar un botón en el contenido.

    • Cuando los usuarios tocan el contenido mientras se produce la animación EdgeEffect , deben captar la animación y poder manipular el estiramiento. El valor de extracción actual está disponible en EdgeEffectCompat.getDistance() .

    • Para manipular el valor de extracción y devolver la cantidad consumida, usa onPullDistance() . Esto permite a los desarrolladores pasar sin problemas de estirar a desplazar mientras el dedo estira el contenido más allá de la posición inicial.

    • Cuando se trabaja con el desplazamiento anidado, si el contenido se estira, el estiramiento debe consumir el movimiento táctil antes que el contenido anidado o, de lo contrario, el anidamiento puede desplazarse cuando el dedo cambia de dirección en lugar de soltar el estiramiento.

Para obtener detalles sobre el desplazamiento excesivo, consulte Animar un gesto de desplazamiento .

Uso de ondulación (retroalimentación táctil) en su sistema operativo

Android 12 incluye una ondulación táctil más suave y sutil para proporcionar comentarios a los usuarios al presionar hacia abajo.

Material que ondas

Figura 3. Efecto dominó de Android 12, con una animación de relleno más suave

Para la previsibilidad del desarrollador y para brindar una excelente experiencia de usuario, asegúrese de que el efecto dominó en sus dispositivos sea similar al ejemplo que se muestra arriba. Si bien no necesita realizar ningún paso de integración específico para admitir los efectos dominó, debe probar el efecto en sus dispositivos para comprobar si se han introducido regresiones no deseadas en su implementación.

Widgets

Los widgets son componentes clave de un dispositivo Android. Android 12 incluye nuevas API y capacidades de API que todos los OEM deberían admitir.

Recursos adicionales

Uso del color SysUI

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

Material que usas para colorear

Figura 4. Uso de colores dinámicos en la interfaz de usuario del sistema

Actualizaciones de atributos de color de la biblioteca de materiales

El material actualizará sus atributos de tema en la próxima versión mediante la creación de roles de color que se utilizan para proporcionar color a vistas específicas.

Rol de color Atributo de tema de Android Tema de luz
Color dinámico		 Tema oscuro
Color dinámico
Primario colorprimario system_accent1_600 system_accent1_200
en primaria colorOnPrimary system_accent1_0 system_accent1_800
Secundario colorsecundario system_accent2_600 system_accent2_200
en secundaria colorOnSecundario system_accent2_0 system_accent2_800
Error colorError N/D (rojo_600) N/D (rojo_200)
en caso de error colorOnError N/D (blanco) N/D (rojo_900)
Fondo Android: fondo de color system_neutral1_10 system_neutral1_900
en el fondo color de fondo system_neutral1_900 system_neutral1_100
Superficie colorSuperficie system_neutral1_10 system_neutral1_900
En la superficie colorSobreSuperficie system_neutral1_900 system_neutral1_100

El material actualizará sus atributos de estado con los siguientes punteros:

Rol de color Atributo de tema de Android Tema de luz
Color dinámico		 Tema oscuro
Color dinámico
Contenido de estado primario colorPrimaryStateContent system_accent1_700 system_accent1_200
Capa de estado principal colorPrimaryStateLayer system_accent1_600 system_accent1_300
Contenido estatal secundario colorSecondaryStateContent system_accent2_700 system_accent2_200
Capa de estado secundaria colorSecondaryStateLayer system_accent2_600 system_accent2_300
Sobre el contenido del estado primario colorOnPrimaryStateContent system_accent1_0 system_accent1_800
En la capa de estado principal colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
Sobre el contenido estatal secundario colorOnSecondaryStateContent system_accent2_0 system_accent2_800
En la capa de estado secundaria colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Sobre el contenido del estado del contenedor principal colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
En la capa de estado del contenedor principal colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
Sobre el contenido del estado del contenedor secundario colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
En la capa de estado del contenedor secundario colorOnSecondaryContainerStateLayer system_accent2_900 system_accent2_900
Sobre el contenido del estado del contenedor terciario colorOnTerciarioContenedorEstadoContenido system_accent3_900 system_accent3_900
En la capa de estado del contenedor terciario colorOnTerciarioContenedorEstadoCapa system_accent3_900 system_accent3_900
En el contenido del estado de la superficie colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
En la capa de estado de superficie colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
En contenido de estado de variante de superficie colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
En la capa de estado de variante de superficie colorOnSurfaceVariantStateLayer system_neutral2_700 system_neutral2_200
Contenido del estado de error colorErrorStateContent rojo800 rojo200

preguntas frecuentes

Extracción de color

Una vez que un usuario cambia un fondo de pantalla, ¿la extracción de color se realiza automáticamente o debe activarse desde algún lugar?

Con los parches de Android 12 , la extracción del color del fondo de pantalla está activada de forma predeterminada .

ThemeOverlayController.java activa la lógica con ThemeOverlayController#mOnColorsChangedListener y WallpaperManager#onWallpaperColorsChanged .

Para Live Wallpapers o Video Wallpapers , ¿podríamos saber cuándo Color Extraction toma el color de la pantalla? Algunos usuarios pueden querer los colores del último cuadro ya que se muestra en la mayor parte del tiempo.

La extracción de color se activa cuando el usuario establece el fondo de pantalla o después de un ciclo de encendido de la pantalla (en respuesta a WallpaperEngine#notifyColorsChanged ). El último evento WallpaperColors (del fondo de pantalla en vivo) se aplica después de que el usuario apaga la pantalla y la vuelve a encender.

Selector de tema/fondo de pantalla

¿Cómo habilito el selector de temas para que muestre múltiples colores de origen para que los usuarios elijan el color de mayor frecuencia? ¿Hay alguna manera de obtener esos colores de la lógica de extracción?

Sí. En su selector de temas, puede usar ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Hay una función en los nombres de píxeles como icono temático . ¿Está incluido en los tres parches que habéis compartido? ¿Cómo pueden los OEM implementar eso?

No. Los íconos temáticos están en Beta y no están disponibles en Android 12.

¿Hay alguna forma de usar la aplicación Google Wallpaper con las funciones de extracción y selección de color habilitadas?

Sí. Las funciones se pueden implementar en la última versión de la aplicación Google Wallpaper siguiendo los pasos de integración descritos anteriormente en esta página.

Comuníquese con su TAM para obtener más detalles.

¿Puede Google compartir la aplicación o el código fuente para que los OEM puedan implementar su propia versión de la vista previa de color dinámica en su menú de configuración, que se parece a la sección de vista previa que se muestra en la aplicación de selección de papel tapiz de Google?

Las clases principales que representan la vista previa son WallpaperPicker2 y Launcher3 .

La pantalla de vista previa del fondo de pantalla es WallpaperSectionController .

¿Cómo implementar la vista previa después de cambiar el color, como se muestra en la aplicación Google Wallpaper?

La aplicación del selector de fondos de pantalla espera que un ContentProvider esté disponible desde el Lanzador (un lanzador basado en Launcher3 lo tiene). La vista previa la proporciona GridCustomizationsProvider en Launcher, que debe estar referenciada en los metadatos de la actividad principal de Launcher para que la aplicación de estilo y fondo de pantalla pueda leerla. Todo esto está implementado en Launcher3 de AOSP y está disponible para los OEM.