TextInputLayout: co to je, Material Design a nastavení v Android

Co je TextInputLayout v Android

TextInputLayout — je ViewGroup z balíčku com.google.android.material.textfield, která rozšiřuje LinearLayout a obsahuje uvnitř EditText. Komponent je součástí knihovny Material Components pro Android, počínaje verzí 1.0.0. Hlavním úkolem TextInputLayout je poskytnout hotovou implementaci Material Design Text Fields s minimálním úsilím ze strany vývojáře.

Na rozdíl od standardního EditText, TextInputLayout spravuje animaci plovoucího popisku, který se nastavuje pomocí atributu android:hint vnitřního EditText. Když je pole prázdné, popisek se zobrazí uvnitř pole jako běžná nápověda. Jakmile uživatel začne zadávat text, popisek se animovaně přesune do horní části pole a zmenší se. Podle Material Design Guidelines (2025) taková animace zlepšuje vnímání formuláře, protože uživatel vždy vidí název pole, i po zadání údajů.

Architektonicky TextInputLayout implementuje vzor dekorátoru: zachycuje události EditText, spravuje zobrazování dalších prvků (popisek, chyba, ikony, počítadlo) a koordinuje jejich animaci. Vnitřní EditText je přístupný pomocí metody getEditText() a lze jej nakonfigurovat standardními atributy, včetně inputType, maxLines a 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 a jeho nastavení

Floating label (plovoucí popisek) — je klíčová vlastnost TextInputLayout. Když je pole prázdné, text z android:hint se zobrazí uvnitř EditText jako běžná nápověda. Při získání fokusu nebo při zadávání textu se popisek zvedne do horní části TextInputLayout, zmenší velikost písma a změní barvu. Toto chování řeší problém neviditelnosti nápovědy po začátku zadávání.

Nastavení floating label se provádí pomocí atributů TextInputLayout: app:hintEnabled určuje, zda je plovoucí popisek zapnutý (výchozí true), app:hintAnimationEnabled zapíná nebo vypíná animaci přechodu, app:expandedHintEnabled povoluje zobrazení popisku, i když je pole prázdné a bez fokusu. Barva popisku v různých stavech je řízena pomocí stylů colorPrimary a colorControlHighlight.

Podle Google Material Components Team (2025) je floating label zvláště užitečný ve formulářích s velkým počtem polí, kde uživatel může zapomenout název pole po začátku zadávání. Na rozdíl od jednoduchého android:hint, který při zadávání mizí, floating label zůstává vždy viditelný a poskytuje kontext pro každé pole.

Zobrazování chyb v TextInputLayout

TextInputLayout poskytuje vestavěný systém zobrazování chyb, který je vizuálně integrován se vstupním polem. Při nastavení chyby pomocí metody error komponent zvýrazní pole (barva čáry nebo okraje se změní na červenou) a zobrazí text chyby pod polem. To nahrazuje potřebu samostatného TextView pro chybové zprávy.

Správa zobrazování chyb se provádí pomocí metod setError(CharSequence) a setErrorEnabled(boolean). Při volání setError s textem se chyba zobrazí okamžitě; při volání setError(null) — skryje se. TextInputLayout také podporuje vlastní ikonu chyby pomocí atributu app:errorIconDrawable a správu barvy chyby pomocí app:errorTextColor.

Podle Material Design Guidelines (2025) by měly být chybové zprávy konkrétní a užitečné: místo „Neplatný vstup" napište „Email musí obsahovat @". Zobrazení chyby by mělo nastat po dokončení zadávání (po ztrátě fokusu nebo po odeslání formuláře), ne v reálném čase — to snižuje stres uživatele při vyplňování formuláře.

// Programové nastavení chyby
textInputLayout.error = "Password min 8 chars"

// Skrytí chyby
textInputLayout.error = null

// Kontrola a nastavení validační chyby
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Ikony a akce TextInputLayout

TextInputLayout podporuje zobrazování ikon jak na začátku pole (start icon), tak na konci (end icon). Ikony mohou plnit různé funkce: změna viditelnosti hesla, vymazání pole, vlastní akce. Každý typ ikony je spravován samostatným atributem a lze jej nahradit vlastní ikonou pomocí atributu app:startIconDrawable nebo app:endIconDrawable.

End icon mode se nastavuje pomocí atributu app:endIconMode, který může nabývat hodnot: password_toggle — přepínání viditelnosti hesla, clear_text — vymazání pole, dropdown_menu — šipka pro rozbalovací nabídku, custom — vlastní ikona. Pro password_toggle TextInputLayout automaticky spravuje přepínání inputType mezi textPassword a textVisiblePassword a také animuje ikonu oka.

• password_toggle — ikona oka pro zobrazení/skrytí hesla, vestavěná animace.
• clear_text — křížek pro vymazání pole, zobrazí se při přítomnosti textu.
• dropdown_menu — šipka pro Exposed Dropdown Menu (Material Design 3).
• custom — libovolná vlastní ikona s obsluhou pomocí 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>

Styly TextInputLayout: FilledBox a OutlinedBox

Material Components pro Android poskytuje dva hlavní styly pro TextInputLayout: FilledBox (vyplněný) a OutlinedBox (s obrysem). Styl FilledBox má barevné pozadí a čáru pod polem, která při fokusu mění barvu. Styl OutlinedBox má průhledné pozadí a obrys kolem celého pole, což vytváří jasnější hranice a lépe se hodí pro formuláře s velkým počtem polí.

Výběr stylu závisí na designu aplikace: FilledBox se doporučuje pro často používané formuláře, protože přitahuje méně pozornosti k jednotlivým polím. OutlinedBox je vhodnější pro krátké formuláře (přihlášení, registrace), kde každé pole musí být jasně označeno. Styl se nastavuje pomocí atributu style v XML nebo pomocí tématu aplikace.

Material Design 3 (M3) zavedl aktualizované styly pro TextInputLayout s vylepšenou typografií, novými barevnými tokeny a podporou dynamických barev Material You. V M3 se OutlinedBox stal doporučeným výchozím stylem a FilledBox přizpůsobil mezery a poloměr zaoblení nové specifikaci.

Příklady kódu s TextInputLayout

Úplný příklad implementace registračního formuláře s TextInputLayout, zahrnující validaci emailu a hesla, zobrazování chyb a ikonu zobrazení hesla. Po stisknutí tlačítka registrace se zkontrolují všechna pole a zobrazí se odpovídající chybové zprávy.

XML značení registračního formuláře

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

Validace formuláře v 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
}