TextInputLayout: What It Is, Material Design and Setup in Android

What Is TextInputLayout in Android

TextInputLayout is a ViewGroup from the com.google.android.material.textfield package that extends LinearLayout and contains an EditText inside. The component is part of the Material Components library for Android, starting from version 1.0.0. The main goal of TextInputLayout is to provide a ready-made implementation of Material Design Text Fields with minimal effort from the developer.

Unlike a standard EditText, TextInputLayout manages the animation of the floating label, which is set via the android:hint attribute of the inner EditText. When the field is empty, the label appears inside the field as a regular hint. As soon as the user starts typing, the label animates to the top of the field, shrinking in size. According to Material Design Guidelines (2025), this animation improves form perception because the user always sees the field name, even after entering data.

Architecturally, TextInputLayout implements the decorator pattern: it intercepts EditText events, manages the display of additional elements (label, error, icons, counter), and coordinates their animation. The inner EditText is accessible via the getEditText() method and can be configured with standard attributes, including inputType, maxLines, and 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 and Its Configuration

Floating label is the key feature of TextInputLayout. When the field is empty, the text from android:hint displays inside the EditText as a regular placeholder. When the field gains focus or text is entered, the label rises to the top of the TextInputLayout, reducing font size and changing color. This behavior solves the problem of the hint becoming invisible after the user starts typing.

Configuring the floating label is done through TextInputLayout attributes: app:hintEnabled determines whether the floating label is enabled (default true), app:hintAnimationEnabled enables or disables the transition animation, app:expandedHintEnabled allows the label to display even when the field is empty and not focused. The label color in different states is managed through colorPrimary and colorControlHighlight styles.

According to Google Material Components Team (2025), the floating label is especially useful in forms with many fields, where the user might forget the field name after starting to type. Unlike a simple android:hint that disappears on input, the floating label remains visible at all times, providing context for each field.

Error Display in TextInputLayout

TextInputLayout provides a built-in error display system that is visually integrated with the input field. When an error is set via the setError method, the component highlights the field (the line or outline color changes to red) and displays the error text below the field. This eliminates the need for a separate TextView for error messages.

Managing error display is done through the setError(CharSequence) and setErrorEnabled(boolean) methods. When setError is called with text, the error displays immediately; when setError(null) is called, it is hidden. TextInputLayout also supports a custom error icon via the app:errorIconDrawable attribute and error color management via app:errorTextColor.

According to Material Design Guidelines (2025), error messages should be specific and helpful: instead of “Invalid input” write “Email must contain @.” Error display should occur after input is complete (on focus loss or after form submission), not in real time — this reduces user stress when filling out forms.

// Programmatic error setup
textInputLayout.error = "Password min 8 chars"

// Error hiding
textInputLayout.error = null

// Validation error check and set
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Icons and Actions in TextInputLayout

TextInputLayout supports displaying icons both at the start of the field (start icon) and at the end (end icon). Icons can perform various functions: toggling password visibility, clearing the field, custom actions. Each icon type is controlled by a separate attribute and can be replaced with a custom one via the app:startIconDrawable or app:endIconDrawable attribute.

End icon mode is set via the app:endIconMode attribute, which can take the following values: password_toggle — toggling password visibility, clear_text — clearing the field, dropdown_menu — arrow for a dropdown list, custom — custom icon. For password_toggle, TextInputLayout automatically manages the inputType switching between textPassword and textVisiblePassword, and also animates the eye icon.

• password_toggle — eye icon for showing/hiding password, built-in animation.
• clear_text — cross icon for clearing the field, appears when text is present.
• dropdown_menu — arrow for Exposed Dropdown Menu (Material Design 3).
• custom — any custom icon with a handler 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 Styles: FilledBox and OutlinedBox

Material Components for Android provides two main styles for TextInputLayout: FilledBox (filled) and OutlinedBox (outlined). The FilledBox style has a filled background and a line below the field that changes color on focus. The OutlinedBox style has a transparent background and an outline around the entire field, creating clearer boundaries and better suiting forms with many fields.

The choice of style depends on the app design: FilledBox is recommended for frequently used forms as it draws less attention to individual fields. OutlinedBox is preferred for short forms (login, registration) where each field should be clearly marked. The style is set via the style attribute in XML or through the app theme.

Material Design 3 (M3) introduced updated styles for TextInputLayout with improved typography, new color tokens, and support for Material You dynamic colors. In M3, OutlinedBox became the recommended default style, and FilledBox adapted its padding and border radius to match the new specification.

Code Examples with TextInputLayout

A complete example of implementing a registration form with TextInputLayout, including email and password validation, error display, and a show password icon. When the registration button is pressed, all fields are checked and corresponding error messages are displayed.

Registration Form XML Layout

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

Form Validation 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
}