Material You ha llevado la personalización de Android a otro nivel, unificando estética, accesibilidad y consistencia técnica. En el centro está un motor de color que parte de una semilla y genera paletas tonales coherentes en todo el sistema y las apps, dando al usuario una experiencia personal sin romper la previsibilidad para desarrolladores y fabricantes.
En esta guía condensamos y reescribimos lo mejor de las referencias líderes para que entiendas cómo se extrae el color del fondo, cómo se expande a 65 atributos, cómo cambiar el tema en Android 12 y Android 13, qué opciones ofrece AOSP, y cómo integrar todo en tu UI, widgets, movimiento y tooling de diseño como Figma.
Qué es la paleta de colores dinámica en Material You
La idea matriz es muy simple: el sistema toma un único color de origen (procedente del wallpaper o elegido por el usuario) y lo transforma en cinco paletas tonales con trece niveles cada una (acento 1 a 3 y neutro 1 a 2), sumando 65 atributos que se aplican de forma consistente a componentes y superficies.
Este enfoque da a usuarios y desarrolladores una narrativa de personalización uniforme en cualquier dispositivo Android, mientras que a los OEM les permite innovar su capa propia sin perder coherencia ni accesibilidad dentro del ecosistema.
Cómo funciona la extracción y la expansión del color
Desde Android 12, AOSP incorpora la lógica que convierte un fondo de pantalla o un color base en paletas tonales. Se recomienda usar la misma lógica de AOSP sin modificaciones para asegurar resultados estables entre sistema y apps del fabricante.
El pipeline estándar transforma la semilla en un conjunto de 65 colores, con reglas de CAM16 para croma y tono, de modo que los roles de Material Design 3 se mapeen a atributos de tema claros y oscuros con contrastes garantizados.
Flujo completo en cuatro pasos
Este flujo se dispara al cambiar fondo o tema desde el selector del OEM y permite elegir entre tema del dispositivo o nuevo wallpaper con tema generado automáticamente.
- El usuario cambia el wallpaper o el tema en el selector del OEM; a partir de ahí el sistema propone opciones de generación o aplicación del tema.
- Se escoge entre tema del dispositivo (Android elige una semilla válida) o nuevo fondo y tema (AOSP extrae una semilla de la imagen).
- Con la semilla definida, AOSP expande a cinco paletas tonales con trece niveles cada una, propagando 65 atributos de color listos para su consumo.
- La UI del sistema y las apps consumen esos atributos de forma consistente; Google recomienda que sistema y apps del OEM compartan la misma paleta.
Requisitos técnicos y parches en Android 12
En dispositivos que arrancan con Android 12L o superior el color dinámico ya viene integrado; con Android 12 hay que incluir parches para la lógica extremo a extremo de extracción y expansión, marcados como obligatorios y muy recomendables para asegurar consistencia de los 65 atributos y compatibilidad CTS.
La ruta de ejecución arranca en ThemeOverlayController dentro de SystemUI y reacciona a cambios de WallpaperColors notificados por WallpaperManager para actualizar el tema cada vez que cambia el fondo de pantalla.
ThemePicker y colores propios con un APK stub
Si utilizas ThemePicker de AOSP, la sección de color aparece cuando flag_monet está activa y declaras un paquete stub en override.xml. Ese APK contiene los recursos mínimos para listar los colores básicos y sus nombres, actuando como catálogo.
Debes incluir un XML con un array de bundles y cadenas bundle_name_*, además de pares color_primary_* y color_secondary_* para cada bundle, asegurando que ambos valores corresponden al mismo color base y que hay traducciones en res/values-xx para sus nombres.
Diseña una experiencia de temas útil
El usuario puede personalizar mediante selector de temas o de fondos. Si optas por el de fondos, la extracción cromática desde el wallpaper está activa por defecto, aunque puedes ampliar opciones como ofrecer varias semillas sugeridas por el algoritmo.
Extracción del color de origen
La extracción se activa al establecer wallpaper o después de un ciclo de encendido de pantalla. AOSP elige el color adecuado siempre que cumpla un croma CAM16 mínimo de 5 para evitar semillas apagadas; para operar con CAM16 puedes usar utilidades como Cam#fromInt o Cam#getInt.
Si tu dispositivo no admite extracción dinámica, puedes optar por una paleta no dinámica: desactiva flag_monet y proporciona un selector de temas predeterminado con opciones de marca.
Expansión a 65 atributos
Con la semilla válida, Android genera las cinco paletas: accent1, accent2, accent3, neutral1 y neutral2, cada una con trece niveles de luminancia. Las reglas CAM16 garantizan consistencia: accent1 mantiene el tono con croma 40 en índices 0, 10, 50 y 100 y 48 en el resto; accent2 usa croma 16; accent3 usa croma 32 con rotación de tono de +60 grados; neutral1 usa croma 4 y neutral2 croma 8.
Para validar la expansión, CTS incorpora pruebas de luminancia y tono invocables con atest SystemPalette, de forma que puedas asegurar que la implementación respeta los rangos y los mapeos definidos por la plataforma.
Uso en apps y en la IU del sistema
Una vez configurados los colores dinámicos, las apps consumen los atributos a través de Material Components siguiendo las guías de Material 3. Google aconseja integrar colores dinámicos en toda la experiencia (sistema y apps) para reforzar identidad del dispositivo sin romper la coherencia.
Android 13 y superiores: estilos de tema y JSON de personalización
A partir de Android 13, se retira accent_color como clave de personalización y llega theme_style para distinguir variantes cromáticas del algoritmo. En AOSP se contemplan los estilos TONAL_SPOT, VIBRANT, EXPRESSIVE y SPRITZ; también existen variantes orientadas a temas estáticos como RAINBOW y FRUIT_SALAD que no se recomiendan con extracción desde wallpaper.
La configuración se envía a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES con, al menos, system_palette; de forma opcional puedes incluir theme_style. El estilo por defecto es TONAL_SPOT y está cubierto por CTS mediante SystemPaletteTest, por lo que el CDD exige generar paletas usando alguno de estos estilos.
Lista permitida y señalización a terceros
Para que terceros detecten de forma fiable que tu dispositivo implementa paletas dinámicas, Google mantiene una lista permitida codificada. Debes abrir un ticket y enviar tu Build.MANUFACTURER, ya que la mayoría de apps basadas en Material Components pintan usando los colores dinámicos del sistema.
Movimiento y feedback táctil coherentes
Android 12 introdujo un overscroll con estiramiento al llegar a los límites de una lista. En hardware con isHighEndGfx verdadero, el estiramiento es no lineal; en dispositivos menos potentes se simplifica a estiramiento lineal para reducir carga de renderizado.
Si usas vistas personalizadas, actualiza a las librerías recientes: androidx.recyclerview 1.3.0‑alpha01, androidx.core 1.7.0‑alpha01 (NestedScrollView y EdgeEffectCompat) y androidx.viewpager 1.1‑alpha01. Con EdgeEffect, evita interacciones con el contenido durante el estiramiento, permite capturar la animación con getDistance y usa onPullDistance para transiciones fluidas entre estirar y desplazar.
El efecto de onda táctil (ripple) en Android 12 es más suave y sutil. No requiere integración particular, pero conviene probar en tus dispositivos para evitar regresiones visuales o de rendimiento.
Widgets: nuevas APIs y actualización de los propios
Los widgets siguen siendo clave en la experiencia Android. El sistema debe soportar correctamente parámetros de diseño (tamaños, radios de esquina, etc.), permitir reconfigurar y redimensionar sin problemas y exponer tamaños y radios adecuados mediante APIs para desarrolladores.
Aprovecha las funciones nuevas para modernizar los widgets de tus apps y prioriza lo que más impacto tenga en usabilidad y consistencia visual conforme a las recomendaciones de la plataforma.
Mapeo de roles de color en Material Components
Material 3 actualiza los atributos de tema para trabajar con roles de color y variar entre tema claro y oscuro. En claro, colorPrimary suele mapearse a system_accent1_600 y colorOnPrimary a system_accent1_0; en oscuro, a system_accent1_200 y system_accent1_800, respectivamente, mientras que fondos y superficies derivan de neutral1.
| Rol | Atributo | Claro | Oscuro |
|---|---|---|---|
| Principal | colorPrimary | system_accent1_600 | system_accent1_200 |
| On principal | colorOnPrimary | system_accent1_0 | system_accent1_800 |
| Secundario | colorSecondary | system_accent2_600 | system_accent2_200 |
| On secundario | colorOnSecondary | system_accent2_0 | system_accent2_800 |
| Fondo | android:colorBackground | system_neutral1_10 | system_neutral1_900 |
| On fondo | colorOnBackground | system_neutral1_900 | system_neutral1_100 |
| Superficie | colorSurface | system_neutral1_10 | system_neutral1_900 |
| On superficie | colorOnSurface | system_neutral1_900 | system_neutral1_100 |
Además, se introducen atributos de estado como colorPrimaryStateContent o colorOnSurfaceVariantStateLayer, apuntando a índices concretos de las paletas para garantizar consistencia en estados presionado, enfocado o deshabilitado y mantener contrastes adecuados.
| Rol de estado | Atributo | Claro | Oscuro |
|---|---|---|---|
| Contenido estado principal | colorPrimaryStateContent | system_accent1_700 | system_accent1_200 |
| Capa estado principal | colorPrimaryStateLayer | system_accent1_600 | system_accent1_300 |
| Contenido estado secundario | colorSecondaryStateContent | system_accent2_700 | system_accent2_200 |
| Capa estado secundaria | colorSecondaryStateLayer | system_accent2_600 | system_accent2_300 |
| Contenido on principal | colorOnPrimaryStateContent | system_accent1_0 | system_accent1_800 |
| Capa on principal | colorOnPrimaryStateLayer | system_accent1_900 | system_accent1_800 |
| Contenido on secundario | colorOnSecondaryStateContent | system_accent2_0 | system_accent2_800 |
| Capa on secundaria | colorOnSecondaryStateLayer | system_accent2_900 | system_accent2_800 |
| On contenedor principal | colorOnPrimaryContainerStateContent | system_accent1_900 | system_accent1_900 |
| Capa on contenedor principal | colorOnPrimaryContainerStateLayer | system_accent1_900 | system_accent1_900 |
| On contenedor secundario | colorOnSecondaryContainerStateContent | system_accent2_900 | system_accent2_900 |
| Capa on contenedor secundario | colorOnSecondaryContainerStateLayer | system_accent2_900 | system_accent2_900 |
| On contenedor terciario | colorOnTertiaryContainerStateContent | system_accent3_900 | system_accent3_900 |
| Capa on contenedor terciario | colorOnTertiaryContainerStateLayer | system_accent3_900 | system_accent3_900 |
| On superficie | colorOnSurfaceStateContent | system_neutral1_900 | system_neutral1_100 |
| Capa on superficie | colorOnSurfaceStateLayer | system_neutral1_900 | system_neutral1_100 |
| On superficie variante | colorOnSurfaceVariantStateContent | system_neutral2_700 | system_neutral2_200 |
| Capa on superficie variante | colorOnSurfaceVariantStateLayer | system_neutral2_700 | system_neutral2_200 |
| Error (contenido) | colorErrorStateContent | red800 | red200 |
API tonal y nombres de recursos
Las cinco paletas tonales se exponen como recursos en R.color con índices 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 1000, por ejemplo system_accent1_10. El sistema calcula tono y croma en tiempo de ejecución a partir de la semilla, respetando los estilos de tema soportados.
Si el algoritmo no encuentra una semilla válida, se debe usar un valor de respaldo conocido para continuar la expansión, garantizando que el usuario sigue teniendo un tema funcional y legible.
Preguntas frecuentes clave
¿La extracción se activa sola al cambiar el fondo de pantalla? Sí, con Android 12 la extracción está activa por defecto desde ThemeOverlayController, que escucha los cambios de WallpaperColors vía WallpaperManager.
¿Qué ocurre con fondos animados o de vídeo? La extracción se aplica al establecer el wallpaper o tras un ciclo de encendido; el último evento de WallpaperColors se aplica al volver a encender la pantalla.
¿Puedo mostrar varias semillas en el selector? Sí, con ColorScheme#getSeedColors puedes ofrecer alternativas a la de mayor frecuencia para enriquecer la personalización sin salirte de la lógica de AOSP.
¿Y los iconos temáticos? No formaban parte de Android 12 estable como característica general; no asumas su presencia si no están en tu build, ya que no estaban incluidos en los parches citados.
¿Se puede usar la app de Fondos de Google con vista previa de colores? Sí; apóyate en WallpaperPicker2, Launcher3, la pantalla de vista previa WallpaperSectionController y el proveedor GridCustomizationsProvider que expone datos vía ContentProvider.
Accesibilidad y herramientas de diseño
Material You está diseñado con foco inclusivo: las paletas generadas mantienen contrastes suficientes para asegurar legibilidad de texto y elementos de UI, tanto en claro como en oscuro, con niveles de contraste estándar, medio y alto a elección del usuario.
Para diseñadores, el plugin Material Theme Builder para Figma y su versión web permiten generar y visualizar paletas desde un color de marca o desde contenido, previsualizar claro y oscuro y comprobar contrastes sin perder identidad.
Compatibilidad entre fabricantes y cómo probar sin móvil
Monet, la implementación interna del coloreado dinámico, se extendió más allá de Pixel a capas como One UI, OxygenOS, ColorOS, OriginOS, realme UI, MIUI y HyperOS. Esto garantiza una experiencia coherente a escala de ecosistema.
Si no tienes un dispositivo compatible, prueba los temas dinámicos en el navegador con Material Theme Builder, alternando fondos o subiendo una imagen para ver cómo se adaptan los colores del sistema.
Personalización avanzada y matices por capas
Las implementaciones OEM pueden añadir matices. Por ejemplo, hay casos en los que al usar apps que cambian el wallpaper automáticamente la paleta no se refresca hasta desactivar y reactivar manualmente la opción en Ajustes, lo cual obedece a decisiones de la capa o limitaciones específicas.
Apps como Repainter permiten ajustar paletas del sistema con gran detalle: con root funcionan mejor, aunque en algunos dispositivos operan también sin root mediante ADB inalámbrico. Puedes escoger la paleta usada por apps con Material You, generar paletas desde fondos de pantalla (incluida la de bloqueo) o elegir un color manual. Su versión gratuita crea un estilo, con periodos de prueba y opciones de suscripción o pago único.
Consejos prácticos de diseño con Material You
Frente a Material Design de 2014, Material You simplifica: menos sombras, tipografías más limpias y formas más redondeadas. La documentación oficial brinda guías claras de componentes, tamaños y casos de uso.
Como flujo de trabajo, crea primero la paleta con Theme Builder, define estilos tipográficos con legibilidad en mente y apóyate en los Design Kits de Figma; es útil preparar una lámina visual con estilos tipográficos y su relación con color y superficies para facilitar revisiones.
Al implementar, usa los componentes de Material y respeta apartados clave de la documentación (Overview, Specs, Guidelines). Aunque el bloque de Accesibilidad evoluciona, Specs y Guidelines brindan medidas, usos correctos y limitaciones para evitar sorpresas.
Codelab rápido con Figma y tokens
Instala el plugin Material Theme Builder, duplica el archivo del lab en Figma y sigue las secciones enlazadas en orden. Introduce el color primario de tu marca; el sistema propagará el resto de roles y generará paletas claras y oscuras.
Añade secundario y terciario para ampliar expresión cromática; usa neutrales para fondos y superficies. Cambia al tema en el modal del plugin y aplica estilos a componentes personalizados si es necesario, respetando la jerarquía de color para dirigir la atención hacia llamadas a la acción.
Extiende más allá del esquema central con colores personalizados (Custom#) desde el modal. Puedes renombrarlos en el panel de estilos y asignarlos a etiquetas o elementos semánticos, manteniendo accesibilidad a través del algoritmo tonal.
Actualizar tu app Android a Material 3
Antes de activar color dinámico, actualiza dependencias (Material Components recientes), usa compile y target SDK adecuados y cambia el tema base a Theme.Material3.*. Revisa estilos heredados y migra personalizaciones que ahora existen de forma estándar.
Para habilitar colores dinámicos globalmente, utiliza DynamicColors.applyToActivitiesIfAvailable en tu Application. Si necesitas matices de marca, define una superposición de tema con asignaciones específicas y pásala como parámetro a la aplicación de colores dinámicos.
Para atributos personalizados, referencia paletas del sistema como @android:color/system_accent2_600 en tu overlay; recuerda ubicar recursos en carpetas -v31 si minSdk es inferior a 31 para mantener compatibilidad.
Dispositivos plegables: pautas de diseño
En plegables, la ergonomía cambia: la zona superior aproximadamente del 25 por ciento puede resultar difícil de alcanzar, así que distribuye contenido según alcance cómodo y relevancia.
Evita colocar controles críticos sobre la bisagra; reserva unos 48 dp alrededor de esa zona para no obstaculizar la interacción, manteniendo los elementos accionables fuera del área conflictiva.
En modo horizontal, sitúa la navegación principal a la izquierda y reparte contenido en dos columnas ajustando el espacio de la bisagra; en vertical, prioriza una sola columna amplia para preservar la legibilidad.
Claves de implementación en Android 12 y 13
En Android 13, envía system_palette y de forma opcional theme_style en Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES. En Android 12 y anteriores, si usas un selector de temas personalizado, envía system_palette y accent_color (con el mismo valor) a ese ajuste para saltarte la extracción y expandir directamente a 65 atributos.
Material You permite personalización profunda pero controlada: puedes adoptar extracción automática desde el fondo o partir de colores de marca, conservando contraste, legibilidad y consistencia técnica. Bien integrado (AOSP, CTS, overlays), el color dinámico potencia la UX sin comprometer la identidad visual y abre la puerta a experiencias personales en todo el ecosistema Android.
