TextInputLayout: vad är det, Material Design och konfiguration i Android

Vad är TextInputLayout i Android

TextInputLayout — är en ViewGroup från paketet com.google.android.material.textfield som utökar LinearLayout och innehåller en EditText. Komponenten är en del av Material Components-biblioteket för Android, från version 1.0.0. Huvuduppgiften för TextInputLayout är att tillhandahålla en färdig implementering av Material Design Text Fields med minimal ansträngning från utvecklaren.

Till skillnad från standard EditText hanterar TextInputLayout animeringen av den flytande etiketten, som ställs in via android:hint-attributet för den interna EditText. När fältet är tomt visas etiketten inuti fältet som en vanlig ledtråd. Så snart användaren börjar skriva flyttas etiketten animerat till den övre delen av fältet och blir mindre. Enligt Material Design Guidelines (2025) förbättrar en sådan animering uppfattningen av formuläret, eftersom användaren alltid ser fältets namn, även efter att ha angett data.

Arkitektoniskt implementerar TextInputLayout dekoratörmönstret: det fångar upp EditText-händelser, hanterar visningen av ytterligare element (etikett, fel, ikoner, räknare) och samordnar deras animering. Den interna EditText är tillgänglig via metoden getEditText() och kan konfigureras med standardattribut, inklusive inputType, maxLines och 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 och dess konfiguration

Floating label (flytande etikett) — är huvudfunktionen i TextInputLayout. När fältet är tomt visas texten från android:hint i EditText som en vanlig ledtråd. Vid fokus eller vid textinmatning höjs etiketten till den övre delen av TextInputLayout, minskar teckenstorleken och ändrar färg. Detta beteende löser problemet med att ledtråden blir osynlig efter att inmatningen påbörjats.

Konfiguration av floating label görs via TextInputLayout-attribut: app:hintEnabled bestämmer om den flytande etiketten är aktiverad (standard true), app:hintAnimationEnabled aktiverar eller inaktiverar övergångsanimationen, app:expandedHintEnabled tillåter visning av etiketten även när fältet är tomt och utan fokus. Etikettens färg i olika tillstånd hanteras via stilarna colorPrimary och colorControlHighlight.

Enligt Google Material Components Team (2025) är floating label särskilt användbar i formulär med många fält, där användaren kan glömma fältets namn efter att ha börjat skriva. Till skillnad från enkel android:hint som försvinner vid inmatning, förblir floating label alltid synlig och ger sammanhang för varje fält.

Visning av fel i TextInputLayout

TextInputLayout tillhandahåller ett inbyggt system för felvisning som är visuellt integrerat med inmatningsfältet. Vid inställning av ett fel via metoden error, markerar komponenten fältet (färgen på linjen eller konturen ändras till röd) och visar feltexten under fältet. Detta ersätter behovet av en separat TextView för felmeddelanden.

Hantering av felvisning görs via metoderna setError(CharSequence) och setErrorEnabled(boolean). Vid anrop av setError med text visas felet omedelbart; vid anrop av setError(null) — döljs det. TextInputLayout stöder också en anpassad felikon via attributet app:errorIconDrawable och hantering av fel färg via app:errorTextColor.

Enligt Material Design Guidelines (2025) ska felmeddelanden vara specifika och användbara: skriv i stället för "Ogiltig inmatning" "E-post måste innehålla @". Felvisning bör ske efter att inmatningen slutförts (efter fokusförlust eller efter att formuläret skickats), inte i realtid — detta minskar användarens stress vid ifyllning av formuläret.

// Programmatisk felinställning
textInputLayout.error = "Password min 8 chars"

// Fel döljning
textInputLayout.error = null

// Valideringsfel kontroll och inställning
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Ikoner och åtgärder i TextInputLayout

TextInputLayout stöder visning av ikoner både i början av fältet (start icon) och i slutet (end icon). Ikoner kan utföra olika funktioner: växla lösenordssynlighet, rensa fältet, anpassad åtgärd. Varje ikontyp hanteras av ett separat attribut och kan ersättas med en anpassad ikon via attributet app:startIconDrawable eller app:endIconDrawable.

End icon mode ställs in via attributet app:endIconMode, som kan ta värdena: password_toggle — växling av lösenordssynlighet, clear_text — rensning av fältet, dropdown_menu — pil för rullgardinsmeny, custom — anpassad ikon. För password_toggle hanterar TextInputLayout automatiskt växlingen av inputType mellan textPassword och textVisiblePassword, och animerar även ögonikonen.

• password_toggle — ögonikon för att visa/dölja lösenord, inbyggd animering.
• clear_text — kryss för att rensa fältet, visas när text finns.
• dropdown_menu — pil för Exposed Dropdown Menu (Material Design 3).
• custom — valfri anpassad ikon med hantering 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-stilar: FilledBox och OutlinedBox

Material Components för Android tillhandahåller två huvudstilar för TextInputLayout: FilledBox (fylld) och OutlinedBox (med kontur). Stilen FilledBox har en färgad bakgrund och en linje under fältet som ändrar färg vid fokus. Stilen OutlinedBox har en transparent bakgrund och en kontur runt hela fältet, vilket skapar tydligare gränser och passar bättre för formulär med många fält.

Valet av stil beror på applikationens design: FilledBox rekommenderas för ofta använda formulär, eftersom det drar mindre uppmärksamhet till enskilda fält. OutlinedBox föredras för korta formulär (inloggning, registrering), där varje fält måste vara tydligt markerat. Stilen ställs in via style-attributet i XML eller via applikationens tema.

Material Design 3 (M3) introducerade uppdaterade stilar för TextInputLayout med förbättrad typografi, nya färgtoken och stöd för dynamiska Material You-färger. I M3 blev OutlinedBox den rekommenderade standardstilen och FilledBox anpassade mellanrum och avrundningsradie till den nya specifikationen.

Kodexempel med TextInputLayout

Ett komplett exempel på implementering av ett registreringsformulär med TextInputLayout, inklusive validering av e-post och lösenord, felvisning och ikon för lösenordsvisning. När registreringsknappen trycks kontrolleras alla fält och motsvarande felmeddelanden visas.

XML-markering av registreringsformuläret

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

Formulärvalidering i 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
}