Error State — co to je, zobrazení chyb polí a implementace v Androidu

Co je stav chyby pole v Androidu?

Error State je speciální režim zobrazení vstupního pole, který se aktivuje, když zadaná data neprošla validací. Vizuálně Error State zahrnuje tři součásti: změnu barvy okraje nebo pozadí pole (obvykle na červenou), objevení textové zprávy pod polem s popisem chyby a volitelně — ikonu nebo zvýraznění. Cílem Error State je okamžitě přitáhnout pozornost uživatele k problematickému poli a navrhnout, jak chybu opravit.

V Androidu je Error State implementován na úrovni TextInputLayout z Material Design Components. TextInputLayout obaluje EditText a spravuje jeho stavy: normal, focused, error, disabled. Metoda setError(String) přepne pole do stavu chyby, změní barvu rámečku a zobrazí zprávu. Při změně textu nebo volání setError(null) se pole vrátí do normal.

Podle Material Design Guidelines by Error State měl být znatelný, ale ne dominantní. Červená barva rámečku by měla kontrastovat s normálním stavem, ale nepřetěžovat rozhraní. Chybová zpráva by měla obsahovat konkrétní informace o problému a způsobu jeho řešení. Ikona chyby (např. červený kroužek s vykřičníkem) posiluje vizuální signál.

Jak funguje setError v TextInputLayout

Metoda setError(CharSequence errorText) přepne TextInputLayout do stavu chyby. Parametr errorText je text zobrazený pod polem. Pokud je předán null, chyba se resetuje. TextInputLayout spravuje animaci: text chyby se objeví s plynulým přechodem, rámeček změní barvu na červenou. Ikona chyby (ve výchozím nastavení vykřičník v kroužku) se zobrazí na konci pole.

Důležité detaily: setErrorEnabled(true) by mělo být voláno před setError, aby bylo rezervováno místo pro chybovou zprávu. Jinak se při objevení chyby může rozvržení posunout, protože místo pro zprávu není rezervováno. Doporučuje se vždy povolit podporu chyb v XML pomocí app:errorEnabled="true", aby se předešlo posunu rozvržení.

Metoda setError se automaticky resetuje při změně textu pole, pokud je možnost setErrorEnabled(true) povolena. Toto chování je vhodné pro validaci v reálném čase: jakmile uživatel začne chybu opravovat, červený rámeček zmizí a pole se vrátí do normálního stavu. Pro složité scénáře však může být toto automatické resetování nežádoucí — v takových případech spravujte chybu ručně.

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

// Povolit podporu chyb (jinak nastavit v XML)
til.isErrorEnabled = true

// Nastavit chybovou zprávu
til.error = "Invalid email address"

// Vymazat chybu
til.error = null

// Zkontrolovat, zda chyba existuje
if (til.error != null) {
    // Pole je v chybovém stavu
}

V příkladu jsou použity vlastnosti Kotlin pro přístup k setError/isErrorEnabled. TextInputLayout automaticky aktualizuje UI: mění barvu boxStrokeColor, zobrazuje ikonu chyby, zobrazuje text chyby. Pokud změníte text v EditText, chyba se automaticky resetuje. Pro ruční reset nastavte error = null.

Alternativní způsoby zobrazení chyb

Ne všechny projekty používají Material Design Components. Pro vlastní zobrazení chyby můžete použít samostatný TextView pod EditText, který se stane viditelným při chybě. Tento přístup poskytuje plnou kontrolu nad styly a umístěním zprávy. Například můžete umístit zprávu napravo od pole, použít jinou barvu pozadí nebo přidat ikonu nalevo od textu.

V Jetpack Compose je Error State implementován pomocí parametru isError v OutlinedTextField nebo TextField. Při isError = true se rámeček změní na červený a můžete zobrazit text chyby pomocí supportingText. Compose nemá vestavěné automatické mazání při změně textu — vývojář spravuje stav chyby ručně pomocí remember a mutableStateOf.

Pro skupinovou chybu (jedna zpráva pro více polí, např. „Vyplňte všechna povinná pole”) se používá Snackbar, Dialog nebo inline blok v horní části formuláře. Skupinová chyba nenahrazuje Error State jednotlivých polí, ale doplňuje jej. Uživatel nejprve vidí obecnou zprávu, pak hledá konkrétní pole s chybami.

Barvy, ikony a animace chyb

Barva Error State v Material Design Components je spravována pomocí atributu boxStrokeErrorColor nebo atributu colorError v tématu. Ve výchozím nastavení se používá systémová červená barva, ale lze ji přepsat v tématu aplikace nebo přímo v TextInputLayout pomocí app:boxStrokeErrorColor="@color/customErrorColor". Pro podporu tmavého tématu se doporučuje použít selektor s různými barvami pro světlý a tmavý režim.

Ikona chyby se konfiguruje pomocí app:errorIconDrawable. Ve výchozím nastavení se zobrazuje vykřičník v kroužku. Lze jej nahradit vlastní ikonou nebo zcela odstranit nastavením app:errorIconDrawable="@null". Ikona se zobrazuje na konci TextInputLayout a slouží jako další vizuální značka. V Material Design 3 je ikona chyby povinná pro přístupnost.

Animace objevení chyby je vestavěna v TextInputLayout: text se objevuje zespodu s plynulou změnou průhlednosti. Pro vlastní animaci použijte Transition API nebo MotionLayout. Například třesení pole při chybě přitahuje další pozornost. Ale nadměrné používání animace zhoršuje UX — plynulé objevení zprávy je dostatečné.

Správa stavu chyby při validaci

Správa Error State je rozdělena do dvou fází: nastavení chyby při validaci pole a resetování chyby při opravě. V nejjednodušším případě je validace volána v TextWatcher.afterTextChanged: pokud je hodnota neplatná, je volán setError s chybovou zprávou. Pokud je platná — setError(null). TextInputLayout automaticky skryje chybu, když setError(null) resetuje stav.

Pro validaci formuláře se chyby nastavují ve fázi odeslání formuláře. Projít všechna pole, zkontrolovat každé, nastavit chyby pro neplatná pole a zaměřit se na první chybné pole. Tlačítko odeslání je přitom blokováno. Pokud je formulář velký, doporučuje se posunout obrazovku k prvnímu poli s chybou a automaticky na něj zaměřit.

Pravidlo single error focus: při odesílání formuláře zaměřte pouze první pole s chybou. Uživatel opravuje jednu chybu najednou a po opravě další pole s chybou automaticky získá zaměření. Tento postupný přístup snižuje kognitivní zátěž. Material TextInputLayout při nastavení chyby nezachycuje zaměření — to je třeba provést ručně pomocí requestFocus().

Chyby při práci s Error State

První chyba — chybějící isErrorEnabled. Pokud setErrorEnabled není volán před setError, rozvržení se může posunout při objevení chybové zprávy. To je obzvláště kritické, pokud je pole uprostřed obrazovky — uživatel ztrácí pozici posouvání. Vždy povolte setErrorEnabled(true) v XML pomocí app:errorEnabled="true" nebo programově před nastavením chyby.

Druhá chyba — příliš dlouhá chybová zpráva. Dlouhý text se zalomí do několika řádků a může zakrývat sousední pole. Doporučená délka chybové zprávy je 20-40 znaků. Pokud je potřeba více informací, použijte helperText (nápověda) v normálním stavu nebo tooltip pro další vysvětlení. Stručnost je základem dobrého Error State.

Třetí chyba — ignorování přístupnosti. Error State musí být přístupný pro čtečky obrazovky. TextInputLayout automaticky oznamuje chybu pomocí contentDescription, ale vlastní implementace to musí dělat ručně. Používejte announceForAccessibility() nebo android:importantForAccessibility pro chybové zprávy. Uživatelé TalkBack by měli slyšet chybu ihned po jejím objevení.