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
}