Diseño de materiales en Android. Coherencia desde el diseño hasta el código

Este año, con el objetivo de mejorar mis habilidades en programación, he iniciado una beca en Telefónica. Además de participar en sesiones de ideación, diseño y desarrollo de prototipos en el área de Discovery, estoy dedicando tiempo a explorar herramientas y recursos que no había utilizado anteriormente.

En este artículo resumo mi exploración de la interfaz de usuario de Android, centrándome en la integración de Material Design.

El diseño de materiales es un sistema de diseño de código abierto lanzado por Google en 2014. No es solo un kit de componentes sino que también incluye pautas detalladas, estilos y miles de recursos útiles.

Material Design 3, la última versión de este sistema de diseño, aporta un nuevo nivel de personalización, accesibilidad y adaptabilidad. También se le conoce como Material You debido a su enfoque en brindar una experiencia personalizada para cada usuario y al mismo tiempo garantizar la coherencia.

A continuación se ofrece un análisis de algunos de los recursos más importantes de Material Design 3 para diseñadores y desarrolladores de Android.

Al utilizar la colección de componentes de Material Design, puede crear la interfaz de su aplicación más rápido utilizando componentes prediseñados. Los estilos se asignarán a los componentes de forma predeterminada siguiendo una lógica cuidadosa. Esto garantiza partir de una base completamente consistente.

Colección de componentes proporcionados por el sistema de diseño Material Design 3.

Para los desarrolladores, Material Design tiene una fácil integración con Jetpack Compose, el último conjunto de herramientas para crear una interfaz de usuario nativa en Android.

También hay un archivo oficial de componentes de Material Design para Figma.

En esta sección hay un análisis de las paletas de colores, la tipografía y la forma que es el núcleo de la tematización de una aplicación.

Color

La base del esquema de color reside en un algoritmo que puede generar paletas completas a partir de un color.

Los colores están organizados en pares (ej. primario/onPrimary) con un contraste mínimo accesible de 3:1. Se nombran según su uso y paleta (oscuro, claro) y se asignarán a componentes de Material.

Esta asignación de color a los componentes es dinámica. Si una superficie tiene aplicado el color de contenedor primario, los elementos dentro de ella tendrán automáticamente un fondo de onPrimaryContainer. Es decir, la asignación de colores depende no sólo del elemento concreto sino también de su ubicación, lo que la convierte en una lógica mucho más detallada y útil.

Ejemplo de par de colores generado por el creador de temas

Se recomienda generar la paleta para su proyecto utilizando Theme-Buider. Hay dos pestañas en el sitio web:

Dinámico: es un nuevo modo de color que permite a los usuarios tener una experiencia de color personalizada. En esta sección del creador de temas podrás entender cómo funciona mejor. Si habilita el color dinámico en su aplicación, su paleta de Material Design se alineará tonalmente con el fondo de pantalla de los dispositivos cuando esté activo.Costumbre: para crear sus propias paletas claras y oscuras especificando 1 o más colores.

Los desarrolladores pueden exportar los archivos Jetpack Compose generados por el creador de temas y agregarlos directamente a sus proyectos.

// Color.kt
val md_theme_light_primary = Color(0xFF006A64)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFF71F7EC)
val md_theme_light_onPrimaryContainer = Color(0xFF00201E)
…
val md_theme_dark_primary = Color(0xFF50DBD0)
val md_theme_dark_onPrimary = Color(0xFF003734)
val md_theme_dark_primaryContainer = Color(0xFF00504B)
val md_theme_dark_onPrimaryContainer = Color(0xFF71F7EC)
…

En Figma, abra el complemento Material Theme Builder para usar y editar sus paletas de colores. Al diseñar un nuevo producto y definir colores, es muy útil establecer varias paletas y obtener una vista previa de cómo se ve tu aplicación con ellas en solo segundos.

Si tu empresa necesita utilizar algunos colores específicos siempre podrás modificarlos, añadir nuevos o crear la paleta desde cero. Tenga cuidado si edita o crea una paleta manualmente porque la accesibilidad y la correcta asignación predeterminada a los componentes ahora dependen de usted. Consulte la documentación de roles de color para obtener un mejor resultado.

Tipografía

Material Design 3 define una escala tipográfica dividida en:

5 categorías: visualización, título, título, cuerpo y etiqueta.3 tamaños en cada categoría: pequeño, mediano y grande.

Cada estilo de texto viene con valores predeterminados y se asignarán a cada componente automáticamente siguiendo un enfoque lógico.

Ejemplo de un componente de diálogo y sus estilos de texto asignados por defecto

En Android Studio siempre puedes anular los estilos de texto en tu Tipo.kt archivo o asignar uno diferente a un elemento específico manualmente en sus componentes. Tampoco está limitado a estos 15 estilos tipográficos y puede crear otros a partir de la escala tipográfica si es necesario.

// Tipo.kt
val Tipografía = Tipografía(
displayLarge = Estilo de texto(
fontFamily = AbrilFatface,
pesofuente = Pesofuente.Normal,
tamaño de fuente = 36.sp
)
…
)

Si está trabajando en Figma con el kit de diseño Material 3, edite los estilos de texto locales a su conveniencia.

Consulte la documentación para comprender el uso de cada función de texto. Representa una simplificación significativa, considerando que muchos sistemas de diseño tienden a crecer infinitamente en términos de estilos de texto, porque el uso no está bien definido.

Forma

Hay diferentes tamaños de formas en la escala de formas:

Extrachico,chico,mediano,grande y extragrande

Al igual que con la tipografía, cada tamaño de forma se asigna a diferentes elementos de forma predeterminada.

Ejemplo de un componente y su estilo de forma asignado por defecto

Al editar estas variables, verá cómo la apariencia de su aplicación cambia por completo. A continuación se muestra un ejemplo de cómo guardar valores en Android Studio.

// Forma.kt
val Formas = Formas(
pequeño = FormaDeEsquinaRedondeada(8.dp),
medio = FormaDeEsquinaRedondeada(16.dp),
grande = FormaEsquinaRedondeada(32.dp)
)

Si está trabajando en Figma con su kit de diseño Material 3, actualmente no hay variables de forma en el archivo. Sin embargo, puede crearlos agregando variables locales y asignándolas al radio del borde de cada componente.

Material Design 3 aporta una sólida base de coherencia con su sistema de diseño de código abierto. Proporciona recursos que pueden hacer que su equipo sea más eficiente trabajando según pautas establecidas y es lo suficientemente flexible como para adaptarlo a su empresa o producto.

No dudes en explorar documentación y recursos adicionales, como cuadrículas, animaciones o íconos, en la documentación oficial de Material Design 3.

Si eres desarrollador te recomiendo que sigas este tutorial oficial de Android para empezar a utilizar temas en tus proyectos.

Gracias a Pablo Gómez Guerrero.