Error State — стан помилки поля, відображення помилок і реалізація в Android

Що таке стан помилки поля в Android?

Error State — це спеціальний режим відображення поля введення, який активується, коли введені дані не пройшли валідацію. Візуально Error State включає три компоненти: зміна кольору контуру або фону поля (зазвичай на червоний), поява текстового повідомлення під полем з описом помилки та опціонально — іконка або підсвітка. Мета Error State — миттєво привернути увагу користувача до проблемного поля та підказати, як виправити помилку.

В Android Error State реалізований на рівні TextInputLayout з Material Design Components. TextInputLayout обгортає EditText і керує його станами: normal, focused, error, disabled. Метод setError(String) перемикає поле в стан помилки, змінює колір рамки та відображає повідомлення. При зміні тексту або виклику setError(null) поле повертається до normal.

За даними Material Design Guidelines, Error State має бути помітним, але не домінуючим. Червоний колір рамки має контрастувати зі звичайним станом, але не перевантажувати інтерфейс. Повідомлення про помилку має містити конкретну інформацію про проблему та спосіб її вирішення. Іконка помилки (наприклад, червоне коло зі знаком оклику) підсилює візуальний сигнал.

Як працює setError в TextInputLayout

Метод setError(CharSequence errorText) переводить TextInputLayout у стан помилки. Параметр errorText — текст, який відображається під полем. Якщо передати null, помилка скидається. TextInputLayout керує анімацією: текст помилки з'являється з плавним зникненням, рамка змінює колір на червоний. Іконка помилки (за замовчуванням знак оклику в колі) відображається в кінці поля.

Важливі деталі: setErrorEnabled(true) має бути викликано до setError, щоб виділити простір під повідомлення про помилку. Інакше при появі помилки макет може підстрибнути, оскільки місце під повідомлення не зарезервовано. Рекомендується завжди вмикати підтримку помилки в XML через app:errorEnabled="true", щоб уникнути зсуву макету.

Метод setError автоматично скидається при зміні тексту поля, якщо включена опція setErrorEnabled(true). Ця поведінка зручна для валідації в реальному часі: щойно користувач починає виправляти помилку, червона рамка зникає, і поле повертається до нормального стану. Однак для складних сценаріїв цей автоскид може бути небажаним — у таких випадках керуйте помилкою вручну.

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

// Увімкнути підтримку помилки (встановити в XML інакше)
til.isErrorEnabled = true

// Встановити повідомлення про помилку
til.error = "Invalid email address"

// Очистити помилку
til.error = null

// Перевірити, чи існує помилка
if (til.error != null) {
    // Поле в стані помилки
}

У прикладі використовуються властивості Kotlin для доступу до setError/isErrorEnabled. TextInputLayout автоматично оновлює UI: змінює boxStrokeColor, показує error-іконку, відображає текст помилки. Якщо змінити текст в EditText, помилка скидається автоматично. Для ручного скидання призначте error = null.

Альтернативні способи відображення помилок

Не всі проекти використовують Material Design Components. Для кастомного відображення помилки можна використовувати окремий TextView під EditText, який стає видимим при помилці. Цей підхід дає повний контроль над стилями та розташуванням повідомлення. Наприклад, можна розмістити повідомлення праворуч від поля, використати інший колір фону або додати іконку ліворуч від тексту.

В Jetpack Compose Error State реалізується через параметр isError в OutlinedTextField або TextField. При isError = true рамка стає червоною, і можна показати текст помилки через supportingText. Compose не має вбудованого auto-clear при зміні тексту — розробник керує станом помилки вручну через remember та mutableStateOf.

Для групової помилки (одне повідомлення для кількох полів, наприклад, «Заповніть всі обов'язкові поля») використовується Snackbar, Dialog або inline-блок у верхній частині форми. Групова помилка не замінює Error State окремих полів, а доповнює його. Користувач спочатку бачить загальне повідомлення, потім шукає конкретні поля з помилками.

Кольори, іконки та анімація помилок

Колір Error State в Material Design Components керується через атрибут boxStrokeErrorColor або атрибут colorError в темі. За замовчуванням використовується системний червоний колір, але його можна перевизначити в темі додатка або безпосередньо в TextInputLayout через app:boxStrokeErrorColor="@color/customErrorColor". Для підтримки темної теми рекомендується використовувати селектор з різними кольорами для light та dark режимів.

Іконка помилки налаштовується через app:errorIconDrawable. За замовчуванням відображається знак оклику в колі. Можна замінити на кастомну іконку або прибрати зовсім, встановивши app:errorIconDrawable="@null". Іконка відображається в кінці TextInputLayout і служить додатковим візуальним маркером. В Material Design 3 іконка помилки обов'язкова для accessibility.

Анімація появи помилки вбудована в TextInputLayout: текст виїжджає знизу з плавною зміною прозорості. Для кастомної анімації використовуйте Transition API або MotionLayout. Наприклад, похитування поля при помилці привертає додаткову увагу. Але зловживання анімацією погіршує UX — достатньо плавної появи повідомлення.

Управління станом помилки при валідації

Управління Error State ділиться на два етапи: встановлення помилки при валідації поля та скидання помилки при виправленні. У найпростішому випадку валідація викликається в TextWatcher.afterTextChanged: якщо значення невалідне, викликається setError з повідомленням про помилку. Якщо валідне — setError(null). TextInputLayout автоматично ховає помилку, коли setError(null) скидає стан.

Для Form Validation помилки встановлюються на етапі відправки форми. Прохід по всіх полях, перевірка кожного, встановлення помилок для невалідних полів і фокус на першому помилковому полі. Кнопка відправки при цьому блокується. Якщо форма велика, рекомендується прокрутити екран до першого поля з помилкою та автоматично встановити на нього фокус.

Правило single error focus: при відправці форми встановлюйте фокус тільки на перше поле з помилкою. Користувач виправляє одну помилку за раз, і після виправлення наступне поле з помилкою автоматично отримує фокус. Такий покроковий підхід знижує когнітивне навантаження. Material TextInputLayout при встановленні помилки не перехоплює фокус — це потрібно робити вручну через requestFocus().

Помилки при роботі з Error State

Перша помилка — відсутність isErrorEnabled. Якщо setErrorEnabled не викликано до setError, макет може зсунутися при появі повідомлення про помилку. Особливо критично, якщо поле знаходиться в середині екрана — користувач втрачає позицію скролу. Завжди вмикайте setErrorEnabled(true) в XML через app:errorEnabled="true" або програмно перед встановленням помилки.

Друга помилка — надто довге повідомлення про помилку. Довгий текст переноситься на кілька рядків і може перекривати сусідні поля. Рекомендована довжина повідомлення про помилку — 20-40 символів. Якщо потрібна більша інформація, використовуйте helperText (підказка) в нормальному стані або тултип для додаткового пояснення. Стислість — основа хорошого Error State.

Третя помилка — ігнорування accessibility. Error State має бути доступним для screen readers. TextInputLayout автоматично анонсує помилку через contentDescription, але кастомні реалізації повинні робити це вручну. Використовуйте announceForAccessibility() або android:importantForAccessibility для повідомлень про помилку. Користувачі TalkBack повинні чути помилку одразу після її появи.