TextInputLayout: ce este, Material Design și configurarea în Android

Ce este TextInputLayout în Android

TextInputLayout — este un ViewGroup din pachetul com.google.android.material.textfield, care extinde LinearLayout și conține în interior un EditText. Componenta face parte din biblioteca Material Components pentru Android, începând cu versiunea 1.0.0. Sarcina principală a TextInputLayout este de a oferi o implementare gata făcută a Material Design Text Fields cu efort minim din partea dezvoltatorului.

Spre deosebire de EditText standard, TextInputLayout gestionează animația etichetei flotante, care este setată prin atributul android:hint al EditText-ului intern. Când câmpul este gol, eticheta se afișează în interiorul câmpului ca un indiciu obișnuit. De îndată ce utilizatorul începe să introducă text, eticheta se mută animat în partea superioară a câmpului, reducându-și dimensiunea. Conform Material Design Guidelines (2025), o astfel de animație îmbunătățește percepția formularului, deoarece utilizatorul vede întotdeauna numele câmpului, chiar și după introducerea datelor.

Din punct de vedere arhitectural, TextInputLayout implementează modelul decorator: interceptează evenimentele EditText, gestionează afișarea elementelor suplimentare (etichetă, eroare, pictograme, contor) și coordonează animația acestora. EditText-ul intern este accesibil prin metoda getEditText() și poate fi configurat cu atribute standard, inclusiv inputType, maxLines și 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 și configurarea sa

Floating label (eticheta flotantă) — este capacitatea cheie a TextInputLayout. Când câmpul este gol, textul din android:hint se afișează în interiorul EditText ca un indiciu obișnuit. La primirea focusului sau la introducerea textului, eticheta se ridică în partea superioară a TextInputLayout, reducând dimensiunea fontului și schimbând culoarea. Acest comportament rezolvă problema invizibilității indiciului după începerea introducerii.

Configurarea floating label se realizează prin atributele TextInputLayout: app:hintEnabled determină dacă eticheta flotantă este activată (implicit true), app:hintAnimationEnabled activează sau dezactivează animația de tranziție, app:expandedHintEnabled permite afișarea etichetei chiar și când câmpul este gol și fără focus. Culoarea etichetei în diferite stări este gestionată prin stilurile colorPrimary și colorControlHighlight.

Conform Google Material Components Team (2025), floating label este deosebit de utilă în formularele cu un număr mare de câmpuri, unde utilizatorul poate uita numele câmpului după începerea introducerii. Spre deosebire de simplul android:hint care dispare la introducere, floating label rămâne întotdeauna vizibil, asigurând context pentru fiecare câmp.

Afișarea erorilor în TextInputLayout

TextInputLayout oferă un sistem încorporat de afișare a erorilor, care este integrat vizual cu câmpul de introducere. La setarea unei erori prin metoda error, componenta evidențiază câmpul (culoarea liniei sau a conturului se schimbă în roșu) și afișează textul erorii sub câmp. Aceasta înlocuiește necesitatea unui TextView separat pentru mesajele de eroare.

Gestionarea afișării erorilor se realizează prin metodele setError(CharSequence) și setErrorEnabled(boolean). La apelarea setError cu text, eroarea este afișată imediat; la apelarea setError(null) — este ascunsă. TextInputLayout suportă de asemenea o pictogramă de eroare personalizată prin atributul app:errorIconDrawable și gestionarea culorii erorii prin app:errorTextColor.

Conform Material Design Guidelines (2025), mesajele de eroare trebuie să fie concrete și utile: în loc de „Intrare invalidă” scrieți „Emailul trebuie să conțină @”. Afișarea erorii trebuie să aibă loc după finalizarea introducerii (după pierderea focusului sau după trimiterea formularului), nu în timp real — aceasta reduce stresul utilizatorului la completarea formularului.

// Configurarea programatică a erorilor
textInputLayout.error = "Password min 8 chars"

// Ascunderea erorilor
textInputLayout.error = null

// Verificarea și setarea erorii de validare
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Pictogramele și acțiunile TextInputLayout

TextInputLayout suportă afișarea pictogramelor atât la începutul câmpului (start icon), cât și la sfârșit (end icon). Pictogramele pot îndeplini diverse funcții: schimbarea vizibilității parolei, ștergerea câmpului, acțiune personalizată. Fiecare tip de pictogramă este gestionat de un atribut separat și poate fi înlocuit cu una personalizată prin atributul app:startIconDrawable sau app:endIconDrawable.

End icon mode este setat prin atributul app:endIconMode, care poate lua valorile: password_toggle — comutarea vizibilității parolei, clear_text — ștergerea câmpului, dropdown_menu — săgeată pentru meniu derulant, custom — pictogramă personalizată. Pentru password_toggle, TextInputLayout gestionează automat comutarea inputType între textPassword și textVisiblePassword, și de asemenea animează pictograma ochiului.

• password_toggle — pictograma ochiului pentru afișarea/ascunderea parolei, animație încorporată.
• clear_text — cruciuliță pentru ștergerea câmpului, apare când există text.
• dropdown_menu — săgeată pentru Exposed Dropdown Menu (Material Design 3).
• custom — orice pictogramă personalizată cu gestionare prin 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>

Stilurile TextInputLayout: FilledBox și OutlinedBox

Material Components pentru Android oferă două stiluri principale pentru TextInputLayout: FilledBox (umplut) și OutlinedBox (cu contur). Stilul FilledBox are un fundal colorat și o linie sub câmp care își schimbă culoarea la focus. Stilul OutlinedBox are un fundal transparent și un contur în jurul întregului câmp, creând limite mai clare și fiind mai potrivit pentru formularele cu un număr mare de câmpuri.

Alegerea stilului depinde de designul aplicației: FilledBox este recomandat pentru formularele utilizate frecvent, deoarece atrage mai puțină atenție asupra câmpurilor individuale. OutlinedBox este preferat pentru formularele scurte (autentificare, înregistrare), unde fiecare câmp trebuie să fie clar delimitat. Stilul se setează prin atributul style în XML sau prin tema aplicației.

Material Design 3 (M3) a introdus stiluri actualizate pentru TextInputLayout cu tipografie îmbunătățită, noi token-uri de culoare și suport pentru culorile dinamice Material You. În M3, OutlinedBox a devenit stilul implicit recomandat, iar FilledBox a adaptat spațierile și raza de rotunjire pentru a corespunde noii specificații.

Exemple de cod cu TextInputLayout

Un exemplu complet de implementare a unui formular de înregistrare cu TextInputLayout, incluzând validarea emailului și parolei, afișarea erorilor și pictograma de afișare a parolei. La apăsarea butonului de înregistrare, toate câmpurile sunt verificate și se afișează mesajele de eroare corespunzătoare.

Marcajul XML al formularului de înregistrare

@+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>

Validarea formularului în 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
}