Configurar la identidad visual de una app Android empieza por definir un sistema de diseño en Jetpack Compose con Material 3, el estándar nativo que combina colores, tipografía y formas para soportar modos claro y oscuro. Aquí aprendes a estructurar tokens de color, escoger fuentes con Google Fonts y exportar tu tema desde Material Theme Builder hacia un proyecto real.

¿Qué es Material 3 y cómo organiza los colores?

Material 3 es el sistema de diseño por defecto de los componentes nativos de Android y propone una paleta tokenizada con intención semántica. Cada color tiene un propósito y un par que lo acompaña.

La lógica se repite por superficies: un color de fondo y otro pensado para el contenido que va encima. Así mantienes contraste y legibilidad sin pensarlo dos veces.

• primary y on primary: el color principal de la marca y el texto o iconos que van sobre él.
• secondary y on secondary: refuerzan jerarquía visual en elementos secundarios.
• error y on error, junto con error container y on error container: comunican estados de error.
• surface dim, surface y surface bright: cubren fondos generales con distintos niveles de luminosidad.

Los tokens primary, secondary y tertiary se usan para enfatizar elementos como botones o tarjetas que resaltan sobre el background, mientras que los containers dan soporte a elementos interactivos sobre la superficie [01:35].

¿Para qué sirve el token surface en Material 3? Surface define el color base de fondos y contenedores neutros. Sus variantes (dim, bright) ajustan luminosidad para crear jerarquía visual sin introducir color de marca.

¿Cómo se estructura la tipografía en Material 3?

Material 3 organiza la tipografía en cinco familias de tokens, ordenadas de mayor a menor tamaño, y cada familia se divide en large, medium y small [03:00].

• Display styles: textos muy grandes, pensados para impacto visual.
• Headline styles: encabezados destacados, un escalón debajo de display.
• Title styles: ideales para describir secciones dentro de tus vistas.
• Body styles: párrafos y contenido corrido de la app.
• Label styles: etiquetas, chips y elementos de menú.

Esta jerarquía te ayuda a comunicar intención con solo elegir el token correcto, sin definir tamaños manualmente cada vez.

¿Cómo generar el tema con Material Theme Builder?

Material Theme Builder permite escoger un source color y una tipografía base, y genera automáticamente los esquemas light y dark con todos los tokens listos para exportar [04:30].

En el ejemplo de la app de tareas, se eligió un color que evoca una hoja de papel para reforzar el concepto del producto. Para la fuente, se descartó Roboto (la default de Android) y se eligió Poppins desde Google Fonts por su estilo sobrio.

Al exportar, la herramienta ofrece formatos para Flutter, web, JSON, XML y Jetpack Compose. Eligiendo Compose, descargas un paquete con dos carpetas: ui y resources.

¿Qué archivos descarga Material Theme Builder para Compose? Genera tres archivos de tema (Color, Theme, Type) dentro de ui/theme y un certificado de fuentes dentro de resources/values.

¿Cómo integrar el tema descargado en tu proyecto?

El proceso de integración tiene tres pasos clave que conviene revisar con calma para evitar errores de compilación [07:20].

1. Copia los archivos de la carpeta ui/theme y reemplaza los temas por defecto de tu proyecto.
2. Ajusta el package name de cada archivo (Color, Theme, Type) para que coincida con el de tu app, por ejemplo com.juangaena.todoapp.ui.theme.
3. Copia font_certificates desde resources/values a tu carpeta res/values.

El archivo Type.kt marca clases en rojo porque depende de la librería de Google Fonts. Posiciona el cursor en el área roja, presiona Option + Enter y elige Add library dependencies and import. Android Studio actualiza el build.gradle agregando androidx.ui.text.google.fonts automáticamente.

¿Por qué necesito el certificado de fuentes?

Cuando descargas fuentes de forma dinámica en tiempo de ejecución, Google Fonts actúa como proveedor remoto. El certificado le permite a Android verificar que la fuente proviene de una fuente verídica antes de cargarla en pantalla.

Sin ese archivo font_certificates, la app no puede validar el origen y la fuente no se renderiza.

¿Cómo simplificar el theme para light y dark mode?

El archivo Theme.kt generado incluye esquemas de contraste medio y alto que rara vez se usan. Para una app sencilla, deja solo lightScheme y darkScheme y elimina las variantes intermedias.

Refactoriza el composable AppTheme con clic derecho > Refactor > Rename a algo más descriptivo como TodoAppTheme. Esta función recibe tres parámetros originalmente:

• darkTheme: detecta si el sistema está en modo oscuro vía isSystemInDarkTheme().
• dynamicColor: adapta colores al fondo de pantalla del usuario en Android 12 o superior.
• content: el contenido composable que se va a envolver con el tema.

Para este caso, elimina dynamicColor porque no quieres que el tema cambie según el wallpaper del dispositivo. Deja una condicional simple: si darkTheme es true, aplica darkScheme; si no, aplica lightScheme.

¿Cómo probar el tema en el emulador?

Una vez aplicado el tema en MainActivity, el Hello World cambia su color de fondo según el esquema activo. Para alternar entre modos, abre el menú del emulador y agrega la opción dark theme arrastrándola desde el modo edición del menú.

Al activarla, ves cómo la misma pantalla cambia de fondo claro a oscuro respetando los tokens definidos en tu paleta.

¿Qué color base elegiste para tu sistema de diseño y por qué? Comparte un screenshot de tu app en light y dark mode en los comentarios.