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), съобщенията за грешки трябва да са конкретни и полезни: вместо „Невалидно въвеждане" пишете „Имейлът трябва да съдържа @". Показването на грешка трябва да става след завършване на въвеждането (след загуба на фокус или след изпращане на формата), а не в реално време — това намалява стреса на потребителя при попълване на формата.

// Програмно задаване на грешка
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, включващ валидация на имейл и парола, показване на грешки и икона за показване на парола. При натискане на бутона за регистрация всички полета се проверяват и се показват съответните съобщения за грешки.

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
}