TextInputLayout: bu nədir, Material Design və Android-də konfiqurasiya

Android-də TextInputLayout nədir

TextInputLayout — com.google.android.material.textfield paketindən olan ViewGroup-dur, LinearLayout-u genişləndirir və daxilində EditText saxlayır. Komponent Android üçün Material Components kitabxanasının tərkib hissəsidir, 1.0.0 versiyasından başlayaraq. TextInputLayout-un əsas vəzifəsi Material Design Text Fields-in hazır implementasiyasını proqramçının minimal səyi ilə təmin etməkdir.

Standart EditText-dən fərqli olaraq, TextInputLayout daxili EditText-in android:hint atributu vasitəsilə təyin olunan üzən etiketin animasiyasını idarə edir. Sahə boş olduqda, etiket sahənin içərisində adi ipucu kimi göstərilir. İstifadəçi mətn daxil etməyə başlayan kimi, etiket animasiya ilə sahənin yuxarı hissəsinə keçir, ölçüsü kiçilir. Material Design Guidelines (2025)-ə görə, belə animasiya formanın qavranılmasını yaxşılaşdırır, çünki istifadəçi məlumat daxil etdikdən sonra belə sahənin adını həmişə görür.

Arxitektura baxımından TextInputLayout dekorator nümunəsini tətbiq edir: EditText hadisələrini ələ keçirir, əlavə elementlərin (etiket, xəta, ikonlar, sayğac) göstərilməsini idarə edir və onların animasiyasını koordinasiya edir. Daxili EditText getEditText() metodu vasitəsilə əldə edilə bilər və inputType, maxLines və hint daxil olmaqla standart atributlarla konfiqurasiya edilə bilər.

<!-- 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 və onun konfiqurasiyası

Floating label (üzən etiket) — TextInputLayout-un əsas imkanıdır. Sahə boş olduqda, android:hint mətni EditText-in daxilində adi ipucu kimi göstərilir. Fokus alındıqda və ya mətn daxil edildikdə, etiket TextInputLayout-un yuxarı hissəsinə qalxır, şrift ölçüsünü kiçildir və rəngini dəyişir. Bu davranış daxiletmə başladıqdan sonra ipucunun görünməməsi problemini həll edir.

Floating label-in konfiqurasiyası TextInputLayout atributları vasitəsilə həyata keçirilir: app:hintEnabled üzən etiketin aktiv olub-olmadığını müəyyən edir (standart true), app:hintAnimationEnabled keçid animasiyasını aktivləşdirir və ya söndürür, app:expandedHintEnabled sahə boş və fokusda olmasa belə etiketin göstərilməsinə icazə verir. Müxtəlif vəziyyətlərdə etiketin rəngi colorPrimary və colorControlHighlight üslubları vasitəsilə idarə olunur.

Google Material Components Team (2025)-ə görə, floating label çox sayda sahəsi olan formalarda xüsusilə faydalıdır, burada istifadəçi daxiletməyə başladıqdan sonra sahənin adını unuda bilər. Daxiletmə zamanı yoxa çıxan sadə android:hint-dən fərqli olaraq, floating label həmişə görünən qalır, hər bir sahə üçün kontekst təmin edir.

TextInputLayout-da xəta göstərilməsi

TextInputLayout daxiletmə sahəsi ilə vizual olaraq inteqrasiya olunmuş daxili xəta göstərmə sistemi təmin edir. error metodu vasitəsilə xəta təyin edildikdə, komponent sahəni vurğulayır (xəttin və ya konturun rəngi qırmızıya dəyişir) və xəta mətnini sahənin altında göstərir. Bu, xəta mesajları üçün ayrıca TextView-ə ehtiyacı aradan qaldırır.

Xəta göstərilməsinin idarə edilməsi setError(CharSequence) və setErrorEnabled(boolean) metodları vasitəsilə həyata keçirilir. setError mətnlə çağırıldıqda xəta dərhal göstərilir; setError(null) çağırıldıqda — gizlənir. TextInputLayout həmçinin app:errorIconDrawable atributu vasitəsilə fərdi xəta ikonasını və app:errorTextColor vasitəsilə xəta rənginin idarə edilməsini dəstəkləyir.

Material Design Guidelines (2025)-ə görə, xəta mesajları konkret və faydalı olmalıdır: "Yanlış daxiletmə" əvəzinə "Email @ işarəsini ehtiva etməlidir" yazın. Xəta göstərilməsi daxiletmə tamamlandıqdan sonra (fokus itirildikdə və ya forma göndərildikdən sonra) baş verməlidir, real vaxtda deyil — bu, formanı doldurarkən istifadəçinin stressini azaldır.

// Proqram xətasının qurulması
textInputLayout.error = "Password min 8 chars"

// Xətanın gizlədilməsi
textInputLayout.error = null

// Validatorinq xətasının yoxlanılması və təyin edilməsi
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayout ikonları və hərəkətləri

TextInputLayout həm sahənin əvvəlində (start icon), həm də sonunda (end icon) ikonların göstərilməsini dəstəkləyir. İkonlar müxtəlif funksiyaları yerinə yetirə bilər: parolun görünməsinin dəyişdirilməsi, sahənin təmizlənməsi, fərdi hərəkət. Hər bir ikon növü ayrıca atributla idarə olunur və app:startIconDrawable və ya app:endIconDrawable atributu vasitəsilə fərdi ikonla əvəz edilə bilər.

End icon mode app:endIconMode atributu vasitəsilə təyin edilir və aşağıdakı dəyərləri qəbul edə bilər: password_toggle — parolun görünməsinin dəyişdirilməsi, clear_text — sahənin təmizlənməsi, dropdown_menu — açılan siyahı üçün ox, custom — fərdi ikon. password_toggle üçün TextInputLayout inputType-u textPassword və textVisiblePassword arasında avtomatik dəyişdirir, həmçinin göz ikonasını animasiya edir.

• password_toggle — parolu göstərmək/gizlətmək üçün göz ikonası, daxili animasiya.
• clear_text — mətn olduqda görünən sahəni təmizləmək üçün xaç işarəsi.
• dropdown_menu — Exposed Dropdown Menu (Material Design 3) üçün ox.
• custom — setEndIconOnClickListener vasitəsilə idarə olunan istənilən fərdi ikon.

<!-- 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 üslubları: FilledBox və OutlinedBox

Android üçün Material Components TextInputLayout üçün iki əsas üslub təqdim edir: FilledBox (doldurulmuş) və OutlinedBox (konturlu). FilledBox üslubu rənglə doldurulmuş fon və fokusda rəngini dəyişən sahənin altında xəttə malikdir. OutlinedBox üslubu şəffaf fon və bütün sahənin ətrafında kontura malikdir, bu da daha aydın sərhədlər yaradır və çox sayda sahəsi olan formalar üçün daha uyğundur.

Üslub seçimi tətbiqin dizaynından asılıdır: FilledBox tez-tez istifadə olunan formalar üçün tövsiyə olunur, çünki ayrı-ayrı sahələrə daha az diqqət çəkir. OutlinedBox qısa formalar (giriş, qeydiyyat) üçün üstünlük təşkil edir, burada hər bir sahə aydın şəkildə qeyd olunmalıdır. Üslub XML-də style atributu və ya tətbiq mövzusu vasitəsilə təyin edilir.

Material Design 3 (M3) TextInputLayout üçün təkmilləşdirilmiş tipografiya, yeni rəng tokenləri və Material You dinamik rəngləri ilə yenilənmiş üslublar təqdim etdi. M3-də OutlinedBox tövsiyə olunan standart üslub oldu, FilledBox isə yeni spesifikasiyaya uyğun olaraq boşluqları və yuvarlaqlaşdırma radiusunu uyğunlaşdırdı.

TextInputLayout ilə kod nümunələri

Email və parolun validatorinqini, xəta göstərilməsini və parol göstərmə ikonasını əhatə edən TextInputLayout ilə qeydiyyat formasının tam icra nümunəsi. Qeydiyyat düyməsi basıldıqda bütün sahələr yoxlanılır və müvafiq xəta mesajları göstərilir.

Qeydiyyat formasının XML işarələməsi

@+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-də formanın validatorinqi

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
}