TextInputLayout: bu nima, Material Design va Android-da sozlash

Android-da TextInputLayout nima

TextInputLayout — com.google.android.material.textfield paketidagi ViewGroup bo'lib, LinearLayout-ni kengaytiradi va ichida EditText-ni saqlaydi. Komponent Android uchun Material Components kutubxonasining bir qismi bo'lib, 1.0.0 versiyasidan boshlab mavjud. TextInputLayout-ning asosiy vazifasi Material Design Text Fields-ning tayyor implementatsiyasini dasturchining minimal harakati bilan ta'minlashdir.

Standart EditText-dan farqli o'laroq, TextInputLayout ichki EditText-ning android:hint atributi orqali o'rnatiladigan suzuvchi yorliqning animatsiyasini boshqaradi. Maydon bo'sh bo'lganda, yorliq maydon ichida oddiy maslahat sifatida ko'rsatiladi. Foydalanuvchi matn kiritishni boshlashi bilan yorliq animatsiya bilan maydonning yuqori qismiga o'tadi, hajmini kichiklashtiradi. Material Design Guidelines (2025)-ga ko'ra, bunday animatsiya formani idrok etishni yaxshilaydi, chunki foydalanuvchi ma'lumotlarni kiritgandan keyin ham maydon nomini doimo ko'radi.

Arxitektura nuqtai nazaridan, TextInputLayout dekorator naqshini amalga oshiradi: EditText hodisalarini tutib oladi, qo'shimcha elementlarning (yorliq, xato, ikonkalar, hisoblagich) ko'rinishini boshqaradi va ularning animatsiyasini muvofiqlashtiradi. Ichki EditText getEditText() metodi orqali mavjud va inputType, maxLines va hint kabi standart atributlar bilan sozlanishi mumkin.

<!-- 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 va uni sozlash

Floating label (suzuvchi yorliq) — TextInputLayout-ning asosiy imkoniyatidir. Maydon bo'sh bo'lganda, android:hint matni EditText ichida oddiy maslahat sifatida ko'rsatiladi. Fokus olinganda yoki matn kiritilganda, yorliq TextInputLayout-ning yuqori qismiga ko'tariladi, shrift hajmini kichiklashtiradi va rangini o'zgartiradi. Bu xatti-harakat kiritish boshlangandan keyin maslahatning ko'rinmasligi muammosini hal qiladi.

Floating label-ni sozlash TextInputLayout atributlari orqali amalga oshiriladi: app:hintEnabled suzuvchi yorliq yoqilgan yoki o'chirilganligini aniqlaydi (standart true), app:hintAnimationEnabled o'tish animatsiyasini yoqadi yoki o'chiradi, app:expandedHintEnabled maydon bo'sh va fokusda bo'lmasa ham yorliqni ko'rsatishga ruxsat beradi. Turli holatlardagi yorliq rangi colorPrimary va colorControlHighlight uslublari orqali boshqariladi.

Google Material Components Team (2025)-ga ko'ra, floating label ko'p maydonli formalarda ayniqsa foydali, bunda foydalanuvchi kiritishni boshlagandan keyin maydon nomini unutishi mumkin. Kiritish vaqtida yo'qolib ketadigan oddiy android:hint-dan farqli o'laroq, floating label doimo ko'rinadigan bo'lib qoladi, har bir maydon uchun kontekstni ta'minlaydi.

TextInputLayout-da xatolarni ko'rsatish

TextInputLayout kiritish maydoni bilan vizual integratsiyalangan o'rnatilgan xato ko'rsatish tizimini ta'minlaydi. error metodi orqali xato o'rnatilganda, komponent maydonni ajratib ko'rsatadi (chiziq yoki kontur rangi qizilga o'zgaradi) va xato matnini maydon ostida ko'rsatadi. Bu xato xabarlari uchun alohida TextView-ga bo'lgan ehtiyojni yo'q qiladi.

Xato ko'rsatishni boshqarish setError(CharSequence) va setErrorEnabled(boolean) metodlari orqali amalga oshiriladi. setError matn bilan chaqirilganda xato darhol ko'rsatiladi; setError(null) chaqirilganda — yashiriladi. TextInputLayout shuningdek app:errorIconDrawable atributi orqali maxsus xato ikonkasini va app:errorTextColor orqali xato rangini boshqarishni qo'llab-quvvatlaydi.

Material Design Guidelines (2025)-ga ko'ra, xato xabarlari aniq va foydali bo'lishi kerak: "Noto'g'ri kiritish" o'rniga "Email @ belgisini o'z ichiga olishi kerak" deb yozing. Xato ko'rsatish kiritish tugagandan so'ng (fokus yo'qolganda yoki forma yuborilgandan keyin) sodir bo'lishi kerak, real vaqtda emas — bu formani to'ldirishda foydalanuvchining stressini kamaytiradi.

// Dasturiy xato sozlamasi
textInputLayout.error = "Password min 8 chars"

// Xatoni yashirish
textInputLayout.error = null

// Validatsiya xatosini tekshirish va o'rnatish
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayout ikonkalari va harakatlari

TextInputLayout maydonning boshida (start icon) va oxirida (end icon) ikonkalarni ko'rsatishni qo'llab-quvvatlaydi. Ikonkalar turli funktsiyalarni bajarishi mumkin: parol ko'rinishini o'zgartirish, maydonni tozalash, maxsus harakat. Har bir ikonka turi alohida atribut bilan boshqariladi va app:startIconDrawable yoki app:endIconDrawable atributi orqali maxsus ikonka bilan almashtirilishi mumkin.

End icon mode app:endIconMode atributi orqali o'rnatiladi va quyidagi qiymatlarni qabul qilishi mumkin: password_toggle — parol ko'rinishini almashtirish, clear_text — maydonni tozalash, dropdown_menu — ochiladigan ro'yxat uchun strelka, custom — maxsus ikonka. password_toggle uchun TextInputLayout avtomatik ravishda inputType-ni textPassword va textVisiblePassword o'rtasida almashtiradi, shuningdek ko'z ikonkasini animatsiya qiladi.

• password_toggle — parolni ko'rsatish/yashirish uchun ko'z ikonkasi, o'rnatilgan animatsiya.
• clear_text — maydonni tozalash uchun xoch belgisi, matn mavjud bo'lganda paydo bo'ladi.
• dropdown_menu — Exposed Dropdown Menu (Material Design 3) uchun strelka.
• custom — setEndIconOnClickListener orqali boshqariladigan istalgan maxsus ikonka.

<!-- 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 uslublari: FilledBox va OutlinedBox

Android uchun Material Components TextInputLayout uchun ikkita asosiy uslubni taqdim etadi: FilledBox (to'ldirilgan) va OutlinedBox (konturli). FilledBox uslubi rang bilan to'ldirilgan fon va fokusda rangini o'zgartiradigan maydon ostidagi chiziqqa ega. OutlinedBox uslubi shaffof fon va butun maydon atrofida konturga ega, bu aniqroq chegaralar yaratadi va ko'p maydonli formalar uchun ko'proq mos keladi.

Uslub tanlovi ilova dizayniga bog'liq: FilledBox tez-tez ishlatiladigan formalar uchun tavsiya etiladi, chunki alohida maydonlarga kamroq e'tibor tortadi. OutlinedBox qisqa formalar (kirish, ro'yxatdan o'tish) uchun afzal, bunda har bir maydon aniq belgilangan bo'lishi kerak. Uslub XML-dagi style atributi yoki ilova mavzusi orqali o'rnatiladi.

Material Design 3 (M3) TextInputLayout uchun yaxshilangan tipografiya, yangi rang tokenlari va Material You dinamik ranglarini qo'llab-quvvatlovchi yangilangan uslublarni taqdim etdi. M3-da OutlinedBox tavsiya etilgan standart uslubga aylandi, FilledBox esa yangi spetsifikatsiyaga mos ravishda oraliqlar va yaxlitlash radiusini moslashtirdi.

TextInputLayout bilan kod namunalari

Email va parol validatsiyasi, xatolarni ko'rsatish va parolni ko'rsatish ikonkasini o'z ichiga olgan TextInputLayout bilan ro'yxatdan o'tish formasining to'liq implementatsiya namunasi. Ro'yxatdan o'tish tugmasi bosilganda barcha maydonlar tekshiriladi va tegishli xato xabarlari ko'rsatiladi.

Ro'yxatdan o'tish formasining XML belgilari

@+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-da forma validatsiyasi

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
}