Crear interfaces Android con Jetpack Compose
Aprende a construir pantallas declarativas con Column, Row, Text y Button.
Diseñar una pantalla adaptable y reutilizable sin archivos XML de vista.
Antes de comenzar
Parte de un proyecto de prueba o de una copia de trabajo de tu aplicación. Revisa versiones, permisos y dependencias en los enlaces oficiales del final: las plataformas Android y los servicios de Google pueden actualizar sus requisitos.
El objetivo de esta guía es aplicar un proceso concreto y comprobar su resultado. Documenta cualquier cambio relevante para poder mantenerlo y, cuando corresponda, medir sus efectos con datos.
Cómo hacerlo
Abre un proyecto creado con la plantilla…
Abre un proyecto creado con la plantilla Compose y ubica la función setContent de la actividad.
Crea una función anotada @Composable que reciba…
Crea una función anotada @Composable que reciba datos como parámetros y no dependa de variables globales.
Organiza Text, Button y otros componentes dentro…
Organiza Text, Button y otros componentes dentro de Column o Row; utiliza Modifier para tamaño, padding y alineación.
Separa un componente reutilizable de la pantalla…
Separa un componente reutilizable de la pantalla principal y prepara una vista previa con @Preview.
Comprueba temas, contraste, fuente grande y orientación…
Comprueba temas, contraste, fuente grande y orientación horizontal; usa elementos accesibles y tamaños de toque apropiados.
Visualiza la vista previa y luego ejecuta…
Visualiza la vista previa y luego ejecuta el proyecto en un dispositivo para comprobar interacciones reales.
@Composable
fun Bienvenida(onContinuar: () -> Unit) {
Column(modifier = Modifier.padding(24.dp)) {
Text("Bienvenido", style = MaterialTheme.typography.headlineMedium)
Spacer(Modifier.height(12.dp))
Text("Aprende a crear apps Android con Kotlin.")
Button(onClick = onContinuar) { Text("Comenzar") }
}
}Fragmento educativo: adapta las importaciones, clases, dependencias y versiones a tu proyecto. Consulta la documentación oficial antes de integrarlo.
Ejercicio práctico
Crea una pantalla de bienvenida con título, explicación y botón cuyo texto esté preparado para localización.
Un diseño que se ve bien en la vista previa puede desbordarse en pantallas pequeñas; comprueba tamaños y accesibilidad.
Cómo verificar el resultado
- Completa los pasos anteriores en un entorno de pruebas antes de distribuir cambios.
- Comprueba que la función, configuración o estrategia responde al objetivo planteado.
- Revisa errores, impacto para usuarios y políticas aplicables a tu caso.
- Conserva la evidencia y anota qué deberás revisar cuando cambien las versiones.
Fuentes oficiales para profundizar
Consulta los requisitos y ejemplos vigentes en estas fuentes antes de publicar una implementación.