Material You ha transformado la personalización en Android con una propuesta tan potente como sencilla de usar: colores dinámicos que se adaptan al usuario. Detrás de esa magia hay un motor de extracción y expansión de color cuidadosamente diseñado, que no solo pinta interfaces bonitas, sino que también asegura coherencia, accesibilidad y previsibilidad para desarrolladores y OEM.
En esta guía te contamos con todo detalle cómo funciona la paleta de colores dinámica, cómo se genera a partir del fondo de pantalla o de un color semilla, y cómo cambiar el tema en Android 12 y Android 13 siguiendo las recomendaciones de AOSP y Material Design 3. Además, verás qué opciones tienen los fabricantes, cómo encaja todo con widgets, movimiento y efectos táctiles, y qué herramientas puedes usar para diseñar y probar a tope.
¿Qué es la paleta de colores dinámica en Material You?
La idea clave es que el sistema toma un único color de origen (ya sea de un fondo de pantalla o un color definido por el usuario) y lo transforma en un conjunto completo de colores tonales coherentes para todo el sistema y las apps. Ese motor genera 5 paletas tonales con 13 valores cada una (65 atributos en total), de forma que los componentes de Material puedan mapearse a roles de color de manera consistente.
Este planteamiento proporciona a usuarios y desarrolladores una historia de personalización uniforme y rica en cualquier dispositivo Android, y a los OEM les permite innovar en su IU propia sin salirse de la coherencia del ecosistema ni comprometer la accesibilidad.
Cómo funciona la extracción y expansión del color
Desde Android 12, AOSP incorpora la lógica de extracción y expansión de color que convierte un fondo de pantalla o color base en paletas tonales. Para garantizar una experiencia consistente, se recomienda usar la misma lógica de AOSP sin modificaciones, tanto en la IU del sistema como en las apps del fabricante.
Flujo completo en 4 pasos
- El usuario cambia el fondo de pantalla o el tema desde el selector del OEM. A partir de ese gesto, el sistema plantea las opciones disponibles para generar o aplicar un tema. El origen del color puede ser automático o elegido.
- El usuario elige entre dos caminos: “Tema del dispositivo” (Android determina un color semilla válido automáticamente) o “Nuevo fondo de pantalla y tema” (la lógica de AOSP extrae de la nueva imagen un color de origen adecuado).
- Con el color semilla elegido, AOSP lo expande a 5 paletas tonales con 13 valores cada una (acento 1–3, neutro 1–2), propagando 65 atributos listos para usar en todo el sistema.
- La IU del sistema y las apps consumen esos 65 atributos de forma coherente. Google recomienda que los OEM usen una misma paleta para sistema y apps propias para reforzar continuidad visual.
Requisitos técnicos y parches en Android 12
En dispositivos que se inician con Android 12L o superior, el color dinámico ya viene integrado de serie. Si trabajas con Android 12, debes incluir los parches que proporcionan la lógica extremo a extremo de la extracción y la expansión, con elementos calificados como “Obligatorio” y “Muy recomendable” para garantizar la consistencia de los 65 atributos y su compatibilidad con el ecosistema.
La lógica arranca en ThemeOverlayController de SystemUI y reacciona a cambios de WallpaperColors notificados por WallpaperManager. Este recorrido asegura que, cuando el usuario cambia el fondo, el sistema actualiza el tema de forma predecible.
ThemePicker y definición de colores propios con un APK “stub”
Si usas el ThemePicker de AOSP, la sección de color aparece cuando se cumplen dos condiciones: la bandera flag_monet = true en SystemUI y la definición de un paquete stub en override.xml. Ese APK “stub” contiene los recursos mínimos para listar colores base disponibles y sus nombres, actuando como catálogo de colores básicos.
El stub debe incluir un XML con un array de bundles y cadenas descriptivas, así como los valores de color primario y secundario para cada bundle. Por ejemplo:
Código:
<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>Los colores pueden definirse en el mismo archivo o en uno de recursos separado, con parejas color_primary_* y color_secondary_* por cada bundle. Ambos valores deben corresponder al mismo color para mantener la integridad del catálogo.
Código:
<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 internacionalizar, añade traducciones en res/values-xx con los nombres de cada bundle. De este modo, el ThemePicker puede mostrar un set básico de colores descriptivos y coherentes con tu marca.
Paso 1: diseña una experiencia de temas útil
El usuario puede personalizar mediante un selector de temas o de fondos. Si eliges un selector de fondos, la extracción de color del fondo se activa por defecto, aunque puedes ampliar opciones (por ejemplo, permitir elegir entre varias semillas propuestas por el algoritmo).
Paso 2: extracción del color de origen
La extracción de colores se dispara cuando el usuario establece fondo o tras un ciclo de encendido de pantalla. La lógica de AOSP toma el color con mayor adecuación de la imagen, siempre que cumpla un croma CAM16 mínimo de 5 (para evitar semillas demasiado apagadas). Para trabajar con CAM16 puedes usar utilidades como Cam#fromInt o Cam#getInt.
Si tu dispositivo no admite la extracción dinámica, puedes optar por una paleta no dinámica: desactiva flag_monet y proporciona un selector de temas predeterminado para que el usuario siga teniendo opciones de personalización.
Paso 3: expansión a 65 atributos
Con una semilla válida, Android genera 5 paletas: accent1, accent2, accent3, neutral1 y neutral2, cada una con 13 tonos que recorren distintos niveles de luminancia. Las reglas de CAM16 aseguran coherencia: por ejemplo, accent1 mantiene el tono de la semilla 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 +60°; neutral1 usa croma 4; neutral2 usa croma 8.
Para verificar la expansión, el CTS incorpora pruebas de luminancia y tono invocables con atest SystemPalette. Así puedes validar que la implementación respeta los rangos y los mapeos definidos por la plataforma.
Paso 4: 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 Design 3. Google recomienda integrar colores dinámicos en toda la experiencia (sistema y apps propias) para reforzar la identidad del dispositivo sin perder consistencia con el ecosistema.
Android 13+: estilos de tema y JSON de personalización
Desde Android 13, el campo android.theme.customization.accent_color deja de estar disponible y llega android.theme.customization.theme_style para distinguir variantes cromáticas. En AOSP se contemplan cuatro estilos: TONAL_SPOT (estándar desde Android 12), VIBRANT (acento 2 y 3 análogos a acento 1), estilo EXPRESSIVE (muy cromático) y SPRITZ (desaturado casi en escala de grises).
Se envían en Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES con un JSON como este:
{ "android.theme.customization.system_palette":"B1611C", "android.theme.customization.theme_style":"EXPRESSIVE" }En Android 12 y anteriores, el formato incluye también el acento: se proporciona una semilla válida y el sistema expande directamente a los 65 atributos, saltándose la extracción del fondo. Un ejemplo sería: { «android.theme.customization.system_palette»:»746BC1″, «android.theme.customization.accent_color»:»746BC1″ }.
Lista permitida y señalización a terceros
Para que terceros identifiquen de forma fiable que tu dispositivo implementa correctamente la paleta de colores dinámica, Google mantiene una lista permitida codificada. Debes abrir un ticket y enviar tu Build.MANUFACTURER. Esto es clave porque la mayoría de apps usan Material Components para Android para pintar con colores dinámicos.
Movimiento y feedback táctil coherentes
Punto clave: mantén una experiencia uniforme con el estiramiento por sobre-desplazamiento y el efecto de onda táctil.Android 12 introdujo un estiramiento de vista al llegar a los límites de una lista. En dispositivos con isHighEndGfx() verdadero, el estiramiento es no lineal; en hardware menos potente, se simplifica a un estiramiento lineal para reducir carga.
Si usas vistas personalizadas, actualiza librerías: androidx.recyclerview:recyclerview 1.3.0-alpha01, androidx.core:core 1.7.0-alpha01 (NestedScrollView y EdgeEffectCompat) y androidx.viewpager:viewpager 1.1-alpha01. Además, con EdgeEffect: evita interacciones con el contenido durante el estiramiento, permite capturar la animación para manipular la distancia (EdgeEffectCompat.getDistance()) y usa onPullDistance() para transiciones fluidas de estirar a desplazar, priorizando el estiramiento frente a vistas anidadas.
En cuanto al efecto de onda (ripple) al pulsar, Android 12 lo suaviza para dar una respuesta más sutil. No requiere integración especial, pero conviene probar en tus dispositivos para evitar regresiones estéticas o de rendimiento.
Widgets: nuevas APIs y actualización de propios
Los widgets siguen siendo fundamentales en Android. Tu sistema debe soportar correctamente parámetros de diseño (tamaños, esquinas, etc.) y permitir que el usuario los reconfigure y redimensione sin problemas, además de exponer los tamaños y radios adecuados mediante APIs.
Aprovecha las nuevas funciones de la API para modernizar los widgets de tus apps. Revisa la lista de tareas recomendada por la plataforma y prioriza aquello que más impacto tenga en usabilidad y consistencia visual.
Mapeo de roles de color en Material Components
Material Design 3 actualiza los atributos de tema para trabajar con roles de color. En tema claro con color dinámico, colorPrimary suele mapearse a system_accent1_600 y colorOnPrimary a system_accent1_0; en oscuro, a system_accent1_200 y system_accent1_800, respectivamente. El secundario sigue una lógica equivalente con system_accent2_*. El fondo y la superficie derivan de neutral1, y los textos sobre fondo/superficie se toman de los tonos contrastados.
De forma análoga, se introducen atributos de estado como colorPrimaryStateContent o colorOnSurfaceVariantStateLayer, apuntando a índices concretos de las paletas (por ejemplo, system_accent1_700 para contenido de estado principal en claro, o system_neutral2_200 para variantes en oscuro). Este mapeo detallado garantiza consistencia entre estados, capas y contrastes.
Preguntas frecuentes clave
¿La extracción se activa sola al cambiar el fondo? Sí. Con los parches de Android 12, la extracción de colores se activa por defecto mediante ThemeOverlayController, que escucha onColorsChanged y reacciona a WallpaperManager#onWallpaperColorsChanged.
¿Qué pasa con fondos animados o de vídeo? La extracción se vuelve a aplicar tras apagar y encender pantalla, cuando el motor de fondo notifica cambios de color (WallpaperEngine#notifyColorsChanged). Así, el último WallpaperColors se consolida al reactivar la pantalla.
¿Puedo mostrar varias semillas en el selector? Sí. Usa ColorScheme#getSeedColors(WallpaperColors) para ofrecer al usuario alternativas al color de frecuencia más alta. Esta opción enriquece la personalización sin salirte de la lógica de AOSP.
¿Y los iconos temáticos? No forman parte de los parches citados y no están disponibles en Android 12 como característica general. No intentes asumir su presencia si no están en tu build.
¿Puedo usar la app de Fondos de Google con todo esto? Sí. Implementa los pasos anteriores y apóyate en clases como WallpaperPicker2 y Launcher3. La vista previa del fondo está en WallpaperSectionController, y GridCustomizationsProvider expone la vista previa vía ContentProvider que la app de “Fondo de pantalla y estilo” consume.
Accesibilidad y herramientas de diseño Material You
Material You se ha diseñado con foco inclusivo: las paletas generadas mantienen contrastes suficientes para asegurar legibilidad de texto y elementos UI, tanto en claro como en oscuro. Además, el usuario puede elegir niveles de contraste (estándar, medio y alto) para ajustar la experiencia a sus necesidades.
Para diseñadores, el plugin Material Theme Builder para Figma permite generar y visualizar paletas a partir de un color de marca o del contenido, previsualizar estados claro/oscuro y comprobar contrastes. Es una forma rápida de experimentar sin perder identidad de marca.
Si ya tienes una paleta corporativa (p. ej., verde primario, marrón secundario, azul terciario), puedes inyectar esos colores en Theme Builder para generar automáticamente las escalas tonales con contrastes accesibles. Esto acelera la colaboración entre diseño y desarrollo y reduce ciclos de ajuste.
Compatibilidad en fabricantes y cómo probar sin móvil
El coloreado dinámico (conocido internamente como Monet) no formó parte de AOSP en el lanzamiento inicial de Android 12, pero Google confirmó su llegada a capas de grandes fabricantes como Samsung (One UI), OnePlus (OxygenOS), OPPO (ColorOS), Vivo (OriginOS), realme y Xiaomi (MIUI), entre otros.
Si no tienes un dispositivo compatible a mano, puedes usar la herramienta de Material Theme Builder en el navegador para probar temas dinámicos: alterna fondos o sube tu propia imagen y observa cómo afecta a los colores de las apps.
Personalización avanzada: comportamiento por capas y apps de terceros
La implementación OEM puede introducir matices. Por ejemplo, hay usuarios que han observado en One UI que, al usar apps de cambio automático de fondo (como Tapet), el sistema no refresca la paleta hasta que desactivas y reactivas manualmente la paleta en Ajustes. En estos casos suele tratarse de limitaciones o decisiones de la capa: conviene validar si es un comportamiento esperado o un fallo concreto.
Si quieres llevar la personalización más allá, apps para personalizar como Repainter permiten ajustar paletas del sistema con gran detalle. Con root funcionan mejor, pero en algunos dispositivos también operan sin root usando ADB inalámbrico (similar a Shizuku). Puedes elegir la paleta usada por apps que soportan Material You, generar paletas desde el fondo de pantalla y el de la pantalla de bloqueo o incluso elegir un color a mano.
La versión gratuita de Repainter crea un único estilo; la app incluye hasta seis estilos disponibles como prueba de 3 días. Después, hay suscripción mensual o pago único. Requiere Android 12+ y, en general, los cambios persisten incluso tras desinstalar o reiniciar.
Consejos prácticos de diseño con Material You
Respecto a Material Design (2014), Material You simplifica: menos sombras, tipografías más limpias y formas más redondeadas. Google ha actualizado la web de Material con guías claras de componentes, tamaños, colores y casos de uso para que no haya pérdida y sea fácil seguir buenas prácticas.
Como flujo de trabajo, empieza por crear la paleta de colores (Theme Builder viene de lujo), define Text Styles con legibilidad en mente y apóyate en los Design Kits oficiales de Figma. Es recomendable preparar una lámina visual con los estilos tipográficos usados y su relación con color y superficies para facilitar la revisión.
Al implementar, usa los componentes de Material y respeta los apartados clave de la documentación (Overview, Specs, Guidelines). El bloque de Accesibility aún está en evolución en algunas páginas, pero Specs y Guidelines te dan medidas, usos correctos y limitaciones, evitando sorpresas en producción.
Desarrollar una app con Material You no es complejo si conoces la pila, pero exige conocimientos avanzados para sacarle todo el partido. Si necesitas ayuda profesional, existen equipos especializados que pueden acompañarte en definición, diseño e implementación, resolviendo dudas y ajustándose a tu presupuesto.
Material You une personalización, accesibilidad y coherencia técnica en un mismo paquete: desde una semilla cromática, Android genera 65 atributos listos para roles de Material, se adapta a claro/oscuro y a distintos estilos de tema (TONAL_SPOT, VIBRANT, EXPRESSIVE, SPRITZ), y cuida detalles como el estiramiento por sobre-desplazamiento, el ripple o los widgets.
Con Theme Picker, JSON de overlays, APK “stub” para colores básicos, pruebas CTS y herramientas como Theme Builder, tienes todo lo necesario para crear experiencias pulidas que respeten tu marca y encajen como un guante en el ecosistema. Comparte la información y así más usuarios conocerán sobre este tema.
Continúar leyendo...