Android Academy · Lección

Crear una tarjeta de perfil

Combine composables en una pantalla

Crear una tarjeta de perfil es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Nuestro objetivo

Es hora de combinar lo que ha aprendido. Crearemos una sencilla tarjeta de perfil: un nombre y un puesto apilados ordenadamente en un cuadro con estilo.

Durante el proceso conocerá Modifier, que controla el tamaño, el espaciado y el aspecto de los composables.

Conozca Modifier

Un Modifier cambia el aspecto y el comportamiento de un composable. Se pasa mediante el parámetro modifier, que la mayoría de los composables aceptan.

Los modificadores gestionan el relleno, el tamaño, el color de fondo, los bordes y mucho más. Son la principal forma de decorar la interfaz de usuario en Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Encadenar modificadores

Para crear un modificador, encadene llamadas mediante puntos. Cada llamada devuelve un modificador nuevo, por lo que puede combinar varios.

El orden es importante: colocar el relleno antes del fondo produce un resultado distinto que colocarlo después. Lea la cadena de izquierda a derecha, como si fuera una receta.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Ocupar todo el ancho

El modificador fillMaxWidth hace que un composable se extienda por todo el espacio horizontal disponible. Es perfecto para tarjetas que deben ocupar todo el ancho de la pantalla.

También existe fillMaxSize para ambas direcciones y size para establecer un ancho y una altura fijos.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Añadir relleno

El relleno añade espacio dentro de un composable, entre su borde y su contenido. Use Modifier.padding con un valor en dp.

El relleno evita que el texto toque los bordes de una tarjeta, lo que hace que el diseño resulte cómodo y limpio.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Añadir un fondo a la tarjeta

Un color de fondo ayuda a destacar la tarjeta. Aplíquelo con el modificador background y un valor de color.

Combínelo con relleno para que el área coloreada tenga espacio alrededor del texto interior.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Apilar el nombre y el puesto

Dentro del Column de la tarjeta, apilamos dos fragmentos de texto: un nombre en negrita arriba y el puesto, con un peso de fuente más ligero, debajo.

Establecer distintos valores de fontSize y fontWeight crea una jerarquía visual clara entre ambos.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Hacerlo reutilizable

Convirtamos la tarjeta en un composable reutilizable que acepte un name y un title como parámetros. Ahora podrá mostrar a cualquier persona.

Es la misma idea de la primera lección: pasar los datos y reutilizar la interfaz de usuario en cualquier lugar.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

La tarjeta de perfil completa

Aquí tiene la tarjeta con todos los elementos: una columna de ancho completo, un fondo gris, relleno y dos líneas de texto con estilo.

Observe cómo la cadena de modificadores y los elementos secundarios de la columna combinan todo lo aprendido en las lecciones anteriores en un único composable ordenado.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

Obtener una vista previa de la tarjeta

Añada un contenedor @Preview para ver la tarjeta en Android Studio. Este llama a ProfileCard con datos de ejemplo y muestra un fondo.

Ahora puede ajustar el relleno o los colores y observar cómo el resultado se actualiza al instante.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Mostrarla en pantalla

Para mostrar la tarjeta en la aplicación en ejecución, llámela dentro de setContent en su actividad. Así conectará el composable con la pantalla activa.

Ahora ha pasado de un único composable a un componente de interfaz de usuario completo y reutilizable.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Comprobación rápida

Repasemos cómo reciben los composables su relleno, tamaño y fondo.

Resumen

Ha creado una tarjeta de perfil completa combinando Text, Column y Modifier. Los modificadores le permiten encadenar padding, fillMaxWidth y background para dar forma y estilo a su interfaz de usuario.

Ha hecho que la tarjeta sea reutilizable mediante los parámetros name y title, ha obtenido una vista previa con @Preview y la ha mostrado mediante setContent. Ha creado una pantalla completa con composables de principio a fin. ¡Enhorabuena!

Preguntas frecuentes

¿La lección «Crear una tarjeta de perfil» es gratis?

Sí — el texto completo de «Crear una tarjeta de perfil» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Crear una tarjeta de perfil»?

Combine composables en una pantalla Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Crear una tarjeta de perfil»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy