TextInputLayout: wat is het, Material Design en configuratie in Android

Wat is TextInputLayout in Android

TextInputLayout — is een ViewGroup uit het pakket com.google.android.material.textfield dat LinearLayout uitbreidt en een EditText bevat. De component maakt deel uit van de Material Components-bibliotheek voor Android, vanaf versie 1.0.0. De hoofdtaak van TextInputLayout is het bieden van een kant-en-klare implementatie van Material Design Text Fields met minimale inspanning van de ontwikkelaar.

In tegenstelling tot de standaard EditText beheert TextInputLayout de animatie van het zwevende label, dat wordt ingesteld via het android:hint-attribuut van de interne EditText. Wanneer het veld leeg is, wordt het label in het veld weergegeven als een gewone hint. Zodra de gebruiker begint met typen, beweegt het label geanimeerd naar het bovenste gedeelte van het veld en wordt het kleiner. Volgens de Material Design Guidelines (2025) verbetert een dergelijke animatie de perceptie van het formulier, omdat de gebruiker altijd de veldnaam ziet, zelfs na het invoeren van gegevens.

Architectonisch implementeert TextInputLayout het decoratorpatroon: het onderschept EditText-gebeurtenissen, beheert de weergave van extra elementen (label, fout, pictogrammen, teller) en coördineert hun animatie. De interne EditText is toegankelijk via de methode getEditText() en kan worden geconfigureerd met standaardattributen, waaronder inputType, maxLines en 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 en de configuratie ervan

Floating label (zwevend label) — is de belangrijkste functionaliteit van TextInputLayout. Wanneer het veld leeg is, wordt de tekst uit android:hint in de EditText weergegeven als een gewone hint. Bij het verkrijgen van focus of bij het invoeren van tekst, stijgt het label naar het bovenste gedeelte van TextInputLayout, verkleint het lettertype en verandert het van kleur. Dit gedrag lost het probleem op van de onzichtbaarheid van de hint nadat het typen is begonnen.

Configuratie van het floating label gebeurt via TextInputLayout-attributen: app:hintEnabled bepaalt of het zwevende label is ingeschakeld (standaard true), app:hintAnimationEnabled schakelt de overgangsanimatie in of uit, app:expandedHintEnabled staat weergave van het label toe, zelfs als het veld leeg en niet in focus is. De kleur van het label in verschillende toestanden wordt beheerd via de stijlen colorPrimary en colorControlHighlight.

Volgens Google Material Components Team (2025) is floating label vooral nuttig in formulieren met veel velden, waar de gebruiker de veldnaam kan vergeten na het begin van het typen. In tegenstelling tot eenvoudige android:hint die verdwijnt bij het typen, blijft floating label altijd zichtbaar en biedt context voor elk veld.

Foutmeldingen in TextInputLayout

TextInputLayout biedt een ingebouwd systeem voor het weergeven van fouten dat visueel is geïntegreerd met het invoerveld. Bij het instellen van een fout via de methode error, markeert de component het veld (de kleur van de lijn of rand verandert naar rood) en toont de fouttekst onder het veld. Dit vervangt de noodzaak van een aparte TextView voor foutmeldingen.

Beheer van de foutweergave gebeurt via de methoden setError(CharSequence) en setErrorEnabled(boolean). Bij het aanroepen van setError met tekst wordt de fout onmiddellijk weergegeven; bij het aanroepen van setError(null) wordt deze verborgen. TextInputLayout ondersteunt ook een aangepast foutpictogram via het attribuut app:errorIconDrawable en beheer van de foutkleur via app:errorTextColor.

Volgens de Material Design Guidelines (2025) moeten foutmeldingen concreet en nuttig zijn: schrijf in plaats van 'Ongeldige invoer' 'E-mail moet @ bevatten'. Foutweergave moet plaatsvinden na het voltooien van de invoer (na focusverlies of na het verzenden van het formulier), niet in real-time — dit vermindert de stress van de gebruiker bij het invullen van het formulier.

// Programmatische foutinstelling
textInputLayout.error = "Password min 8 chars"

// Fout verbergen
textInputLayout.error = null

// Validatiefout controleren en instellen
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Pictogrammen en acties van TextInputLayout

TextInputLayout ondersteunt het weergeven van pictogrammen zowel aan het begin van het veld (start icon) als aan het einde (end icon). Pictogrammen kunnen verschillende functies vervullen: het wijzigen van de wachtwoordzichtbaarheid, het wissen van het veld, een aangepaste actie. Elk pictogramtype wordt beheerd door een apart attribuut en kan worden vervangen door een aangepast pictogram via het attribuut app:startIconDrawable of app:endIconDrawable.

End icon mode wordt ingesteld via het attribuut app:endIconMode, dat de volgende waarden kan aannemen: password_toggle — schakelen van wachtwoordzichtbaarheid, clear_text — veld wissen, dropdown_menu — pijl voor vervolgkeuzemenu, custom — aangepast pictogram. Voor password_toggle beheert TextInputLayout automatisch het schakelen van inputType tussen textPassword en textVisiblePassword, en animeert ook het oogpictogram.

• password_toggle — oogpictogram voor wachtwoord tonen/verbergen, ingebouwde animatie.
• clear_text — kruisje voor het wissen van het veld, verschijnt bij aanwezigheid van tekst.
• dropdown_menu — pijl voor Exposed Dropdown Menu (Material Design 3).
• custom — elk aangepast pictogram met afhandeling via 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>

TextInputLayout-stijlen: FilledBox en OutlinedBox

Material Components voor Android biedt twee hoofdstijlen voor TextInputLayout: FilledBox (gevuld) en OutlinedBox (omlijnd). De stijl FilledBox heeft een gekleurde achtergrond en een lijn onder het veld die van kleur verandert bij focus. De stijl OutlinedBox heeft een transparante achtergrond en een omlijning rond het hele veld, wat duidelijkere grenzen creëert en beter geschikt is voor formulieren met veel velden.

De keuze van de stijl hangt af van het app-ontwerp: FilledBox wordt aanbevolen voor veelgebruikte formulieren, omdat het minder aandacht trekt naar individuele velden. OutlinedBox heeft de voorkeur voor korte formulieren (inloggen, registratie), waar elk veld duidelijk moet worden gemarkeerd. De stijl wordt ingesteld via het style-attribuut in XML of via het thema van de app.

Material Design 3 (M3) heeft bijgewerkte stijlen geïntroduceerd voor TextInputLayout met verbeterde typografie, nieuwe kleurtokens en ondersteuning voor dynamische Material You-kleuren. In M3 is OutlinedBox de aanbevolen standaardstijl geworden, en FilledBox heeft de spaties en afrondingsradius aangepast aan de nieuwe specificatie.

Codevoorbeelden met TextInputLayout

Een volledig voorbeeld van de implementatie van een registratieformulier met TextInputLayout, inclusief e-mail- en wachtwoordvalidatie, foutweergave en een wachtwoordweergavepictogram. Bij het indrukken van de registratieknop worden alle velden gecontroleerd en worden de bijbehorende foutmeldingen weergegeven.

XML-opmaak van het registratieformulier

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

Formuliervalidatie in 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
}