TextInputLayout : ce que c'est, Material Design et configuration dans Android

Qu'est-ce que TextInputLayout dans Android

TextInputLayout est un ViewGroup du package com.google.android.material.textfield qui étend LinearLayout et contient un EditText à l'intérieur. Le composant fait partie de la bibliothèque Material Components pour Android, à partir de la version 1.0.0. L'objectif principal de TextInputLayout est de fournir une implémentation prête à l'emploi des champs de texte Material Design avec un minimum d'effort de la part du développeur.

Contrairement à un EditText standard, TextInputLayout gère l'animation de l'étiquette flottante, qui est définie via l'attribut android:hint de l'EditText interne. Lorsque le champ est vide, l'étiquette s'affiche à l'intérieur du champ comme une indication normale. Dès que l'utilisateur commence à saisir, l'étiquette se déplace de manière animée vers le haut du champ, en réduisant sa taille. Selon les Material Design Guidelines (2025), cette animation améliore la perception du formulaire car l'utilisateur voit toujours le nom du champ, même après avoir saisi des données.

Architecturalement, TextInputLayout implémente le modèle décorateur : il intercepte les événements d'EditText, gère l'affichage des éléments supplémentaires (étiquette, erreur, icônes, compteur) et coordonne leur animation. L'EditText interne est accessible via la méthode getEditText() et peut être configuré avec des attributs standard, notamment inputType, maxLines et 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>

Étiquette flottante et sa configuration

L'étiquette flottante (floating label) est la fonctionnalité clé de TextInputLayout. Lorsque le champ est vide, le texte de android:hint s'affiche dans l'EditText comme un espace réservé normal. Lorsque le champ reçoit le focus ou que du texte est saisi, l'étiquette s'élève vers le haut de TextInputLayout, réduisant la taille de la police et changeant de couleur. Ce comportement résout le problème de l'indication devenant invisible après que l'utilisateur a commencé à saisir.

La configuration de l'étiquette flottante se fait via les attributs de TextInputLayout : app:hintEnabled détermine si l'étiquette flottante est activée (par défaut true), app:hintAnimationEnabled active ou désactive l'animation de transition, app:expandedHintEnabled permet d'afficher l'étiquette même lorsque le champ est vide et sans focus. La couleur de l'étiquette dans différents états est gérée via les styles colorPrimary et colorControlHighlight.

Selon l'équipe Google Material Components (2025), l'étiquette flottante est particulièrement utile dans les formulaires comportant de nombreux champs, où l'utilisateur pourrait oublier le nom du champ après avoir commencé à saisir. Contrairement à un simple android:hint qui disparaît à la saisie, l'étiquette flottante reste visible en permanence, fournissant un contexte pour chaque champ.

Affichage des erreurs dans TextInputLayout

TextInputLayout fournit un système d'affichage d'erreurs intégré visuellement intégré au champ de saisie. Lors de la définition d'une erreur via la méthode setError, le composant met en surbrillance le champ (la couleur de la ligne ou du contour passe au rouge) et affiche le texte d'erreur sous le champ. Cela élimine le besoin d'un TextView séparé pour les messages d'erreur.

La gestion de l'affichage des erreurs se fait via les méthodes setError(CharSequence) et setErrorEnabled(boolean). Lors de l'appel de setError avec du texte, l'erreur s'affiche immédiatement ; lors de l'appel de setError(null), elle est masquée. TextInputLayout prend également en charge une icône d'erreur personnalisée via l'attribut app:errorIconDrawable et la gestion de la couleur d'erreur via app:errorTextColor.

Selon les Material Design Guidelines (2025), les messages d'erreur doivent être spécifiques et utiles : au lieu de « Saisie invalide », écrivez « L'email doit contenir @ ». L'affichage de l'erreur doit se produire après la fin de la saisie (à la perte du focus ou après la soumission du formulaire), pas en temps réel — cela réduit le stress de l'utilisateur lors du remplissage des formulaires.

// Configuration programmatique des erreurs
textInputLayout.error = "Password min 8 chars"

// Masquage des erreurs
textInputLayout.error = null

// Vérification et définition des erreurs de validation
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Icônes et actions dans TextInputLayout

TextInputLayout prend en charge l'affichage d'icônes à la fois au début du champ (icône de début) et à la fin (icône de fin). Les icônes peuvent remplir diverses fonctions : basculer la visibilité du mot de passe, effacer le champ, actions personnalisées. Chaque type d'icône est contrôlé par un attribut séparé et peut être remplacé par une icône personnalisée via l'attribut app:startIconDrawable ou app:endIconDrawable.

Le mode d'icône de fin est défini via l'attribut app:endIconMode, qui peut prendre les valeurs suivantes : password_toggle — basculement de la visibilité du mot de passe, clear_text — effacement du champ, dropdown_menu — flèche pour liste déroulante, custom — icône personnalisée. Pour password_toggle, TextInputLayout gère automatiquement le basculement de inputType entre textPassword et textVisiblePassword, et anime également l'icône de l'œil.

• password_toggle — icône d'œil pour afficher/masquer le mot de passe, animation intégrée.
• clear_text — icône de croix pour effacer le champ, apparaît en présence de texte.
• dropdown_menu — flèche pour Exposed Dropdown Menu (Material Design 3).
• custom — toute icône personnalisée avec un gestionnaire 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>

Styles TextInputLayout : FilledBox et OutlinedBox

Material Components pour Android propose deux styles principaux pour TextInputLayout : FilledBox (rempli) et OutlinedBox (avec contour). Le style FilledBox a un fond rempli de couleur et une ligne sous le champ qui change de couleur au focus. Le style OutlinedBox a un fond transparent et un contour autour de tout le champ, créant des limites plus claires et convenant mieux aux formulaires comportant de nombreux champs.

Le choix du style dépend de la conception de l'application : FilledBox est recommandé pour les formulaires fréquemment utilisés car il attire moins l'attention sur les champs individuels. OutlinedBox est préférable pour les formulaires courts (connexion, inscription) où chaque champ doit être clairement identifié. Le style est défini via l'attribut style dans le XML ou via le thème de l'application.

Material Design 3 (M3) a introduit des styles mis à jour pour TextInputLayout avec une typographie améliorée, de nouveaux jetons de couleur et la prise en charge des couleurs dynamiques Material You. Dans M3, OutlinedBox est devenu le style recommandé par défaut, et FilledBox a adapté ses marges intérieures et son rayon de bordure pour correspondre à la nouvelle spécification.

Exemples de code avec TextInputLayout

Un exemple complet d'implémentation d'un formulaire d'inscription avec TextInputLayout, comprenant la validation de l'email et du mot de passe, l'affichage des erreurs et une icône d'affichage du mot de passe. Lorsque le bouton d'inscription est enfoncé, tous les champs sont vérifiés et les messages d'erreur correspondants sont affichés.

Disposition XML du formulaire d'inscription

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

Validation du formulaire en 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
}