Android
TextInputLayout

Introduction

Remarques

compile 'com.android.support:design:25.3.1'

Utilisation de base

C'est l'utilisation de base de TextInputLayout .
Veillez à ajouter la dépendance dans le fichier build.gradle comme décrit dans la section remarques.

Exemple:

 <android.support.design.widget.TextInputLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

     <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/username"/>
 
 </android.support.design.widget.TextInputLayout>

Gestion des erreurs

Vous pouvez utiliser TextInputLayout pour afficher les messages d'erreur conformément aux directives de conception de matériaux à l'aide des méthodes setError et setErrorEnabled .

Pour afficher l'erreur sous l'EditText, utilisez:

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setErrorEnabled(true);
til.setError("You need to enter a name");

Pour activer l'erreur dans TextInputLayout vous pouvez utiliser app:errorEnabled="true" dans xml ou til.setErrorEnabled(true); Comme montré ci-dessus.

Vous obtiendrez:

Ajouter un compte de caractères

Le TextInputLayout a un compteur de caractères pour un EditText défini dans celui-ci.
Le compteur sera rendu en dessous du EditText.

Utilisez simplement les setCounterEnabled() et setCounterMaxLength :

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setCounterEnabled(true);
til.setCounterMaxLength(15);

ou les app:counterEnabled et app:counterMaxLength dans le app:counterMaxLength XML.

<android.support.design.widget.TextInputLayout
    app:counterEnabled="true"
    app:counterMaxLength="15">

    <EditText/>

</android.support.design.widget.TextInputLayout>

La visibilité du mot de passe bascule

Avec un type de mot de passe en entrée, vous pouvez également activer une icône pouvant afficher ou masquer l'intégralité du texte à l'aide de l'attribut passwordToggleEnabled .

Vous pouvez également personnaliser la même valeur par défaut en utilisant ces attributs:

• passwordToggleDrawable : pour changer l'icône d'oeil par défaut
• passwordToggleTint : pour appliquer une teinte à l'index de visibilité du mot de passe.
• passwordToggleTintMode : pour spécifier le mode de fusion utilisé pour appliquer la teinte de fond.

Exemple:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleContentDescription="@string/description"
        app:passwordToggleDrawable="@drawable/another_toggle_drawable"
        app:passwordToggleEnabled="true">

            <EditText/>

</android.support.design.widget.TextInputLayout>

TextInputEditText

Le TextInputEditText est un EditText avec un correctif supplémentaire pour afficher un indice dans l'IME en mode 'extract' .

Le mode d'extraction est le mode sur lequel l'éditeur de clavier bascule lorsque vous cliquez sur un EditText lorsque l'espace est trop petit (par exemple, paysage sur un smartphone).
Dans ce cas, en utilisant un EditText pendant que vous éditez le texte, vous pouvez voir que l’IME ne vous donne pas une idée de ce que vous modifiez.

TextInputEditText résout ce problème en fournissant un indice lorsque l'IME de l'appareil de l'utilisateur est en mode Extract.

Exemple:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Description"
    >
    <android.support.design.widget.TextInputEditText
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.design.widget.TextInputLayout>

Personnalisation de l'apparence de TextInputLayout

Vous pouvez personnaliser l'apparence de TextInputLayout et de son EditText incorporé en définissant des styles personnalisés dans votre styles.xml . Les styles définis peuvent être ajoutés en tant que styles ou thèmes à votre TextInputLayout .

Exemple pour personnaliser l'apparence de l'indice:

styles.xml :

<!--Floating label text style-->  
<style name="MyHintStyle" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/black</item>
</style>

<!--Input field style-->  
<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>  

Pour appliquer le style, mettez à jour votre TextInputLayout et EditText comme suit

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>  

Exemple pour personnaliser la couleur d'accent de TextInputLayout . La couleur d'accentuation affecte la couleur de la ligne de base du texte EditText et la couleur du texte du conseil flottant:

styles.xml :

<style name="TextInputLayoutWithPrimaryColor" parent="Widget.Design.TextInputLayout">
    <item name="colorAccent">@color/primary</item>
</style> 

fichier de mise en page:

<android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextInputLayoutWithPrimaryColor">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/textInputEditText_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/login_hint_password"
                android:inputType="textPassword" />

</android.support.design.widget.TextInputLayout>