android-design

Diseño Android

Cómo Google diseña aplicaciones Android con Material 3 Expressive, traducido en decisiones y código Compose. Expressive no es un lenguaje de diseño separado: es Material 3 más APIs, componentes y tácticas de diseño optativos que Google llama un "paquete de expansión". Las pautas, investigaciones y nombres de API aquí provienen de m3.material.io, las guías de diseño de Android (developer.android.com/design/ui), la guía de diseño de Wear OS, charlas de Google I/O y Android Developers, y fuentes de androidx.

El hilo conductor: una pantalla se siente diseñada cuando el énfasis se gasta deliberadamente. Clasifica para qué sirve la pantalla, luego gasta tamaño, contraste de color, forma, tipografía, contención y movimiento en el objetivo principal, menos en el siguiente, y casi nada en el resto. El código Material estándar da el mismo peso a cada elemento, por eso parece una plantilla.

Las citas y reglas marcadas (Google) provienen de la guía de Google. Las reglas marcadas (default) son los puntos de partida de esta habilidad: síguelas a menos que la dirección de la pantalla dé una razón para no hacerlo.

Superficies. Esta habilidad se dirige a pantallas de teléfono, tableta, escritorio y Wear OS. Para una pantalla de Wear OS, lee references/wear-os.md primero; este archivo prevalece donde difieren. Usa la habilidad wear-compose-m3 para andamios y migraciones. Los tiles de Wear, las esferas de reloj y los widgets de pantalla de inicio están fuera de esta habilidad: usa la habilidad wear-widgets para widgets y tiles de Wear, y las habilidades Glance para widgets de pantalla de inicio.

Herramientas visuales

Implementar o revisar código Compose real necesita el CLI compose-preview y las habilidades compose-preview y compose-ui-builder: lee y sigue compose-preview, que es propietario de la selección de herramientas, renderizado y solución de problemas. Para una solicitud de diseño de UI Builder, sigue compose-ui-builder. Esta habilidad es propietaria de las decisiones de diseño y la verificación de pantalla. Si una dependencia no está disponible, repórtala y remite al usuario a la sección de configuración del README de este repositorio en lugar de instalar herramientas o sustituir otro renderizador.

Exploración o implementación

Cuando la solicitud se preocupa por el diseño de una nueva aplicación, una nueva pantalla o un rediseño (pide pulido, una dirección visual o Material 3 Expressive, o nombra esta habilidad), comienza con una propuesta, incluso si dice "construir": sigue la habilidad android-design-explore, muestra su propuesta en la aplicación de vista previa y espera a que el usuario apruebe una dirección antes de escribir cualquier Compose. Omite la propuesta cuando el usuario lo diga ("omite la propuesta", "solo codifícalo") o ya exista una propuesta aprobada; porta una propuesta aprobada con los pasos "Aprobar y portar" de esa habilidad, que comienzan con export_kotlin.

Una construcción simple que no pregunta sobre diseño va directamente al código, aplicando las decisiones y la verificación de pantalla a continuación.

Los cambios dentro de un diseño existente (una corrección, un ajuste, una revisión, un nuevo estado de una pantalla aprobada) van directamente al proyecto real bajo sus propias reglas de aprobación y rama, utilizando las decisiones de diseño y la verificación de pantalla a continuación.

0. Antes de escribir UI

Responde estas en tu respuesta antes de cualquier código, una o dos frases cada una. Saltarse este paso es lo que produce pantallas genéricas.

1. Clasifica los objetivos. ¿Cuál es la tarea principal en esta pantalla? ¿Cuál es secundaria y terciaria? (Google: "Simplificar a una tarea principal por página.")
2. Elige una dirección. Nombra el carácter emocional de la pantalla, el contenido o la interacción que la define, y una idea visual que una tipografía, imágenes, color y forma. Cada respuesta debe nombrar una decisión ("el conjunto total en numerales altos llena el tercio superior"), no un adjetivo ("moderno, limpio"). Si la idea describe cómo se ven ya la mayoría de las aplicaciones de este tipo, todavía no es una idea.
3. Decide el momento culminante. ¿Es esta pantalla uno de los uno o dos momentos culminantes del producto (la interacción más emocional o más central)? Si es así, planea cómo se combinan varias tácticas allí. Si no, mantenla tranquila (Google).
4. Elige la fuente de color. Dinámico (fondo de pantalla), marca (un esquema generado) o basado en contenido (de una imagen en la pantalla). Ver sección 4.
5. Gasta el énfasis por rango. El objetivo principal obtiene la mayor parte, generalmente el tamaño primero. Los objetivos secundarios obtienen menos tácticas; los terciarios obtienen contención y tipografía (Google). El contenido puede dominar la pantalla cuando es el producto, siempre que la acción principal permanezca inconfundible.
6. Elige componentes de la tabla de la sección 9, no de la memoria de Material anterior.
7. Responde la pregunta de adaptación. Para cada clase de tamaño que renderizarás (compacto; mediano o expandido; grande o extra grande), nombra lo que el espacio adicional revela: un segundo panel, un rail expandido, más detalle. Usa las cinco preguntas en references/layout.md, comenzando con "¿Qué se debe revelar?". La navegación se mantiene consistente: si un diseño más grande tiene un rail, el compacto tiene una barra de navegación para los mismos destinos. Para una pantalla basada en controles como un reproductor multimedia, los controles se redistribuyen y se revela el contenido. Un diseño más grande que solo es el contenido del teléfono distribuido más ancho no lo ha respondido: "El espacio adicional no solo significa hacer lo mismo más grande." (Google)

Luego compón la pantalla (sección 8), constrúyela y ejecuta la verificación de pantalla en el resultado renderizado.

1. Configuración del tema

Expressive necesita androidx.compose.material3:material3 1.5.0-alpha o posterior. La estable 1.4.0 no tiene casi ninguna de estas APIs. Busca la versión 1.5.x más reciente en Maven metadata en lugar de confiar en una recordada; las APIs alpha aún cambian entre versiones. Las alfas actuales también requieren compileSdk 37 y Android Gradle Plugin 9.1 o posterior.

@Composable
fun AppTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= 31 -> if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        dark -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        typography = AppTypography, // Google Sans Flex voices más una cara de marca opcional, ver sección 5
        content = content,
    )
}

• No hay expressiveDarkColorScheme; usa darkColorScheme() o un esquema oscuro generado.
• MaterialShapes, toShape(), LoadingIndicator y ContainedLoadingIndicator aún necesitan @OptIn(ExperimentalMaterial3ExpressiveApi::class). Todo lo demás aquí no es experimental en las alfas 1.5.0.
• Configuración completa, esquemas semilla, escalas de tipo personalizadas, morfología de formas, especificaciones de movimiento, espaciado y notas de versión: lee references/theming.md al configurar o cambiar un tema.

2. Énfasis y jerarquía

El énfasis es cómo las personas encuentran la acción principal: las acciones clave más grandes y la jerarquía deliberada reducen errores y hacen que los elementos clave de la UI sean más rápidos de encontrar (Google).

• El tamaño es la palanca más fuerte, y es relativo. "La acción más importante o la llamada a la acción principal debe ser el elemento más grande" (Google): las acciones clave más grandes significan menos errores y usuarios más satisfechos, por lo que la acción principal lidera las acciones a su alrededor, cualquiera que sea su tamaño. El contenido no compite con ella: una tarjeta de resumen o una fila de lista pueden ser físicamente más grandes. Comienza desde el tamaño predeterminado del componente con el relleno más fuerte (un botón pequeño; para un FAB, el "medium FAB es recomendado para la mayoría de situaciones" de Google) y agrándalo solo hasta que lidere a sus pares; un punto focal por pantalla, y cuando todo es grande, nada lo es. Las acciones agrupadas comparten un tamaño predeterminado ("todos los botones en un grupo estándar deben tener el mismo tamaño"), y la principal lidera a través del relleno o la forma: la regla de grupo de Google es "el más grande, el más ancho o el más visualmente prominente." El extra grande pertenece a un momento culminante liderado por control, como un reproductor o una sesión de respiración, donde el control es el contenido de la pantalla. La etiqueta establece el mínimo: Google dice "No trunques ni envuelvas el texto de la etiqueta" y un contenedor "no debe ser más estrecho que su texto de etiqueta." Cuando una etiqueta no cabe en una línea en el tamaño elegido en su contenedor (una tarjeta de ancho de teléfono, un panel), acórtala a 1 a 3 palabras, dale al botón más espacio o baja un tamaño (Google: el tamaño puede cambiar "a través de diferentes puntos de interrupción", y el énfasis viene "a través del tamaño, color o forma").
• Colocación: pon la acción clave donde ya están las manos y los ojos. El estudio de correo electrónico de Google: mover Enviar de un pequeño icono en la barra superior a un botón más grande justo encima del teclado, en secondary, hizo que la gente lo encontrara 4 veces más rápido; la pantalla de inicio de Aura coloca su botón de inicio extra grande abajo, último en el flujo vertical. Elige la posición a partir de la interacción y el espacio que necesita el contenido (default).
• La acción principal obtiene el relleno más fuerte (Google: los roles principales van a las llamadas a la acción cruciales; botones rellenos con moderación). Las acciones secundarias son tonales o estándar; los alternadores como favorito muestran estado con un icono relleno o un contenedor tonal, no un segundo relleno fuerte que compite con el control principal.
• Contraste entre roles, no un rol en todas partes: primary para la acción principal, secondary o secondaryContainer para controles de apoyo, tertiary para estado o acentos. Usar primary y primaryContainer para todo aplana la pantalla.
• Contención: agrupa elementos relacionados en contenedores; dale al contenido más importante "espacio amplio y la superficie más brillante."
• Los resúmenes apoyan la tarea, no la superan. Cuando el objetivo principal es actuar sobre una lista (marcar hábitos, responder mensajes), el siguiente elemento accionable debe seguir siendo lo más atractivo en la pantalla. Las tarjetas de estadísticas pueden ser audaces, pero da a las filas accionables contenedores claros y deja que los elementos completados retrocedan (color más silencioso, sin relleno fuerte), agrupados por estado en lugar de entremezclados (sección 8). El resaltado de selección es para lo que el usuario eligió, no para lo que está terminado.
• Orden de trabajo: construye la jerarquía primero (tamaño, color, espaciado, colocación, contención), luego agrega énfasis único (forma, escala, morfología) para celebrar el éxito o el progreso.

Ejemplo trabajado de Google: la aplicación de respiración Aura

Cada pantalla gasta énfasis por rango de objetivo. Usa esto como plantilla de razonamiento.

Pantalla	Rango	Énfasis
Inicio	Principal: iniciar una sesión	Botón "Iniciar respiración" extra grande en primary oscuro sobre una superficie suave, abajo en la pantalla. Configuración agrupada como elementos de lista en secondary. Mensaje diario en un contenedor suave, menor énfasis.
Sesión	Momento culminante	Una forma de flor que llena la pantalla (MaterialShapes.Flower y Sunny) crece y se encoge con cada respiración en movimiento de resorte; amarillo vibrante en inhalación; enormes numerales de cuenta regresiva contra pequeñas etiquetas; pausa/detener pequeño abajo; barra de navegación oculta.
Informe	Secundario	Menos tácticas "para reducir la carga cognitiva": métricas en formas de flor uniformes, números enfatizados, un botón Finalizar mediano (no XL).
Progreso	Terciario	Sutil: datos clave en primary, días completados como pequeñas formas secundarias, números "lo suficientemente grandes para escanear, pero no dominan."

Su lección de v1 a v2: configuraciones no agrupadas de tamaño similar y color inconsistente competían por la atención; agruparlas sobre un botón extra grande pasó "de desordenado a tranquilo."

3. Momentos culminantes y moderación

"Los momentos culminantes usan múltiples tácticas expresivas para romper con ideas de diseño predecibles o aplicadas uniformemente."

• Un momento culminante superpone tipo, forma, color, movimiento y componentes flexibles en la interacción clave del producto: el marcador del teléfono, un reproductor multimedia, un objetivo completado, una sesión de respiración. Pregunta: ¿es emocionalmente impactante? y ¿es una interacción clave?
• Uno o dos por producto. Son "breves, encantadores, sorprendentes e inesperados"; más que eso abruma.
• Las pantallas secundarias usan menos tácticas. No combines todas las tácticas en todas partes.
• En un momento culminante, una cosa personalizada se mueve: mantén el texto estable mientras la forma anima (Google). Las morfologías de componentes integradas (un botón que cambia de forma al presionar) no cuentan.
• Cuando el contenido es el producto, el contenido es el héroe. En reproductores, galerías y viajes, dale a la carátula del álbum o la foto escala y deja que su color establezca la pantalla. Una máscara de forma de biblioteca, un sangrado completo o un título superpuesto sobre la imagen son opciones, no requisitos: un recorte redondeado ordinario es igual de fuerte cuando la composición a su alrededor lleva la idea.
• Mantén patrones familiares. Expressive estiliza los patrones; no los reemplaza. En las pruebas de Google, una lista de reproducción reconstruida como carátulas de álbum dispersas "parecía moderna y emocionante" pero la gente no la reconoció como una lista de reproducción, y eliminar las etiquetas de texto de las acciones de correo electrónico perjudicó la usabilidad. El contexto también importa: lo que se adapta a un reproductor multimedia puede no adaptarse a una aplicación bancaria.
• "Ninguna cantidad de emoción puede compensar la falta de claridad." Expressive agudiza una pantalla que ya funciona; no rescata una confusa.

4. Color

• El generador hace la paleta; tú asignas los roles. Las utilidades de color de Material convierten un color fuente en los roles de acento, superficie, claro y oscuro (Google). Toma la paleta generada tal como viene y gasta el esfuerzo de diseño en qué elemento obtiene qué rol.
  • Dinámico (fondo de pantalla) es la recomendación de Google y da personalización. La actualización M3 Expressive hizo el color dinámico más rico en la fuente ("mayor croma en todos los tonos"); las aplicaciones lo obtienen automáticamente. La aplicación comparte tonos con el resto del teléfono, por lo que su identidad proviene de la jerarquía, la forma y el tipo.
  • Marca le da a la aplicación su propia identidad: un esquema generado a partir del color de marca con Material Theme Builder, o con MaterialKolor en tiempo de ejecución en el estilo de paleta predeterminado (referencia de theming). No eleves un estilo de paleta para que parezca "más expresivo": PaletteStyle.Expressive de MaterialKolor es una variante de esquema que cambia el tono, no relacionada con M3 Expressive, y aleja la paleta del tono de la marca.
  • Basado en contenido colorea un área contenida de la pantalla (una tarjeta, una fila) a partir de una imagen que ya está allí, y no debería usarse para toda la aplicación. Fotos con un color extraído de Material Image Utilities (MaterialColors) detrás de contenido semitransparente o un gradiente coincidente.
• Usa contraste de color para la jerarquía, no solo el estado. En Material base, el color primario es el mismo para un botón relleno y un chip en estado de error. En Expressive, el terciario o los contenedores reservan el contraste para el rol que sirven. Para una pantalla de formulario, el botón Enviar en primario se destaca más de los campos donde el usuario está que el contorno gris base (Google).
• No hay un solo color que se vea más expresivo. Un monocromo azul marino pegado con detalles naranjas en forma y tipo es más fuerte que usar los seis colores del arcoíris (Google).

5. Tipografía

• Usa Google Sans Flex o la cara de marca de la aplicación configurada como la familia base. Asigna Voces a roles de contenido (título, cuerpo, etiqueta) con pesos y anchos variables para la distinción jerárquica en lugar de agregar más familias. Ver references/typography.md.
• El tamaño de tipo debe ser legible. El tamaño de tipo base mínimo es 16sp para cuerpo en la mayoría de pantallas; las etiquetas pueden ser de 14sp en pantallas de muñeca donde el espacio es más ajustado. (Google)
• Las Voces no son estilos de tipo. En Material 3 base, usas MaterialTheme.typography.titleLarge y bodyMedium, que son estilos con tamaño y peso fijos. Las Voces son ejes variables: una Voz de título puede tener wght 600 y wdth 100, una Voz de cuerpo wght 400 y wdth 100, y escalan con el nivel de énfasis que elijas.
• Jerarquía de tipo. La acción principal puede usar un título de Voz sobre un cuerpo de Voz para las etiquetas de los botones. El contenido secundario usa cuerpo de Voz. El terciario usa etiqueta de Voz. No inviertas el orden: si el título es más pequeño que el cuerpo, la jerarquía visual sufre.

6. Forma

• Material 3 tiene formas de superficie predefinidas (extra pequeña, pequeña, mediana, grande, extra grande). Expressive agrega formas personalizadas (MaterialShapes): Flor, Hoja, Ola, Diamante, entre otras. Apunta a estas para momentos culminantes o áreas de contenido que quieras que se sientan distintas (Google).
• Usa formas con moderación. Una forma de flor en una tarjeta de resumen en la pantalla de inicio es un toque; una forma de flor en cada tarjeta es abrumadora.
• Las formas deben coincidir con el contenido. Una forma de hoja para una aplicación de naturaleza, una forma de ola para una aplicación de música. Una forma de diamante para una aplicación de joyería. No uses formas solo porque se vean bien; úsalas porque apoyan la historia.
• Las formas morfosean entre sí. MaterialShapes tiene una API toShape que anima entre dos formas. Usa esto para transiciones donde la forma cambia para reflejar el estado (Google: una tarjeta que se expande en un botón debe morfosear su forma).
• Las formas no son solo recortes. También pueden ser fondos de contenedor, marcos de imágenes o fondos de botones. Experimenta con la colocación.

7. Movimiento

• Material Motion en Compose es MotionScheme.expressive() (ver sección 1). Usa esto como base para todo el movimiento en la aplicación.
• El movimiento debe ser intencional. No agregues movimiento a cada elemento; agrégalo donde apoya la comprensión de la transición o la interacción (Google).
• El movimiento de resorte es el predeterminado. Para momentos culminantes, usa curvas de resorte con una rigidez más baja (más rebote) para duración de resorte. Para elementos secundarios, usa curvas de resorte con una rigidez más alta (menos rebote).
• La duración debe ser corta. Google recomienda 300-500ms para la mayoría de las transiciones; 600-800ms para momentos culminantes. No excedas 1 segundo para una animación de UI.
• Las transiciones compartidas (Elemento compartido) son clave para momentos culminantes. Cuando un elemento de la pantalla de inicio se convierte en el contenido de la pantalla de detalles, la forma, el tamaño y el color deben animarse juntos.
• Mantén el texto estable. En una transición compartida, el texto puede permanecer en su lugar mientras la forma de fondo se expande, o el texto puede disolverse mientras la forma se mueve. No animes el texto en una dimensión que cambie su significado.

8. Composición de la pantalla y diseño

• Diseña para el contenido. No empieces con un diseño; empieza con el contenido que la pantalla necesita mostrar, luego colócalo en orden de prioridad (objetivo principal, secundario, terciario).
• Usa los componentes de Material 3. No reinventes ruedas. Usa Scaffold, TopAppBar, NavigationBar, NavigationRail, BottomSheet, Card, List, Grid, Tab, Slider, Switch, Checkbox, RadioButton, Button, FloatingActionButton, ExtendedFloatingActionButton, TextField, DropdownMenu, ModalBottomSheet, AlertDialog, etc.
• Para diseño de lista-detalle, usa ListDetailPaneScaffold de material3 (API 1.5.0). Sigue references/layout.md para decisiones de adaptación.
• Para pantallas de control (reproductor, temporizador, cámara), el control principal debe ser el elemento más grande y más central. Los controles secundarios (pausa, skip, grabar) son más pequeños y están alrededor, con el control principal en el centro.
• Para pantallas de contenido (artículo, galería, perfil), el contenido debe dominar, y la navegación es secundaria.
• Para formularios, agrupa elementos relacionados en contenedores (tarjetas, secciones). El botón Enviar debe ser un botón relleno en la parte inferior del formulario, y los campos deben tener el contorno gris base para que el botón se destaque (Google).
• Para listas, la fila de acción (responder, marcar como hecho) debe estar en un contenedor claro con relleno tonal (el color secondary del contenedor) y los elementos completados deben retroceder (color más silencioso, sin relleno fuerte), agrupados por estado en lugar de entremezclados.

9. Tabla de selección de componentes

Usa esta tabla para elegir el componente correcto para cada rol, no confíes en la memoria de Material anterior.

Rol	Componente	Notas
Obtener entrada	TextField	OutlinedTextField o FilledTextField
Elegir de opciones	Opción única: RadioButton; múltiple: Checkbox; alternar: Switch	Agrupa con Column de opciones
Acción principal	Button, FloatingActionButton, ExtendedFloatingActionButton	Usa primaryContainer para la acción principal si es una acción de contenido, primary para una acción del sistema
Acción secundaria	OutlinedButton, TextButton	secondaryContainer o tertiary
Navegación inferior	NavigationBar en diseño compacto, NavigationRail en mediano/expandido	Mismo destino en ambos
Tab	TabRow, Tab	Horizontal o vertical
Hoja inferior	ModalBottomSheet	Para acciones contextuales
Diálogo	AlertDialog	Para confirmación, advertencia
Tarjeta	Card	ElevatedCard, OutlinedCard, FilledCard
Progreso	LinearProgressIndicator, CircularProgressIndicator	También LoadingIndicator (Expressive)
Separador	Divider
Barra superior	CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar
Rejilla	LazyVerticalGrid o FlowRow	Para galería, íconos
Lista	LazyColumn, LazyRow	Con Card o filas personalizadas
Snap	Snapper	Para carruseles
Control de medios	Slider	Con Slider.Step para pasos discretos

10. Prueba de pantalla

Después de renderizar la pantalla, responde estas preguntas en tu respuesta, una o dos frases cada una. Si todas se responden, pásala; si no, vuelve a la sección de composición.

1. ¿La acción principal es inconfundible? (Google: "El ojo debe ir a la acción principal en un segundo".) Si no, aumenta el énfasis (tamaño, color, forma) en el botón o control principal.
2. ¿La jerarquía coincide con el objetivo? ¿El elemento de mayor rango tiene el mayor énfasis visual? Si no, ajusta.
3. ¿Hay un momento culminante? Si la pantalla es un momento culminante del producto, ¿las tácticas se combinan allí? Si no, ¿por qué?
4. ¿Los elementos secundarios y terciarios están tranquilos? (Google: "Los momentos culminantes se sienten intensos porque otros elementos son tranquilos".) Si no, reduce una táctica de los elementos no primarios: menos color, menos forma, menos movimiento, menos tamaño.
5. ¿La adaptación está resuelta? Para cada clase de tamaño, ¿lo que el espacio adicional revela se alinea con los objetivos de la pantalla? ¿La navegación es consistente? Si no, vuelve a la pregunta de adaptación (sección 0.7).
6. ¿El componente elegido es de la tabla de la sección 9? Si no, cámbialo.
7. ¿La experiencia es consistente con la plataforma? ¿Los patrones de interacción son familiares? (Google: "No fuerces a los usuarios a aprender nuevos patrones".)
8. ¿El color proviene de la fuente elegida? (Sección 0.4). ¿El esquema de color dinámico se aplica correctamente? ¿El esquema de marca se genera desde el color de marca?

11. Referencias

• m3.material.io - Guía oficial de Material Design 3
• developer.android.com/design/ui - Guía de diseño de Android
• Guía de diseño de Wear OS
• Material 3 para Compose
• Material Motion para Compose
• Material3: MaterialExpressiveTheme
• Maven metadata para material3
• references/layout.md - Pautas de diseño adaptativo
• references/theming.md - Configuración avanzada del tema
• references/typography.md - Pautas de tipografía
• references/wear-os.md - Pautas de Wear OS (prevalece sobre este archivo para pantallas de Wear)