Error State — ce este, afișarea erorilor câmpurilor și implementarea în Android

Ce este starea de eroare a unui câmp în Android?

Error State este un mod special de afișare a câmpului de introducere care se activează atunci când datele introduse nu au trecut de validare. Vizual, Error State include trei componente: schimbarea culorii conturului sau fundalului câmpului (de obicei în roșu), apariția unui mesaj text sub câmp cu descrierea erorii și opțional — o pictogramă sau evidențiere. Scopul Error State este de a atrage instantaneu atenția utilizatorului asupra câmpului problemă și de a sugera cum să corecteze eroarea.

În Android, Error State este implementat la nivelul TextInputLayout din Material Design Components. TextInputLayout înfășoară EditText și gestionează stările sale: normal, focused, error, disabled. Metoda setError(String) comută câmpul în stare de eroare, schimbă culoarea cadrului și afișează mesajul. La modificarea textului sau la apelarea setError(null), câmpul revine la normal.

Conform Material Design Guidelines, Error State trebuie să fie vizibil, dar nu dominant. Culoarea roșie a cadrului trebuie să contrasteze cu starea normală, dar să nu supraîncarce interfața. Mesajul de eroare trebuie să conțină informații specifice despre problemă și modalitatea de rezolvare. Pictograma de eroare (de exemplu, un cerc roșu cu semn de exclamare) întărește semnalul vizual.

Cum funcționează setError în TextInputLayout

Metoda setError(CharSequence errorText) comută TextInputLayout în stare de eroare. Parametrul errorText este textul afișat sub câmp. Dacă se transmite null, eroarea se resetează. TextInputLayout gestionează animația: textul erorii apare cu o tranziție lină, cadrul se schimbă în roșu. Pictograma de eroare (implicit semnul de exclamare într-un cerc) se afișează la sfârșitul câmpului.

Detalii importante: setErrorEnabled(true) trebuie apelat înainte de setError pentru a rezerva spațiu pentru mesajul de eroare. Altfel, la apariția erorii, aspectul poate „sări” deoarece spațiul pentru mesaj nu este rezervat. Se recomandă să activați întotdeauna suportul pentru erori în XML prin app:errorEnabled="true" pentru a evita deplasarea aspectului.

Metoda setError se resetează automat la modificarea textului câmpului dacă opțiunea setErrorEnabled(true) este activată. Acest comportament este convenabil pentru validarea în timp real: de îndată ce utilizatorul începe să corecteze eroarea, cadrul roșu dispare și câmpul revine la starea normală. Cu toate acestea, pentru scenarii complexe, această resetare automată poate fi nedorită — în astfel de cazuri, gestionați eroarea manual.

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

// Activează suportul pentru erori (setează în XML altfel)
til.isErrorEnabled = true

// Setează mesajul de eroare
til.error = "Invalid email address"

// Șterge eroarea
til.error = null

// Verifică dacă există eroare
if (til.error != null) {
    // Câmpul este în stare de eroare
}

În exemplu se folosesc proprietățile Kotlin pentru accesarea setError/isErrorEnabled. TextInputLayout actualizează automat interfața: schimbă culoarea boxStrokeColor, afișează pictograma de eroare, arată textul erorii. Dacă modificați textul în EditText, eroarea se resetează automat. Pentru resetarea manuală, atribuiți error = null.

Metode alternative de afișare a erorilor

Nu toate proiectele folosesc Material Design Components. Pentru afișarea personalizată a erorii, puteți folosi un TextView separat sub EditText care devine vizibil la eroare. Această abordare oferă control complet asupra stilurilor și poziționării mesajului. De exemplu, puteți plasa mesajul în dreapta câmpului, folosi o altă culoare de fundal sau adăuga o pictogramă în stânga textului.

În Jetpack Compose, Error State se implementează prin parametrul isError în OutlinedTextField sau TextField. Când isError = true, cadrul devine roșu și puteți afișa textul erorii prin supportingText. Compose nu are ștergere automată la modificarea textului — dezvoltatorul gestionează starea erorii manual prin remember și mutableStateOf.

Pentru eroarea de grup (un mesaj pentru mai multe câmpuri, de exemplu „Completați toate câmpurile obligatorii”) se folosește Snackbar, Dialog sau un bloc inline în partea de sus a formularului. Eroarea de grup nu înlocuiește Error State al câmpurilor individuale, ci îl completează. Utilizatorul vede mai întâi mesajul general, apoi caută câmpurile specifice cu erori.

Culori, pictograme și animația erorilor

Culoarea Error State în Material Design Components este gestionată prin atributul boxStrokeErrorColor sau atributul colorError din temă. Implicit se folosește culoarea roșie de sistem, dar poate fi suprascrisă în tema aplicației sau direct în TextInputLayout prin app:boxStrokeErrorColor="@color/customErrorColor". Pentru suportul temei întunecate, se recomandă utilizarea unui selector cu culori diferite pentru modurile light și dark.

Pictograma de eroare se configurează prin app:errorIconDrawable. Implicit se afișează un semn de exclamare într-un cerc. Poate fi înlocuită cu o pictogramă personalizată sau eliminată complet setând app:errorIconDrawable="@null". Pictograma se afișează la sfârșitul TextInputLayout și servește ca marcaj vizual suplimentar. În Material Design 3, pictograma de eroare este obligatorie pentru accesibilitate.

Animația de apariție a erorii este încorporată în TextInputLayout: textul apare de jos cu o schimbare treptată a opacității. Pentru animație personalizată, folosiți Transition API sau MotionLayout. De exemplu, balansarea câmpului la eroare atrage atenție suplimentară. Dar abuzul de animație înrăutățește UX — este suficientă o apariție lină a mesajului.

Gestionarea stării de eroare la validare

Gestionarea Error State se împarte în două etape: setarea erorii la validarea câmpului și resetarea erorii la corectare. În cel mai simplu caz, validarea este apelată în TextWatcher.afterTextChanged: dacă valoarea este invalidă, se apelează setError cu mesajul de eroare. Dacă este validă — setError(null). TextInputLayout ascunde automat eroarea când setError(null) resetează starea.

Pentru validarea formularului, erorile se setează la etapa de trimitere a formularului. Se parcurg toate câmpurile, se verifică fiecare, se setează erori pentru câmpurile invalide și focalizare pe primul câmp cu eroare. Butonul de trimitere este blocat în acest timp. Dacă formularul este mare, se recomandă derularea ecranului la primul câmp cu eroare și focalizarea automată pe acesta.

Regula single error focus: la trimiterea formularului, setați focalizarea doar pe primul câmp cu eroare. Utilizatorul corectează o eroare odată, iar după corectare, următorul câmp cu eroare primește automat focalizarea. Această abordare pas cu pas reduce încărcătura cognitivă. Material TextInputLayout nu interceptează focalizarea la setarea erorii — acest lucru trebuie făcut manual prin requestFocus().

Greșeli la lucrul cu Error State

Prima greșeală — lipsa isErrorEnabled. Dacă setErrorEnabled nu este apelat înainte de setError, aspectul se poate deplasa la apariția mesajului de eroare. Este critic mai ales dacă câmpul se află în mijlocul ecranului — utilizatorul pierde poziția de derulare. Activați întotdeauna setErrorEnabled(true) în XML prin app:errorEnabled="true" sau programatic înainte de setarea erorii.

A doua greșeală — mesaj de eroare prea lung. Textul lung se împarte pe mai multe rânduri și poate acoperi câmpurile vecine. Lungimea recomandată a mesajului de eroare este de 20-40 de caractere. Dacă sunt necesare mai multe informații, folosiți helperText (sugestie) în starea normală sau un tooltip pentru explicații suplimentare. Concizia este baza unui Error State bun.

A treia greșeală — ignorarea accesibilității. Error State trebuie să fie accesibil pentru cititoarele de ecran. TextInputLayout anunță automat eroarea prin contentDescription, dar implementările personalizate trebuie să facă acest lucru manual. Folosiți announceForAccessibility() sau android:importantForAccessibility pentru mesajele de eroare. Utilizatorii TalkBack trebuie să audă eroarea imediat după apariția sa.