Jetpack Compose Academy · Lektion

Avatar-, Namens- und Biografie-Bereich

Setzen Sie den Kopfbereich aus Bild und Text zusammen.

Avatar-, Namens- und Biografie-Bereich ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Avatar-, Namens- und Biografie-Bereich“ kostenlos?

Ja — der vollständige Text von „Avatar-, Namens- und Biografie-Bereich“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Avatar-, Namens- und Biografie-Bereich“?

Setzen Sie den Kopfbereich aus Bild und Text zusammen. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Avatar-, Namens- und Biografie-Bereich“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy