10.4 Temas y Material You: colores dinámicos, fuentes y tamaños
10.4.1 Introducción a Material You
Material You es la evolución de Material Design que aporta personalización dinámica basada en el fondo de pantalla y preferencias del usuario. Permite adaptar colores, tipografías y dimensiones de forma automática y coherente en toda la app.
10.4.2 Colores dinámicos (Monet)
Android 12 incluye el motor de colores Monet, que genera una paleta a partir del fondo de pantalla:
- Extrae tonalidades primarias, secundarias y de acento.
- Aplica variaciones de claridad (tinte, tono, sombra).
- Se integra con
DynamicColorTheme
en Jetpack Compose o conMaterialComponents
en Views.
Ejemplo en Jetpack Compose:
val dynamicColor = dynamicLightColorScheme(context)
/ o dynamicDarkColorScheme /
MaterialTheme(
colorScheme = dynamicColor,
typography = Typography,
shapes = Shapes
) { / UI aquí / }
10.4.3 Tipografías y estilos de texto
- Material You define un Typography Scale flexibles:
Nombre | Tamaño (sp) | Uso recomendado |
Display Large | 57 | Títulos principales |
Headline Medium | 28 | Encabezados |
Body Large | 16 | Texto de cuerpo |
Label Small | 11 | Etiquetas secundarias |
Configuración en themes.xml
o en Compose:
- En XML: definir
ltitem name=fontFamilygt
yltitem name=android:textSizegt
. - En Compose: personalizar
Typography()
conFontFamily
yTextStyle
.
10.4.4 Ajuste de tamaños y espaciados
Material You también proporciona un sistema de dimensiones basado en density-independent pixels (dp) y scale-independent pixels (sp):
- dp para contenedores y márgenes.
- sp para texto, escalable según preferencias de accesibilidad.
- Definir en
dimens.xml
rangos variables para modos compacto, medio y amplio.
10.4.5 Implementación práctica
- Habilita Material You en tu tema base:
ltitem name=android:forceDarkAllowedgttruelt/itemgt
para modo oscuro.ltitem name=materialYouThemegttruelt/itemgt
en MaterialComponents.
- Integrar el motor de colores:
- Compose:
dynamicLightColorScheme()
odynamicDarkColorScheme()
. - Views: usar
MaterialColors.getColor(context, R.attr.colorPrimary, default)
.
- Compose:
- Definir tipografías customizadas en
Typography()
o enthemes.xml
. - Pruebas en distintos fondos de pantalla y configuraciones de accesibilidad.
Profundizando sobre: 10.4 Temas y Material You: colores dinámicos, fuentes y tamaños
Libros y recursos recomendados para el tema 10.4 Temas y Material You: colores dinámicos, fuentes y tamaños:
- Android Programming: The Big Nerd Ranch Guide (Bill Phillips, Chris Stewart y Kristin Marsicano). Capítulos sobre estilos, temas y personalización de colores.
- Professional Android, 4th Edition (Reto Meier y Ian Lake). Sección dedicada a la creación de temas y uso avanzado de estilos XML.
- Mastering Android UI Development (Sahil Dhawan). Incluye capítulos específicos de Material You y tipografía adaptable.
- Material You Guidelines en m3.material.io. Documentación oficial de colores dinámicos, tipografías y escalado de tamaños.
- Theming y estilos en Android en developer.android.com. Guía oficial de la plataforma para crear y aplicar temas.
- Codelab: Jetpack Compose Theming en developer.android.com. Ejercicio práctico con Material You y colores dinámicos.
- Jetpack Compose Material Design en developer.android.com. Referencia de API para tipografías, formas y paletas dinámicas.
- Curso “Android Material Design with Compose” en Udemy. Enfocado en theming, tipografías personalizadas y adaptaciones a Material You.
Deja una respuesta