Sección de avatar, nombre y biografía
Construya la cabecera con imagen y texto.
Sección de avatar, nombre y biografía es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 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 Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Build the Header First
Time to make the sketch real. You will start at the top of the card with the header: the avatar, the name, and a short bio. 👤
The Avatar Image
The avatar is an Image Composable that draws a drawable resource. Give it a clear size so it never balloons to fill the screen.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo"
)Make It a Circle
Profile photos look best as circles. Chain clip with CircleShape on the Image modifier to round it into a perfect avatar.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo",
modifier = Modifier.size(96.dp).clip(CircleShape)
)Add the Name
Below the avatar comes the display name. A simple Text Composable shows the string the user will read first.
Text(text = "Ada Lovelace")Style the Name
Names should stand out. Pass a style from MaterialTheme typography so the name looks like a proper heading.
Text(
text = "Ada Lovelace",
style = MaterialTheme.typography.titleLarge
)The Bio Text
Under the name, add a one-line bio with another Text. Use a smaller, softer style so it reads as a subtitle, not a headline.
Text(
text = "Building delightful apps.",
style = MaterialTheme.typography.bodyMedium
)Stack Them in a Column
Avatar, name, and bio stack vertically, so wrap all three in a Column. The order you write them is the order they appear.
Column {
Image(/* avatar */)
Text("Ada Lovelace")
Text("Building delightful apps.")
}Center Everything
Headers feel balanced when centered. Set horizontalAlignment to CenterHorizontally on the Column to line up the avatar and text.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }Add Vertical Spacing
Cramped headers look messy. Use Arrangement.spacedBy on the Column to drop a consistent gap between the avatar, name, and bio.
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }Pad the Header
Give the whole section room to breathe by adding padding to the Column modifier. Edges should never touch the screen frame.
Column(
modifier = Modifier.padding(16.dp)
) { /* ... */ }Header Section Done
You now have a clean header: a circular avatar, a bold name, and a soft bio, centered and spaced. The top of your card is finished. 🎉
Quick Check
How do you turn a square photo into a round avatar?
Recap: The Header
You built the header inside a centered Column: a clipped circular avatar, a styled name, and a subtle bio, all padded and spaced. Next you will add the stats row.
Preguntas frecuentes
¿La lección «Sección de avatar, nombre y biografía» es gratis?
Sí — el texto completo de «Sección de avatar, nombre y biografía» 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 Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Sección de avatar, nombre y biografía»?
Construya la cabecera con imagen y texto. Practicas Jetpack Compose 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 Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose 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 2 de 4.
¿Cuánto tiempo toma la lección «Sección de avatar, nombre y biografía»?
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 Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose 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
- Esbozar el layout de una tarjeta de perfil
- Sección de avatar, nombre y biografía
- Fila de estadísticas y botón Follow
- Extraer Composables reutilizables