Diseño de Material You

A partir de Android 12, el diseño de Material You se enfoca en la expresión y la fluidez en el SO 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, te recomendamos que incorpores el diseño de Material You en tus 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 ofrecer una personalización más simple y profunda a sus usuarios de una manera que ningún otro dispositivo hace. Material You ofrece lo siguiente:

  • A los usuarios y desarrolladores, una historia de personalización coherente y rica disponible en cualquier dispositivo Android.

  • Oportunidades para los OEMs de Android de seguir innovando la IU del sistema y las apps propias de una manera que se alinee con el hardware y el color, la marca y la forma de la marca.

Para aprovechar el color dinámico, usa la historia de extracción de color de Material You de Android 12 como una parte clave de tu oferta de software a los usuarios. En el dispositivo, usa la lógica de extracción de colores del AOSP, en especial la lógica que toma un solo fondo de pantalla o color de origen del tema y lo envía a través de 65 APIs de color. Para conocer los requisitos de color dinámico, consulta Cómo usar Dynamic Color.

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

Flujo de colores de Material You

Figura 1: Flujo de colores dinámicos 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 una de las siguientes opciones:

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

    • Nuevo fondo de pantalla y tema Cuando se selecciona, la lógica de AOSP elige automáticamente un color de fuente único 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 de AOSP, que luego propaga los 65 atributos de color.

  4. La IU de la app usa los 65 atributos de color de una manera coherente en todo el ecosistema de apps para Android. Te recomendamos que uses la misma paleta de colores para la IU del sistema del dispositivo y las apps específicas de OEM.

Parches de Android 12

Para obtener la lógica de extremo a extremo para la extracción de colores de fondo de pantalla y permitir que el dispositivo complete las APIs de 65 colores de una manera coherente con el ecosistema, incluye los siguientes parches en tu implementación de Android 12:

Especifica colores personalizados en ThemePicker

Si usas la app de ThemePicker de AOSP, la app de WallpaperPicker muestra la sección de color si se cumplen ambas de las siguientes condiciones:

  • flag_monet en frameworks/base/packages/SystemUI/res/values/flags.xml es true.
  • Un APK de stub del sistema con el nombre del paquete se define en themes_stub_package en el archivo packages/apps/ThemePicker/res/values/override.xml.

Formato del APK auxiliar

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

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

El stub 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 que se indican a continuación se llamen bundle_name_item.

Debe haber una cadena bundle_name_item para cada color, con un nombre descriptivo para cada uno. Para traducirlos, agrega las cadenas traducidas correspondientes a los directorios res/values-language code.

Los valores de color reales pueden estar en el mismo archivo en formato XML o en un archivo en formato XML de recursos separados 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 artículo del array de paquetes de colores, debe haber una entrada color_primary_item y una color_secondary_item (y ambos colores deben ser del mismo color). Los valores de estas entradas color son los códigos de color reales de cada color que se mostrarán en la sección color básico.

Paso 1: Crea una experiencia de temas para el usuario

En el selector de temas, los usuarios interactúan con las nuevas capacidades de personalización de Material You y pueden elegir entre opciones de color o ajustes predeterminados. A medida que se adapta a tu producto y a los datos demográficos de los usuarios, puedes ofrecer a los usuarios una experiencia de personalización y color más enriquecida mediante un selector de temas o un selector de fondos de pantalla.

  • Cuando se usa un selector de fondo de pantalla, la extracción de colores del fondo de pantalla está activada de forma predeterminada. Sin embargo, puedes personalizar el selector para proporcionarle más opciones al usuario.

Paso 2: Extrae el color del fondo de pantalla a un color de origen

Para habilitar la extracción de colores de fondo de pantalla, selecciona los parches de Android 12 que se mencionaron anteriormente (esta funcionalidad se habilitará de forma predeterminada en una versión futura de AOSP). La lógica del 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, por medio de WallpaperManager#onWallpaperColorsChanged. Te recomendamos que uses la lógica de AOSP sin modificar para garantizar una experiencia de desarrollo coherente.

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

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

Cómo usar una paleta de colores no dinámica En el caso de los dispositivos que no admiten la extracción de colores de fondo de pantalla, puedes asegurarte de que las apps de Google y de terceros que admiten colores dinámicos se vean bien siguiendo estos pasos:

  • Para usar la paleta de Material predeterminada, inhabilita flag_monet en frameworks/base/packages/SystemUI/res/values/flags.xml.
  • Asegúrate de que los usuarios puedan personalizar su SO con un selector de temas predeterminado.

Paso 3: Expande el color de origen a las APIs de color

Con el color de fuente única derivado del paso anterior, Android genera 5 paletas de tonos únicas (acento 1-3, neutro 1-2), cada una con 13 colores y cada color con diferentes valores de luminancia (de 0 a 1000), para un total de 65 colores. La lógica proporcionada en los parches de Android 12 implementa esta expansión de color correctamente. Los detalles que se proporcionan a continuación describen la implementación.

Para lograr la coherencia entre los desarrolladores, las 5 paletas de tonos (accent1, accent2, accent3, neutral1 y neutral2) y sus 13 colores correspondientes deben basarse en el color de fuente único con los cambios correspondientes a los valores de croma y tono de CAM16, como se indica a continuación:

El CTS incluye pruebas para validar las llamadas a la API de luminancia y tono. Para ejecutarla, usa atest SystemPalette.

Paso 4: Usa colores dinámicos en las apps y la IU del sistema

Después de configurar los colores dinámicos en un dispositivo, las apps siguen los lineamientos de Material para usar los colores. Los lineamientos de Material se lanzarán en material.io antes del 26 de octubre de 2021 para que las apps de terceros los adopten. En el caso de la IU del sistema y las apps propias, te recomendamos que integres colores dinámicos en toda la experiencia del usuario de una manera que se adapte a tu hardware y marca, y que te ayude a diferenciar tus dispositivos.

Para obtener orientación general sobre los colores dinámicos, consulta lo siguiente:

  • Usa colores de contraste para los elementos en primer plano de las apps y la IU 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

  • Usa colores neutros para los elementos de fondo en las apps y la IU 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 colores y cómo se usan las APIs en SysUI, consulta Recursos adicionales.

Paso 5: Agrega opciones de colores dinámicos en tu implementación de WallpaperPicker de AOSP

Compila para Android 13 y versiones posteriores

A partir de Android 13, android.theme.customization.accent_color dejó de estar disponible. Se agregó un nuevo atributo android.theme.customization.theme_style para admitir diferentes variantes de color. Actualmente, tenemos cuatro variantes en la base de código, como se indica a continuación:

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"
}

Cómo compilar para Android 12 y versiones anteriores

Cuando se usa un selector de temas 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 (en el que 746BC1 es un ejemplo de color de origen válido):

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

De esta manera, se omite la extracción de colores del fondo de pantalla (paso 2) y se expande directamente el color de la fuente proporcionado en 65 atributos de color (paso 3).

Paso 6: Envía un ticket

Además de la integración del sistema, debes enviar un ticket y proporcionarnos el nombre de tu marca (Build.MANUFACTURER). Como la mayoría de las apps de terceros usan componentes de Material para Android para mostrar colores dinámicos, estamos usando una lista de entidades permitidas codificada para indicar qué dispositivos tienen integrada la función Paletas tonales de colores dinámicos.

Movimiento

Los movimientos fluidos hacen que los dispositivos se vean modernos y premium. Para generar y mantener la confianza y la satisfacción de los desarrolladores, el desplazamiento y las ondas son dos partes clave del movimiento fluido que deben tener una apariencia y una sensación coherentes.

Cómo usar el desplazamiento excesivo en tu SO

Android 12 incluye un movimiento de desplazamiento horizontal más dinámico y responsivo en forma de estiramiento 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:

Sobredesplazamiento de Material You

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

Para mantener la coherencia de los desarrolladores, asegúrate de que el efecto general de sobredesplazamiento en tus dispositivos sea similar al siguiente:

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

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

Cómo usar el desplazamiento excesivo en apps propias

Cuando uses vistas personalizadas, es posible que debas modificar algunas apps y la IU del sistema que usen el efecto de estiramiento.

  • Para admitir el desplazamiento horizontal, actualiza 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, ten en cuenta los siguientes cambios de UX:

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

    • Cuando los usuarios tocan el contenido mientras se produce la animación de EdgeEffect, deben capturar 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 mostrar el importe consumido, usa onPullDistance(). Esto permite a los desarrolladores realizar una transición fluida del estiramiento al desplazamiento a medida que el dedo estira el contenido más allá de la posición inicial.

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

Para obtener detalles sobre el sobredesplazamiento, consulta Cómo animar un gesto de desplazamiento.

Cómo usar el efecto de onda (retroalimentación táctil) en tu SO

Android 12 incluye una onda táctil más suave y sutil para brindar comentarios a los usuarios cuando presionan hacia abajo.

Ondulaciones de Material You

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

Para garantizar la previsibilidad de los desarrolladores y brindar una excelente experiencia del usuario, asegúrate de que el efecto dominó en tus dispositivos sea similar al ejemplo anterior. Si bien no necesitas realizar ningún paso de integración específico para admitir efectos dominó, debes probar el efecto en tus dispositivos para verificar si hay regresiones no deseadas en tu implementación.

Widgets

Los widgets son componentes clave de un dispositivo Android. Android 12 incluye nuevas APIs y funciones de API que todos los OEM deben admitir.

Recursos adicionales

Uso de colores de SysUI

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

Material que usas

Figura 4: Uso de colores dinámicos en la IU del sistema

Actualizaciones de los atributos de color de la biblioteca de Material

Material actualizará sus atributos de tema en la próxima versión creando roles de color que se usan para proporcionar color a vistas específicas.

Rol de color Atributo de tema de Android Tema claro
Color dinámico		 Tema oscuro
Color dinámico
Principal colorPrimary sistema_accent1_600 system_accent1_200
On principal colorOnPrimary system_accent1_0 system_accent1_800
Secundario colorsecundario system_accent2_600 system_accent2_200
On secundario colorOnSecundario sistema_accent2_0 system_accent2_800
Error colorError N/A (red_600) N/A (red_200)
On de error colorOnError N/A (blanco) N/A (red_900)
Segundo plano android:colorBackground system_neutral1_10 sistema_neutral1_900
On de fondo colorOnBackground system_neutral1_900 system_neutral1_100
Superficie colorSurface system_neutral1_10 system_neutral1_900
On de superficie colorOnSurface sistema_neutral1_900 system_neutral1_100

Material actualizará sus atributos de estado con los siguientes punteros:

Rol de color Atributo de tema de Android Tema claro
Color dinámico		 Tema oscuro
Color dinámico
Contenido del estado principal colorPrimaryStateContent system_accent1_700 system_accent1_200
Capa de estado principal colorPrimaryStateLayer system_accent1_600 system_accent1_300
Contenido de estado secundario Estado_Contenido_secundario system_accent2_700 system_accent2_200
Capa de estado secundaria colorSecondaryStateLayer system_accent2_600 system_accent2_300
Contenido del estado principal colorOnPrimaryStateContent system_accent1_0 system_accent1_800
En la capa de estado principal colorOnPrimaryStateLayer system_accent1_900 sistema_accent1_800
Contenido del estado secundario colorOnSecondaryStateContent system_accent2_0 system_accent2_800
En la capa de estado secundaria colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Contenido del estado del contenedor principal colorOnPrimaryContainerStateContent sistema_accent1_900 system_accent1_900
En la capa de estado del contenedor principal colorOnPrimaryContainerStateLayer sistema_accent1_900 system_accent1_900
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
Contenido del estado de contenedor terciario colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
En la capa de estado del contenedor terciario colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
En contenido de estado de la superficie colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
Capa de estado de On Surface colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
En el contenido de estado de la variante de superficie colorOnSurfaceVariantStateContent system_neutral2_700 sistema_neutral2_200
Capa de estado de la variante de la superficie colorOnSurfaceVariantStateLayer sistema_neutral2_700 sistema_neutral2_200
Contenido de estado de error colorErrorStateContent. red800 red200

Preguntas frecuentes

Extracción de colores

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 de colores del fondo de pantalla está activada de forma predeterminada.

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

En el caso de los fondos de pantalla animados o los fondos de pantalla de video, ¿podríamos saber cuándo la extracción de color toma el color de la pantalla? Es posible que algunos usuarios quieran usar los colores del último fotograma, ya que se muestra la mayor parte del tiempo.

La extracción de colores 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 varios colores de origen para que los usuarios elijan en lugar del color de frecuencia más alta? ¿Hay alguna manera de obtener esos colores de la lógica de extracción?

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

Los nombres de Pixel tienen una función llamada Theme Icon. ¿Está incluido en los tres parches que compartiste? ¿Cómo pueden implementarlo los OEMs?

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

¿Hay alguna manera de usar la app de Fondos de pantalla de Google con las funciones de extracción y selección de colores habilitadas?

Sí. Para implementar las funciones en la versión más reciente de la app de Google Wallpaper, sigue los pasos de integración que se describieron anteriormente en esta página.

Comunícate con tu TAM para obtener más detalles.

¿Puede Google compartir la app o el código fuente para que los OEMs puedan implementar su propia versión de la vista previa de colores dinámicos en su menú de configuración, que se ve similar a la sección de vista previa que se muestra en la app de selector de fondo de pantalla de Google?

Las clases principales que renderizan 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 app de Fondos de pantalla de Google?

La app del selector de fondo de pantalla espera que haya un ContentProvider disponible desde el selector (un selector basado en Launcher3 lo tiene). GridCustomizationsProvider proporciona la vista previa en el selector, a la que se debe hacer referencia en los metadatos de la actividad principal del selector para que la app de fondo de pantalla y estilo la lea. Todo esto se implementa en Launcher3 de AOSP y está disponible para los OEMs.