Avatar, Name & Bio Section
Assemble the header with image and text.
Avatar, Name & Bio Section is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Avatar, Name & Bio Section” lesson free?
Yes — the full text of “Avatar, Name & Bio Section” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Avatar, Name & Bio Section”?
Assemble the header with image and text. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Avatar, Name & Bio Section” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Sketch the Profile Card Layout
- Avatar, Name & Bio Section
- Stats Row & Follow Button
- Extract Reusable Composables