TextInputLayout: Was es ist, Material Design und Einrichtung in Android

Was ist TextInputLayout in Android

TextInputLayout ist eine ViewGroup aus dem Paket com.google.android.material.textfield, die LinearLayout erweitert und ein EditText enthält. Die Komponente ist Teil der Material Components-Bibliothek für Android, beginnend mit Version 1.0.0. Das Hauptziel von TextInputLayout ist es, eine fertige Implementierung von Material Design-Textfeldern mit minimalem Aufwand für den Entwickler bereitzustellen.

Im Gegensatz zu einem standardmäßigen EditText verwaltet TextInputLayout die Animation des Floating Labels, das über das Attribut android:hint des inneren EditText festgelegt wird. Wenn das Feld leer ist, wird das Label als normaler Hinweis im Feld angezeigt. Sobald der Benutzer mit der Eingabe beginnt, bewegt sich das Label animiert an die obere Seite des Feldes und verkleinert sich. Laut den Material Design Guidelines (2025) verbessert diese Animation die Wahrnehmung des Formulars, da der Benutzer den Feldnamen auch nach der Dateneingabe immer sieht.

Architektonisch implementiert TextInputLayout das Dekorator-Muster: Es fängt EditText-Ereignisse ab, verwaltet die Anzeige zusätzlicher Elemente (Label, Fehler, Symbole, Zähler) und koordiniert deren Animation. Das innere EditText ist über die Methode getEditText() zugänglich und kann mit Standardattributen wie inputType, maxLines und hint konfiguriert werden.

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Floating Label und seine Konfiguration

Das Floating Label ist die Hauptfunktion von TextInputLayout. Wenn das Feld leer ist, wird der Text von android:hint als normaler Platzhalter im EditText angezeigt. Wenn das Feld den Fokus erhält oder Text eingegeben wird, steigt das Label an die Oberseite von TextInputLayout, reduziert die Schriftgröße und ändert die Farbe. Dieses Verhalten löst das Problem, dass der Hinweis nach Beginn der Eingabe unsichtbar wird.

Die Konfiguration des Floating Labels erfolgt über TextInputLayout-Attribute: app:hintEnabled bestimmt, ob das Floating Label aktiviert ist (Standard true), app:hintAnimationEnabled aktiviert oder deaktiviert die Übergangsanimation, app:expandedHintEnabled erlaubt die Anzeige des Labels auch wenn das Feld leer und nicht fokussiert ist. Die Farbe des Labels in verschiedenen Zuständen wird über die Stile colorPrimary und colorControlHighlight gesteuert.

Laut Google Material Components Team (2025) ist das Floating Label besonders nützlich in Formularen mit vielen Feldern, bei denen der Benutzer den Feldnamen nach Beginn der Eingabe vergessen könnte. Im Gegensatz zu einem einfachen android:hint, das bei der Eingabe verschwindet, bleibt das Floating Label stets sichtbar und bietet Kontext für jedes Feld.

Fehleranzeige in TextInputLayout

TextInputLayout bietet ein integriertes Fehleranzeigesystem, das visuell mit dem Eingabefeld verbunden ist. Beim Setzen eines Fehlers über die Methode setError hebt die Komponente das Feld hervor (die Linien- oder Umrandungsfarbe wechselt zu Rot) und zeigt den Fehlertext unter dem Feld an. Dies macht ein separates TextView für Fehlermeldungen überflüssig.

Die Verwaltung der Fehleranzeige erfolgt über die Methoden setError(CharSequence) und setErrorEnabled(boolean). Beim Aufruf von setError mit Text wird der Fehler sofort angezeigt; beim Aufruf von setError(null) wird er ausgeblendet. TextInputLayout unterstützt auch ein benutzerdefiniertes Fehlersymbol über das Attribut app:errorIconDrawable und die Fehlerfarbverwaltung über app:errorTextColor.

Laut den Material Design Guidelines (2025) sollten Fehlermeldungen spezifisch und hilfreich sein: Statt „Ungültige Eingabe“ schreiben Sie „E-Mail muss @ enthalten“. Die Fehleranzeige sollte nach Abschluss der Eingabe erfolgen (bei Fokusverlust oder nach dem Absenden des Formulars), nicht in Echtzeit — dies reduziert den Stress des Benutzers beim Ausfüllen von Formularen.

// Programmgesteuerte Fehlereinrichtung
textInputLayout.error = "Password min 8 chars"

// Fehlerausblendung
textInputLayout.error = null

// Validierungsfehlerprüfung und -setzung
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Symbole und Aktionen in TextInputLayout

TextInputLayout unterstützt die Anzeige von Symbolen sowohl am Anfang des Feldes (Start-Symbol) als auch am Ende (End-Symbol). Symbole können verschiedene Funktionen ausführen: Umschalten der Passwortsichtbarkeit, Löschen des Feldes, benutzerdefinierte Aktionen. Jeder Symboltyp wird durch ein separates Attribut gesteuert und kann über app:startIconDrawable oder app:endIconDrawale durch ein benutzerdefiniertes Symbol ersetzt werden.

Der End-Symbol-Modus wird über das Attribut app:endIconMode festgelegt, das folgende Werte annehmen kann: password_toggle — Umschalten der Passwortsichtbarkeit, clear_text — Löschen des Feldes, dropdown_menu — Pfeil für eine Dropdown-Liste, custom — benutzerdefiniertes Symbol. Bei password_toggle verwaltet TextInputLayout automatisch das Umschalten des inputType zwischen textPassword und textVisiblePassword und animiert auch das Augensymbol.

• password_toggle — Augensymbol zum Anzeigen/Ausblenden des Passworts, integrierte Animation.
• clear_text — Kreuzsymbol zum Löschen des Feldes, erscheint bei vorhandenem Text.
• dropdown_menu — Pfeil für Exposed Dropdown Menu (Material Design 3).
• custom — jedes benutzerdefinierte Symbol mit einem Handler über setEndIconOnClickListener.

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

TextInputLayout-Stile: FilledBox und OutlinedBox

Material Components für Android bietet zwei Hauptstile für TextInputLayout: FilledBox (gefüllt) und OutlinedBox (mit Umrandung). Der Stil FilledBox hat einen farbig gefüllten Hintergrund und eine Linie unter dem Feld, die bei Fokus die Farbe wechselt. Der Stil OutlinedBox hat einen transparenten Hintergrund und eine Umrandung um das gesamte Feld, wodurch klarere Grenzen entstehen und Formulare mit vielen Feldern besser geeignet sind.

Die Wahl des Stils hängt vom App-Design ab: FilledBox wird für häufig verwendete Formulare empfohlen, da es weniger Aufmerksamkeit auf einzelne Felder lenkt. OutlinedBox ist für kurze Formulare (Anmeldung, Registrierung) zu bevorzugen, bei denen jedes Feld deutlich gekennzeichnet sein sollte. Der Stil wird über das style-Attribut in XML oder über das App-Design festgelegt.

Material Design 3 (M3) führte aktualisierte Stile für TextInputLayout mit verbesserter Typografie, neuen Farb-Tokens und Unterstützung für dynamische Material You-Farben ein. In M3 wurde OutlinedBox zum standardmäßigen empfohlenen Stil, und FilledBox passte seine Innenabstände und Rahmenradien an die neue Spezifikation an.

Codebeispiele mit TextInputLayout

Ein vollständiges Beispiel zur Implementierung eines Registrierungsformulars mit TextInputLayout, einschließlich E-Mail- und Passwortvalidierung, Fehleranzeige und Passwort-anzeigen-Symbol. Beim Drücken der Registrierungsschaltfläche werden alle Felder überprüft und entsprechende Fehlermeldungen angezeigt.

XML-Layout des Registrierungsformulars

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Formularvalidierung in Kotlin

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}