TextInputLayout: mi ez, Material Design és beállítás Androidban

Mi az a TextInputLayout Androidban

TextInputLayout — egy ViewGroup a com.google.android.material.textfield csomagból, amely kiterjeszti a LinearLayout-ot és egy EditText-et tartalmaz. A komponens része a Material Components könyvtárnak Androidhoz, az 1.0.0 verziótól kezdve. A TextInputLayout fő feladata, hogy kész implementációt nyújtson a Material Design Text Fields-hez minimális fejlesztői erőfeszítéssel.

A szabványos EditText-től eltérően a TextInputLayout kezeli a lebegő címke animációját, amely a belső EditText android:hint attribútumán keresztül van beállítva. Amikor a mező üres, a címke a mező belsejében jelenik meg szokásos súgóként. Amint a felhasználó elkezd gépelni, a címke animáltan a mező felső részébe mozog, méretét csökkentve. A Material Design Guidelines (2025) szerint egy ilyen animáció javítja az űrlap érzékelését, mivel a felhasználó mindig látja a mező nevét, még az adatok beírása után is.

Architekturálisan a TextInputLayout a dekorátor mintát implementálja: elkapja az EditText eseményeit, kezeli a kiegészítő elemek (címke, hiba, ikonok, számláló) megjelenítését és koordinálja azok animációját. A belső EditText a getEditText() metóduson keresztül érhető el, és szabványos attribútumokkal konfigurálható, beleértve az inputType, maxLines és hint elemeket.

<!-- 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 és beállítása

Floating label (lebegő címke) — a TextInputLayout kulcsfontosságú képessége. Amikor a mező üres, az android:hint szövege az EditText-ben jelenik meg szokásos súgóként. Fókuszba kerüléskor vagy szöveg beírásakor a címke a TextInputLayout felső részébe emelkedik, csökkentve a betűméretet és megváltoztatva a színt. Ez a viselkedés megoldja a súgó láthatatlanságának problémáját a gépelés megkezdése után.

A floating label beállítása a TextInputLayout attribútumain keresztül történik: az app:hintEnabled meghatározza, hogy a lebegő címke be van-e kapcsolva (alapértelmezett true), az app:hintAnimationEnabled be- vagy kikapcsolja az átmenet animációját, az app:expandedHintEnabled lehetővé teszi a címke megjelenítését akkor is, ha a mező üres és nincs fókuszban. A címke színét különböző állapotokban a colorPrimary és colorControlHighlight stílusok kezelik.

A Google Material Components Team (2025) szerint a floating label különösen hasznos a sok mezőt tartalmazó űrlapoknál, ahol a felhasználó elfelejtheti a mező nevét a gépelés megkezdése után. Az egyszerű android:hint-tel ellentétben, amely eltűnik gépeléskor, a floating label mindig látható marad, kontextust biztosítva minden mezőhöz.

Hibák megjelenítése a TextInputLayout-ban

TextInputLayout beépített hiba-megjelenítési rendszert biztosít, amely vizuálisan integrálódik a beviteli mezővel. Hiba beállításakor az error metóduson keresztül, a komponens kiemeli a mezőt (a vonal vagy keret színe pirosra változik), és megjeleníti a hiba szövegét a mező alatt. Ez helyettesíti a külön TextView szükségességét a hibaüzenetekhez.

A hibák megjelenítésének kezelése a setError(CharSequence) és setErrorEnabled(boolean) metódusokon keresztül történik. A setError szöveggel történő meghívásakor a hiba azonnal megjelenik; a setError(null) meghívásakor — elrejtődik. A TextInputLayout támogatja az egyéni hibaikont is az app:errorIconDrawable attribútumon keresztül, valamint a hiba színének kezelését az app:errorTextColor segítségével.

A Material Design Guidelines (2025) szerint a hibaüzeneteknek konkrétnak és hasznosnak kell lenniük: az „Érvénytelen bevitel" helyett írja, hogy „Az emailnek tartalmaznia kell a @ jelet". A hiba megjelenítésének a bevitel befejezése után kell történnie (fókusz elvesztése vagy az űrlap elküldése után), nem valós időben — ez csökkenti a felhasználó stresszét az űrlap kitöltésekor.

// Programozott hibabeállítás
textInputLayout.error = "Password min 8 chars"

// Hiba elrejtése
textInputLayout.error = null

// Érvényesítési hiba ellenőrzése és beállítása
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayout ikonok és műveletek

TextInputLayout támogatja az ikonok megjelenítését mind a mező elején (start icon), mind a végén (end icon). Az ikonok különböző funkciókat láthatnak el: jelszó láthatóságának váltása, mező törlése, egyéni művelet. Minden ikontípust egy külön attribútum kezel, és helyettesíthető egyéni ikonnal az app:startIconDrawable vagy app:endIconDrawable attribútumon keresztül.

End icon mode az app:endIconMode attribútumon keresztül van beállítva, amely a következő értékeket veheti fel: password_toggle — jelszó láthatóságának váltása, clear_text — mező törlése, dropdown_menu — nyíl a legördülő menühöz, custom — egyéni ikon. A password_toggle esetében a TextInputLayout automatikusan kezeli az inputType váltását a textPassword és textVisiblePassword között, valamint animálja a szem ikont.

• password_toggle — szem ikon a jelszó mutatásához/elrejtéséhez, beépített animáció.
• clear_text — kereszt a mező törléséhez, szöveg jelenlétekor jelenik meg.
• dropdown_menu — nyíl az Exposed Dropdown Menu-hoz (Material Design 3).
• custom — bármilyen egyéni ikon a setEndIconOnClickListener-en keresztüli kezeléssel.

<!-- 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 stílusok: FilledBox és OutlinedBox

A Material Components Androidhoz két fő stílust biztosít a TextInputLayout számára: FilledBox (kitöltött) és OutlinedBox (körvonalazott). A FilledBox stílus színes háttérrel és a mező alatti vonallal rendelkezik, amely fókuszban színt vált. Az OutlinedBox stílus átlátszó háttérrel és a teljes mező körüli körvonallal rendelkezik, ami tisztább határokat hoz létre, és jobban megfelel a sok mezőt tartalmazó űrlapokhoz.

A stílus kiválasztása az alkalmazás design-jától függ: FilledBox ajánlott a gyakran használt űrlapokhoz, mivel kevesebb figyelmet vonz az egyes mezőkre. OutlinedBox előnyösebb rövid űrlapokhoz (bejelentkezés, regisztráció), ahol minden mezőnek egyértelműen jelölve kell lennie. A stílus a style attribútumon keresztül XML-ben vagy az alkalmazás témáján keresztül állítható be.

A Material Design 3 (M3) frissített stílusokat vezetett be a TextInputLayout számára javított tipográfiával, új szín tokenekkel és a Material You dinamikus színeinek támogatásával. Az M3-ban az OutlinedBox lett az ajánlott alapértelmezett stílus, a FilledBox pedig igazította a térközöket és a lekerekítési sugarat az új specifikációhoz.

Kódpéldák TextInputLayout-tal

Teljes példa egy regisztrációs űrlap implementációjára TextInputLayout-tal, beleértve az email és jelszó validálását, hibajelzést és jelszómutatás ikont. A regisztrációs gomb megnyomásakor az összes mező ellenőrzésre kerül, és a megfelelő hibaüzenetek jelennek meg.

A regisztrációs űrlap XML jelölése

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

Űrlap validálása Kotlinban

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
}