Error State — cos’è, visualizzazione degli errori del campo e implementazione in Android
Error State è uno stato del campo di input che segnala visivamente dati non validi. In Android, Error State viene implementato tramite TextInputLayout.setError(), che evidenzia il bordo in rosso e mostra il testo di errore sotto il campo. Secondo le Material Design Guidelines, 2026, Error State dovrebbe essere evidente ma non aggressivo: bordo rosso, testo di errore, icona. L’uso corretto di Error State aumenta la conversione dei moduli del 20-30%, poiché gli utenti rilevano e correggono rapidamente gli errori senza perdere il contesto.
Punti chiave
- Error State è uno stato visivo del campo che mostra all’utente che i dati non sono validi.
- TextInputLayout.setError() è il metodo principale per visualizzare gli errori in Material Design Components.
- Indicatori visivi: bordo rosso, testo di errore, icona di stato, animazione di comparsa.
- Reimpostazione dell’errore avviene automaticamente al cambiamento del testo o manualmente tramite setError(null).
- Error State personalizzato viene utilizzato quando è necessaria una visualizzazione non standard: solo icona, colore diverso, gruppo di campi.
Cos’è lo stato di errore del campo in Android?
Error State è una modalità di visualizzazione speciale di un campo di input che si attiva quando i dati inseriti non superano la validazione. Visivamente, Error State include tre componenti: un cambiamento del colore del bordo o dello sfondo del campo (di solito in rosso), la comparsa di un messaggio di testo sotto il campo che descrive l’errore e, opzionalmente, un’icona o un’evidenziazione. Lo scopo di Error State è attirare immediatamente l’attenzione dell’utente sul campo problematico e suggerire come correggere l’errore.
In Android, Error State è implementato a livello di TextInputLayout di Material Design Components. TextInputLayout avvolge EditText e gestisce i suoi stati: normal, focused, error, disabled. Il metodo setError(String) porta il campo in stato di errore, cambia il colore del bordo e mostra il messaggio. Quando il testo cambia o viene chiamato setError(null), il campo torna allo stato normal.
Secondo le Material Design Guidelines, Error State dovrebbe essere evidente ma non dominante. Il colore rosso del bordo dovrebbe contrastare con lo stato normale ma senza sovraccaricare l’interfaccia. Il messaggio di errore dovrebbe contenere informazioni specifiche sul problema e su come risolverlo. Un’icona di errore (ad esempio, un cerchio rosso con un punto esclamativo) rafforza il segnale visivo.
Come funziona setError in TextInputLayout
Il metodo setError(CharSequence errorText) porta TextInputLayout in stato di errore. Il parametro errorText è il testo visualizzato sotto il campo. Se viene passato null, l’errore viene cancellato. TextInputLayout gestisce l’animazione: il testo di errore appare con un dissolvenza graduale, il bordo diventa rosso. Un’icona di errore (predefinita: punto esclamativo in un cerchio) viene mostrata alla fine del campo.
Dettagli importanti: setErrorEnabled(true) deve essere chiamato prima di setError per riservare spazio per il messaggio di errore. Altrimenti, il layout potrebbe “saltare” quando l’errore appare perché lo spazio non è riservato. Si consiglia di abilitare sempre il supporto agli errori in XML tramite app:errorEnabled="true" per evitare spostamenti del layout.
Il metodo setError viene automaticamente cancellato quando il testo del campo cambia se setErrorEnabled(true) è abilitato. Questo comportamento è comodo per la validazione in tempo reale: non appena l’utente inizia a correggere l’errore, il bordo rosso scompare e il campo torna allo stato normale. Tuttavia, per scenari complessi questa cancellazione automatica potrebbe essere indesiderata — in questi casi, gestisci l’errore manualmente.
kotlin
val til = findViewById<TextInputLayout>(R.id.til_email)
// Abilita supporto errore (imposta in XML altrimenti)
til.isErrorEnabled = true
// Imposta messaggio di errore
til.error = "Invalid email address"
// Cancella errore
til.error = null
// Verifica se l’errore esiste
if (til.error != null) {
// Il campo è in stato di errore
}L’esempio usa le proprietà Kotlin per accedere a setError/isErrorEnabled. TextInputLayout aggiorna automaticamente l’interfaccia: cambia boxStrokeColor, mostra l’icona di errore, visualizza il testo di errore. Se il testo in EditText cambia, l’errore viene cancellato automaticamente. Per la reimpostazione manuale, imposta error = null.
Modi alternativi per visualizzare gli errori
Non tutti i progetti usano Material Design Components. Per una visualizzazione personalizzata degli errori, puoi usare un TextView separato sotto EditText che diventa visibile in caso di errore. Questo approccio offre il controllo completo sugli stili e sul posizionamento del messaggio. Ad esempio, puoi posizionare il messaggio a destra del campo, usare un colore di sfondo diverso o aggiungere un’icona a sinistra del testo.
In Jetpack Compose, Error State viene implementato tramite il parametro isError in OutlinedTextField o TextField. Quando isError = true, il bordo diventa rosso e puoi mostrare il testo di errore tramite supportingText. Compose non ha una cancellazione automatica integrata al cambiamento del testo — lo sviluppatore gestisce lo stato di errore manualmente usando remember e mutableStateOf.
Per errori di gruppo (un singolo messaggio per più campi, ad esempio “Compila tutti i campi obbligatori”), usa Snackbar, Dialog o un blocco in linea nella parte superiore del modulo. Un errore di gruppo non sostituisce l’Error State dei singoli campi ma lo completa. L’utente vede prima il messaggio generale, poi cerca i campi specifici con errori.
| Metodo | Pro | Contro | Quando usarlo |
|---|---|---|---|
| TextInputLayout.setError | Standard, animazione, cancellazione automatica | Solo con Material Components | Opzione principale per MDC |
| TextView separato | Controllo completo degli stili | Gestione manuale della visibilità | Temi personalizzati, senza MDC |
| Compose isError | Integrato in Compose | Gestione manuale dello stato | Progetti Jetpack Compose |
| Snackbar/Dialog | Messaggio di gruppo | Non legato a un campo specifico | Complemento all’Error State del campo |
Colori, icone e animazione degli errori
Il colore di Error State in Material Design Components è controllato tramite l’attributo boxStrokeErrorColor o l’attributo colorError nel tema. Per impostazione predefinita, viene usato il colore rosso di sistema, ma può essere sovrascritto nel tema dell’app o direttamente in TextInputLayout tramite app:boxStrokeErrorColor="@color/customErrorColor". Per il supporto del tema scuro, si consiglia di usare un selettore con colori diversi per le modalità chiara e scura.
Icona di errore viene configurata tramite app:errorIconDrawable. Per impostazione predefinita, viene mostrato un punto esclamativo in un cerchio. Può essere sostituita con un’icona personalizzata o rimossa completamente impostando app:errorIconDrawable="@null". L’icona viene visualizzata alla fine di TextInputLayout e funge da marcatore visivo aggiuntivo. In Material Design 3, l’icona di errore è obbligatoria per l’accessibilità.
L’animazione di comparsa dell’errore è integrata in TextInputLayout: il testo scorre verso l’alto dal basso con un graduale cambiamento di opacità. Per animazioni personalizzate, usa Transition API o MotionLayout. Ad esempio, scuotere il campo in caso di errore attira ulteriore attenzione. Tuttavia, l’uso eccessivo di animazioni peggiora l’UX — la comparsa graduale del messaggio è sufficiente.
Gestione dello stato di errore durante la validazione
La gestione di Error State è divisa in due fasi: impostare l’errore durante la validazione del campo e cancellare l’errore al momento della correzione. Nel caso più semplice, la validazione viene chiamata in TextWatcher.afterTextChanged: se il valore non è valido, viene chiamato setError con un messaggio di errore. Se è valido, viene chiamato setError(null). TextInputLayout nasconde automaticamente l’errore quando setError(null) cancella lo stato.
Per la validazione del modulo, gli errori vengono impostati nella fase di invio del modulo. Scorri tutti i campi, validali ciascuno, imposta errori per i campi non validi e concentrati sul primo campo con errore. Il pulsante di invio viene bloccato durante questo processo. Se il modulo è grande, si consiglia di scorrere fino al primo campo con errore e impostare automaticamente il focus su di esso.
La regola del focus singolo sull’errore: quando invii un modulo, imposta il focus solo sul primo campo con errore. L’utente corregge un errore alla volta e, dopo la correzione, il campo successivo con errore riceve automaticamente il focus. Questo approccio graduale riduce il carico cognitivo. Material TextInputLayout non intercetta il focus quando imposta un errore — questo deve essere fatto manualmente tramite requestFocus().
Errori comuni quando si lavora con Error State
Il primo errore — mancanza di isErrorEnabled. Se setErrorEnabled non viene chiamato prima di setError, il layout potrebbe spostarsi quando appare il messaggio di errore. Ciò è particolarmente critico se il campo si trova al centro dello schermo — l’utente perde la posizione di scorrimento. Abilita sempre setErrorEnabled(true) in XML tramite app:errorEnabled="true" o a livello di codice prima di impostare un errore.
Il secondo errore — messaggio di errore troppo lungo. Il testo lungo viene avvolto su più righe e potrebbe sovrapporsi ai campi vicini. La lunghezza consigliata del messaggio di errore è di 20-40 caratteri. Se sono necessarie maggiori informazioni, usa helperText nello stato normale o un suggerimento per spiegazioni aggiuntive. La brevity è la base di un buon Error State.
Il terzo errore — ignorare l’accessibilità. Error State deve essere accessibile agli screen reader. TextInputLayout annuncia automaticamente l’errore tramite contentDescription, ma le implementazioni personalizzate devono farlo manualmente. Usa announceForAccessibility() o android:importantForAccessibility per i messaggi di errore. Gli utenti di TalkBack devono sentire l’errore immediatamente dopo la sua comparsa.
| Errore | Problema | Soluzione |
|---|---|---|
| Nessun isErrorEnabled | Spostamento del layout in caso di errore | app:errorEnabled="true" in XML |
| Messaggio lungo | Sovrapposizione dei campi vicini | 20-40 caratteri, helperText per dettagli |
| Nessuna accessibilità | Screen reader non sente l’errore | Importante per utenti TalkBack |
| Cancellazione automatica senza controllo | Campo considerato erroneamente valido | Gestione manuale della reimpostazione dell’errore |
Domande frequenti
Come reimpostare Error State quando si corregge un errore?
Se usi TextInputLayout, chiama setError(null). Abilita setErrorEnabled(true) in modo che lo spazio sotto il messaggio rimanga riservato, ma il testo scompaia. Quando il testo in EditText cambia, TextInputLayout cancella automaticamente l’errore. Per il controllo manuale, usa addTextChangedListener e setError(null) a ogni modifica.
Perché il layout si sposta quando appare un errore?
Perché lo spazio per il messaggio di errore non è riservato. Soluzione: abilita app:errorEnabled="true" in XML per TextInputLayout. Ciò riserva spazio per il messaggio e il layout non si sposterà. Quando l’errore è inattivo, lo spazio rimane vuoto ma il layout è stabile.
Come cambiare il colore dell’errore in TextInputLayout?
Usa l’attributo app:boxStrokeErrorColor in XML o a livello di codice tramite til.setBoxStrokeErrorStateList(). Il colore può essere impostato con un selettore per diversi stati. Puoi anche sovrascrivere l’attributo di sistema colorError nel tema dell’app per cambiare il colore dell’errore globalmente per tutti i campi.
Posso mostrare un errore senza cambiare il colore del bordo?
Sì, usa app:errorEnabled="true" e setError() — ma sovrascrivi boxStrokeErrorColor con il colore predefinito del campo. L’icona e il testo di errore saranno ancora visibili, ma il bordo manterrà il colore originale. Tuttavia, ciò riduce la visibilità dell’errore, contraddicendo le raccomandazioni di accessibilità di Material Design.
Come implementare Error State in Jetpack Compose?
In Compose, usa isError = true in OutlinedTextField o TextField. Il testo di errore viene passato tramite il parametro supportingText. Gestisci lo stato con mutableStateOf. Cancella isError manualmente quando il testo cambia. Compose non ha la cancellazione automatica degli errori, a differenza di TextInputLayout nel sistema View.
Riepilogo
- Error State — uno stato visivo del campo che segnala un errore tramite bordo rosso, testo e icona.
- TextInputLayout.setError() — il metodo principale per gestire Error State in Material Design Components.
- isErrorEnabled deve essere abilitato per prevenire lo spostamento del layout quando appare un errore.
- Metodi alternativi: TextView separato per errori, Snackbar per errori di gruppo, Compose isError.
- Colore e icona dell’errore vengono configurati tramite boxStrokeErrorColor e errorIconDrawable.
- Accessibilità è obbligatoria: lo screen reader deve annunciare l’errore quando appare.
- Gestione dell’errore durante la validazione: impostare su valore non valido, cancellare alla correzione o manualmente.
Svilupperemo un'applicazione mobile chiavi in mano
IT Sectr crea applicazioni iOS e Android per startup e aziende dal 2017. Ti consulteremo e ti proporremo la soluzione migliore.
Leggi anche