TextInputLayout: що це, Material Design та налаштування в Android

Що таке TextInputLayout в Android

TextInputLayout — це ViewGroup із пакета com.google.android.material.textfield, яка розширює LinearLayout і містить у собі EditText. Компонент входить до складу бібліотеки Material Components для Android, починаючи з версії 1.0.0. Основне завдання TextInputLayout — надати готову реалізацію Material Design текстових полів з мінімальними зусиллями з боку розробника.

На відміну від стандартного EditText, TextInputLayout керує анімацією плаваючої мітки, яка задається через атрибут android:hint внутрішнього EditText. Коли поле порожнє, мітка відображається всередині поля як звичайна підказка. Щойно користувач починає введення, мітка анімовано переміщується у верхню частину поля, зменшуючись у розмірі. Згідно з Material Design Guidelines (2025), така анімація покращує сприйняття форми, оскільки користувач завжди бачить назву поля, навіть після введення даних.

Архітектурно TextInputLayout реалізує патерн декоратора: він перехоплює події EditText, керує відображенням додаткових елементів (мітка, помилка, іконки, лічильник) і координує їх анімацію. Внутрішній EditText доступний через метод getEditText() і може бути сконфігурований стандартними атрибутами, включаючи inputType, maxLines та hint.

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Плаваюча мітка та її налаштування

Плаваюча мітка (floating label) — це ключова можливість TextInputLayout. Коли поле порожнє, текст із android:hint відображається всередині EditText як звичайна підказка. При отриманні фокусу або під час введення тексту мітка піднімається у верхню частину TextInputLayout, зменшуючи розмір шрифту та змінюючи колір. Така поведінка вирішує проблему невидимості підказки після початку введення.

Налаштування плаваючої мітки здійснюється через атрибути TextInputLayout: app:hintEnabled визначає, чи ввімкнена плаваюча мітка (за замовчуванням true), app:hintAnimationEnabled — вмикає або вимикає анімацію переходу, app:expandedHintEnabled — дозволяє відображення мітки, навіть якщо поле порожнє і не у фокусі. Колір мітки в різних станах керується через стилі colorPrimary та colorControlHighlight.

За даними Google Material Components Team (2025), плаваюча мітка особливо корисна у формах з великою кількістю полів, де користувач може забути назву поля після початку введення. На відміну від простого android:hint, який зникає під час введення, плаваюча мітка залишається видимою завжди, забезпечуючи контекст для кожного поля.

Відображення помилок у TextInputLayout

TextInputLayout надає вбудовану систему відображення помилок, яка візуально інтегрована з полем введення. При встановленні помилки через метод setError, компонент підсвічує поле (колір лінії або обводки змінюється на червоний) і відображає текст помилки під полем. Це замінює необхідність в окремому TextView для повідомлень про помилки.

Управління відображенням помилок здійснюється через методи setError(CharSequence) та setErrorEnabled(boolean). При виклику setError з текстом помилка відображається одразу; при виклику setError(null) — приховується. TextInputLayout також підтримує кастомну іконку помилки через атрибут app:errorIconDrawable та управління кольором помилки через app:errorTextColor.

Згідно з Material Design Guidelines (2025), повідомлення про помилки мають бути конкретними та корисними: замість «Невірне введення» писати «Email повинен містити @». Відображення помилки має відбуватися після завершення введення (при втраті фокусу або після відправлення форми), а не в реальному часі — це знижує стрес користувача під час заповнення форми.

// Програмне налаштування помилок
textInputLayout.error = "Password min 8 chars"

// Приховування помилок
textInputLayout.error = null

// Перевірка та встановлення помилок валідації
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Іконки та дії TextInputLayout

TextInputLayout підтримує відображення іконок як на початку поля (start icon), так і в кінці (end icon). Іконки можуть виконувати різні функції: зміна видимості пароля, очищення поля, кастомна дія. Кожен тип іконки керується окремим атрибутом і може бути замінений на кастомну через атрибут app:startIconDrawable або app:endIconDrawable.

End icon mode задається через атрибут app:endIconMode, який може приймати значення: password_toggle — перемикання видимості пароля, clear_text — очищення поля, dropdown_menu — стрілка для випадного списку, custom — кастомна іконка. Для password_toggle TextInputLayout автоматично керує перемиканням inputType між textPassword та textVisiblePassword, а також анімує іконку ока.

• password_toggle — іконка ока для показу/приховування пароля, вбудована анімація.
• clear_text — хрестик для очищення поля, з'являється при наявності тексту.
• dropdown_menu — стрілка для Exposed Dropdown Menu (Material Design 3).
• custom — будь-яка кастомна іконка з обробником через setEndIconOnClickListener.

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

Стилі TextInputLayout: FilledBox та OutlinedBox

Material Components для Android надає два основні стилі для TextInputLayout: FilledBox (заповнений) та OutlinedBox (з обводкою). Стиль FilledBox має залитий кольором фон та лінію під полем, яка змінює колір при фокусі. Стиль OutlinedBox має прозорий фон та обводку навколо всього поля, що створює більш чіткі межі та краще підходить для форм з великою кількістю полів.

Вибір стилю залежить від дизайну додатку: FilledBox рекомендується для форм з частішим використанням, оскільки привертає менше уваги до окремих полів. OutlinedBox переважний для коротких форм (логін, реєстрація), де кожне поле має бути чітко позначене. Стиль задається через атрибут style в XML або через тему додатку.

Material Design 3 (M3) представив оновлені стилі для TextInputLayout з покращеною типографікою, новими колірними токенами та підтримкою динамічних кольорів Material You. У M3 OutlinedBox став рекомендованим стилем за замовчуванням, а FilledBox адаптував відступи та радіус скруглення для відповідності новій специфікації.

Приклади коду з TextInputLayout

Повний приклад реалізації форми реєстрації з TextInputLayout, що включає валідацію email та пароля, відображення помилок та іконку показу пароля. При натисканні кнопки реєстрації перевіряються всі поля та відображаються відповідні повідомлення про помилки.

XML-розмітка форми реєстрації

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Валідація форми в Kotlin

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}