Error State — Was ist das, Anzeige von Feld Fehlern und Implementierung in Android

Was ist der Feld Fehlerzustand in Android?

Error State ist ein spezieller Anzeigemodus eines Eingabefelds, der aktiviert wird, wenn eingegebene Daten die Validierung nicht bestehen. Visuell umfasst Error State drei Komponenten: eine Änderung der Rand- oder Hintergrundfarbe des Felds (normalerweise auf Rot), das Erscheinen einer Textnachricht unter dem Feld, die den Fehler beschreibt, und optional ein Symbol oder eine Hervorhebung. Der Zweck von Error State ist es, die Aufmerksamkeit des Benutzers sofort auf das problematische Feld zu lenken und einen Vorschlag zur Fehlerbehebung zu geben.

In Android wird Error State auf der TextInputLayout-Ebene aus Material Design Components implementiert. TextInputLayout umschließt EditText und verwaltet seine Zustände: normal, focused, error, disabled. Die Methode setError(String) schaltet das Feld in den Fehlerzustand, ändert die Randfarbe und zeigt die Nachricht an. Wenn sich der Text ändert oder setError(null) aufgerufen wird, kehrt das Feld zu normal zurück.

Laut Material Design Guidelines sollte Error State auffällig, aber nicht dominant sein. Die rote Randfarbe sollte mit dem normalen Zustand kontrastieren, aber die Schnittstelle nicht überlasten. Die Fehlermeldung sollte spezifische Informationen über das Problem und seine Lösung enthalten. Ein Fehlersymbol (z. B. ein roter Kreis mit Ausrufezeichen) verstärkt das visuelle Signal.

Wie setError in TextInputLayout funktioniert

Die Methode setError(CharSequence errorText) schaltet TextInputLayout in den Fehlerzustand. Der Parameter errorText ist der Text, der unter dem Feld angezeigt wird. Wenn null übergeben wird, wird der Fehler gelöscht. TextInputLayout verwaltet die Animation: Der Fehlertext erscheint mit einem sanften Einblenden, der Rand wechselt auf Rot. Ein Fehlersymbol (Standard: Ausrufezeichen in einem Kreis) wird am Ende des Felds angezeigt.

Wichtige Details: setErrorEnabled(true) muss vor setError aufgerufen werden, um Platz für die Fehlermeldung zu reservieren. Andernfalls kann das Layout beim Erscheinen des Fehlers springen, da der Platz nicht reserviert ist. Es wird empfohlen, die Fehlerunterstützung immer in XML über app:errorEnabled="true" zu aktivieren, um Layoutverschiebungen zu vermeiden.

Die setError-Methode wird automatisch gelöscht, wenn sich der Feldtext ändert, sofern setErrorEnabled(true) aktiviert ist. Dieses Verhalten ist praktisch für die Echtzeitvalidierung: Sobald der Benutzer mit der Fehlerkorrektur beginnt, verschwindet der rote Rand und das Feld kehrt in den Normalzustand zurück. Für komplexe Szenarien kann diese automatische Löschung jedoch unerwünscht sein — in solchen Fällen verwalten Sie den Fehler manuell.

val til = findViewById<TextInputLayout>(R.id.til_email)

// Fehlerunterstützung aktivieren (ansonsten in XML festlegen)
til.isErrorEnabled = true

// Fehlermeldung festlegen
til.error = "Invalid email address"

// Fehler löschen
til.error = null

// Prüfen, ob Fehler existiert
if (til.error != null) {
    // Feld befindet sich im Fehlerzustand
}

Das Beispiel verwendet Kotlin-Eigenschaften, um auf setError/isErrorEnabled zuzugreifen. TextInputLayout aktualisiert automatisch die Benutzeroberfläche: ändert boxStrokeColor, zeigt das Fehlersymbol an, zeigt den Fehlertext. Wenn sich der Text in EditText ändert, wird der Fehler automatisch gelöscht. Für manuelles Zurücksetzen setzen Sie error = null.

Alternative Möglichkeiten zur Fehleranzeige

Nicht alle Projekte verwenden Material Design Components. Für benutzerdefinierte Fehleranzeige können Sie ein separates TextView unter dem EditText verwenden, das bei einem Fehler sichtbar wird. Dieser Ansatz bietet volle Kontrolle über Stile und Nachrichtenplatzierung. Sie können die Nachricht beispielsweise rechts vom Feld platzieren, eine andere Hintergrundfarbe verwenden oder links vom Text ein Symbol hinzufügen.

In Jetpack Compose wird Error State über den Parameter isError in OutlinedTextField oder TextField implementiert. Wenn isError = true ist, wird der Rand rot und Sie können Fehlertext über supportingText anzeigen. Compose verfügt über keine integrierte automatische Löschung bei Textänderung — der Entwickler verwaltet den Fehlerzustand manuell mit remember und mutableStateOf.

Für Gruppenfehler (eine einzelne Nachricht für mehrere Felder, z. B. „Füllen Sie alle Pflichtfelder aus“) verwenden Sie Snackbar, Dialog oder einen Inline-Block am oberen Rand des Formulars. Ein Gruppenfehler ersetzt nicht den Error State einzelner Felder, sondern ergänzt ihn. Der Benutzer sieht zuerst die allgemeine Nachricht und sucht dann nach spezifischen Feldern mit Fehlern.

Farben, Symbole und Fehleranimation

Die Farbe des Error State in Material Design Components wird über das Attribut boxStrokeErrorColor oder das Attribut colorError im Theme gesteuert. Standardmäßig wird die systemweite rote Farbe verwendet, die jedoch im App-Theme oder direkt in TextInputLayout über app:boxStrokeErrorColor="@color/customErrorColor" überschrieben werden kann. Für die Unterstützung des dunklen Themes wird empfohlen, einen Selektor mit unterschiedlichen Farben für hellen und dunklen Modus zu verwenden.

Fehlersymbol wird über app:errorIconDrawable konfiguriert. Standardmäßig wird ein Ausrufezeichen in einem Kreis angezeigt. Es kann durch ein benutzerdefiniertes Symbol ersetzt oder durch Setzen von app:errorIconDrawable="@null" vollständig entfernt werden. Das Symbol wird am Ende von TextInputLayout angezeigt und dient als zusätzlicher visueller Marker. In Material Design 3 ist das Fehlersymbol für die Barrierefreiheit erforderlich.

Animation des Erscheinens des Fehlers ist in TextInputLayout integriert: Der Text gleitet mit einer sanften Deckkraftänderung von unten nach oben. Für benutzerdefinierte Animationen verwenden Sie die Transition API oder MotionLayout. Zum Beispiel lenkt das Schütteln des Felds bei einem Fehler zusätzliche Aufmerksamkeit. Übermäßiger Einsatz von Animationen verschlechtert jedoch die UX — ein sanftes Erscheinen der Nachricht ist ausreichend.

Verwaltung des Fehlerzustands bei der Validierung

Die Verwaltung des Error State ist in zwei Phasen unterteilt: Setzen des Fehlers während der Feldvalidierung und Löschen des Fehlers bei Korrektur. Im einfachsten Fall wird die Validierung in TextWatcher.afterTextChanged aufgerufen: Wenn der Wert ungültig ist, wird setError mit einer Fehlermeldung aufgerufen. Wenn gültig, wird setError(null) aufgerufen. TextInputLayout blendet den Fehler automatisch aus, wenn setError(null) den Zustand löscht.

Für die Formularvalidierung werden Fehler beim Absenden des Formulars gesetzt. Durchlaufen Sie alle Felder, validieren Sie jedes, setzen Sie Fehler für ungültige Felder und fokussieren Sie das erste fehlerhafte Feld. Die Senden-Schaltfläche wird während dieses Vorgangs blockiert. Wenn das Formular groß ist, wird empfohlen, zum ersten Feld mit Fehler zu scrollen und automatisch den Fokus darauf zu setzen.

Die Regel des einzelnen Fehlerfokus: Beim Absenden eines Formulars setzen Sie den Fokus nur auf das erste Feld mit Fehler. Der Benutzer korrigiert einen Fehler nach dem anderen, und nach der Korrektur erhält das nächste Feld mit Fehler automatisch den Fokus. Dieser schrittweise Ansatz reduziert die kognitive Belastung. Material TextInputLayout fängt den Fokus beim Setzen eines Fehlers nicht ab — dies muss manuell über requestFocus() erfolgen.

Häufige Fehler bei der Arbeit mit Error State

Der erste Fehler — fehlendes isErrorEnabled. Wenn setErrorEnabled nicht vor setError aufgerufen wird, kann sich das Layout verschieben, wenn die Fehlermeldung erscheint. Dies ist besonders kritisch, wenn sich das Feld in der Bildmitte befindet — der Benutzer verliert seine Scrollposition. Aktivieren Sie immer setErrorEnabled(true) in XML über app:errorEnabled="true" oder programmatisch vor dem Setzen eines Fehlers.

Der zweite Fehler — zu lange Fehlermeldung. Langer Text wird auf mehrere Zeilen umgebrochen und kann benachbarte Felder überlappen. Die empfohlene Länge der Fehlermeldung beträgt 20-40 Zeichen. Wenn mehr Informationen benötigt werden, verwenden Sie helperText im Normalzustand oder einen Tooltip für zusätzliche Erklärungen. Kürze ist die Grundlage eines guten Error State.

Der dritte Fehler — Ignorieren der Barrierefreiheit. Error State muss für Screenreader zugänglich sein. TextInputLayout kündigt den Fehler automatisch über contentDescription an, aber benutzerdefinierte Implementierungen müssen dies manuell tun. Verwenden Sie announceForAccessibility() oder android:importantForAccessibility für Fehlermeldungen. TalkBack-Benutzer sollten den Fehler sofort nach seinem Erscheinen hören.