Cuando nos ponemos manos a la obra con el diseño de interfaces en Android, el texto es probablemente el elemento más recurrente. No se trata solo de soltar un string en la pantalla, sino de cómo hacemos que ese contenido tenga personalidad y guíe al usuario a través de la jerarquía visual de la aplicación.
Jetpack Compose ha venido a simplificarnos la vida, sustituyendo el antiguo TextView por el componente Text. Aunque a simple vista parece sencillo, tiene una profundidad increíble que nos permite desde aplicar un simple color hasta crear efectos de marquesina o integrar fuentes que se descargan sobre la marcha.
Para empezar, el parámetro
fontFamily es nuestra herramienta clave. Por defecto, Compose nos ofrece las clásicas serif, sans-serif, monoespaciadas y cursivas. Pero claro, si queremos que la app tenga un toque único, necesitamos fuentes personalizadas alojadas en la carpeta res/font. Para ello, definimos un objeto FontFamily donde asociamos cada archivo .ttf con su peso correspondiente, como FontWeight.Bold o FontWeight.Light.Si no quieres cargar la app de archivos pesados, la API de fuentes descargables de Google es la solución ideal. A partir de la versión 1.2.0, podemos configurar un
GoogleFont.Provider con las credenciales necesarias y cargar la fuente de forma asíncrona. Un truco vital aquí es establecer fuentes de resguardo (fallback); así, si la descarga falla por falta de conexión, el sistema utilizará una fuente local para que la interfaz no se rompa.Configuración de Tipografías y Familias de Fuentes
Aquí es donde la cosa se pone interesante. Las fuentes variables son archivos únicos que permiten ajustar ejes de diseño como el peso, la inclinación o el ancho sin necesidad de tener diez archivos diferentes. Esto solo es compatible con Android O en adelante, por lo que es obligatorio implementar una comprobación de la versión del SDK para ofrecer una fuente estática a los dispositivos más antiguos.
Lo más potente es que podemos manipular ejes personalizados. Por ejemplo, en fuentes como Roboto Flex, podemos alterar el
ascenderHeight (la altura de las letras minúsculas) o el counterWidth mediante FontVariation.Settings. Esto nos permite un ajuste quirúrgico de la tipografía según el espacio disponible o la intención comunicativa.El Poder de las Fuentes Variables
Más allá de la fuente, el componente Text nos permite jugar con el
fontSize (usando sp o dp), el letterSpacing para airear el texto y el lineHeight para mejorar la legibilidad de párrafos largos. Si queremos que el texto se corte con elegancia, combinamos maxLines con TextOverflow.Ellipsis, lo que añade los típicos puntos suspensivos al final de la frase cuando el contenido no cabe.Para llevar la estética al extremo, tenemos la API de Brush. En lugar de un color sólido, podemos aplicar un
linearGradient para que el texto tenga un degradado de colores. Esto se puede aplicar a todo el texto o solo a una parte usando SpanStyle. Además, si necesitamos que un texto largo se desplace automáticamente, el modificador basicMarquee() crea ese efecto de cinta animada tan útil en notificaciones o títulos extensos.A veces necesitamos que una sola línea tenga palabras en negrita, otras en azul y algunas en cursiva. Para esto existe
AnnotatedString. Usando el constructor buildAnnotatedString, podemos intercalar diferentes estilos mediante bloques withStyle, permitiendo que cada segmento de la frase tenga su propia identidad visual.Estilizado Detallado y Efectos Visuales
Otra funcionalidad muy potente es la capacidad de renderizar HTML con vínculos mediante
AnnotatedString.fromHtml(). Esto convierte etiquetas básicas de HTML en texto estilizado de Compose, permitiendo que los enlaces sean clicables y tengan un aspecto personalizado gracias a TextLinkStyles, lo que facilita enormemente la presentación de textos legales o informativos.Para no ir definiendo estilos en cada pantalla, lo ideal es centralizar todo en el archivo
Type.kt. Aquí definimos un objeto Typography que mapea los roles de Material Design 3 (como displayLarge, headlineMedium o bodySmall) a nuestros TextStyle personalizados. Al pasar este objeto al MaterialTheme, podemos invocar cualquier estilo simplemente llamando a MaterialTheme.typography.h6.Si en algún momento un texto específico necesita un pequeño ajuste sobre el estilo global, no hace falta redefinirlo todo; basta con usar la función copy de la data class. De esta manera, podemos mantener la base del tema pero añadir, por ejemplo, una sombra personalizada mediante la clase
Shadow, definiendo su desplazamiento y radio de desenfoque para ganar profundidad.Dominando estas herramientas, desde la gestión de archivos de fuentes y el aprovechamiento de las variables de Android O, hasta la sofisticación de los gradientes y las cadenas anotadas, conseguimos que la interfaz no solo sea funcional, sino que tenga un acabado profesional y pulido que mejora drásticamente la experiencia de usuario en cualquier aplicación moderna. Comparte esta guía y más usuarios sabrán del tema.
Continúar leyendo...