TextInputLayout: что это, Material Design и настройка в Android

Что такое TextInputLayout в Android

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

В отличие от стандартного 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 и его настройка

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

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

По данным Google Material Components Team (2025), floating label особенно полезна в формах с большим количеством полей, где пользователь может забыть название поля после начала ввода. В отличие от простого android:hint, который исчезает при вводе, floating label остаётся видимой всегда, обеспечивая контекст для каждого поля.

Отображение ошибок в TextInputLayout

TextInputLayout предоставляет встроенную систему отображения ошибок, которая визуально интегрирована с полем ввода. При установке ошибки через метод error, компонент подсвечивает поле (цвет линии или обводки меняется на красный) и отображает текст ошибки под полем. Это заменяет необходимость в отдельном TextView для сообщений об ошибках.

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

По данным Material Design Guidelines (2025), сообщения об ошибках должны быть конкретными и полезными: вместо "Неверный ввод" писать "Email должен содержать @". Отображение ошибки должно происходить после завершения ввода (по потери фокуса или после отправки формы), а не в реальном времени — это снижает стресс пользователя при заполнении формы.

// Programmatic error setup
textInputLayout.error = "Password min 8 chars"

// Error hiding
textInputLayout.error = null

// Validation error check and set
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
}