Jetpack Compose Academy · Lektion

Labels, Platzhalter und führende Icons

Machen Sie Eingabefelder verständlich und benutzerfreundlich.

Labels, Platzhalter und führende Icons 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.

Make Inputs Friendly

A bare box leaves users guessing. Labels, placeholders, and icons turn a plain field into one that guides the user. 🧭

The label Slot

The label names the field. It sits inside when empty, then floats up to the border once the field is focused or filled.

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Add a Placeholder

A placeholder is hint text shown only while the field is empty. Use it for an example, not for the field's name.

placeholder = { Text("you@example.com") }

Label vs Placeholder

The label always stays visible to identify the field. The placeholder vanishes the instant the user starts typing. Use both together.

Leading Icons

A leadingIcon sits at the start of the field. An envelope next to an email box makes its purpose obvious at a glance.

leadingIcon = {
    Icon(Icons.Default.Email, contentDescription = null)
}

Trailing Icons Too

A trailingIcon sits at the end. It is perfect for a clear button or a password visibility toggle.

trailingIcon = {
    Icon(Icons.Default.Clear, contentDescription = "Clear")
}

Always Describe Icons

Give each Icon a contentDescription so screen readers can announce it. Pass null only when the icon is purely decorative.

Make the Trailing Icon Tappable

Wrap a trailing icon in an IconButton so users can tap it, for example to clear the field in one touch.

trailingIcon = {
    IconButton(onClick = { email = "" }) {
        Icon(Icons.Default.Clear, "Clear")
    }
}

Supporting Text

supportingText shows a small hint below the field, like a format reminder or a character limit, without crowding the input.

supportingText = { Text("We never share your email.") }

Combine Them Thoughtfully

Label plus icon plus a short placeholder is plenty. Too many hints add noise, so keep each field calm and clear.

Slots Are Just Composables

Every slot, like label and leadingIcon, is a lambda holding Composables. That means you can put any UI you want inside them.

Quick Check

When does a placeholder disappear from a text field?

Recap

You dressed up inputs with a label, placeholder hints, leading and trailing icons, and supporting text. Friendly fields, happy users. 😊

Häufig gestellte Fragen

Ist die Lektion „Labels, Platzhalter und führende Icons“ kostenlos?

Ja — der vollständige Text von „Labels, Platzhalter und führende Icons“ 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 „Labels, Platzhalter und führende Icons“?

Machen Sie Eingabefelder verständlich und benutzerfreundlich. 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 „Labels, Platzhalter und führende Icons“?

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