Android
TextInputLayout

introduzione

Osservazioni

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

Utilizzo di base

È l'utilizzo di base di TextInputLayout .
Assicurati di aggiungere la dipendenza nel file build.gradle come descritto nella sezione commenti.

Esempio:

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

Gestione degli errori

È possibile utilizzare TextInputLayout per visualizzare i messaggi di errore in base alle linee guida sulla progettazione dei materiali utilizzando i metodi setError e setErrorEnabled .

Per mostrare l'errore sotto l'uso di EditText:

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

Per abilitare l'errore in TextInputLayout puoi utilizzare app:errorEnabled="true" in xml o til.setErrorEnabled(true); come mostrato sopra.

Otterrai:

Aggiungere il conteggio dei caratteri

TextInputLayout ha un contatore di caratteri per un EditText definito al suo interno.
Il contatore verrà visualizzato sotto EditText.

Basta usare i setCounterEnabled() e setCounterMaxLength :

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

oppure l' app:counterEnabled e app:counterMaxLength attributi in xml.

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

    <EditText/>

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

Commuta password

Con un tipo di password di input, puoi anche abilitare un'icona che può mostrare o nascondere l'intero testo utilizzando l'attributo passwordToggleEnabled .

Puoi anche personalizzare lo stesso valore predefinito utilizzando questi attributi:

• passwordToggleDrawable : per cambiare l'icona occhio predefinita
• passwordToggleTint : per applicare una tinta alla visibilità della password, è possibile disegnare.
• passwordToggleTintMode : per specificare la modalità di fusione utilizzata per applicare la tinta di sfondo.

Esempio:

<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

TextInputEditText è un EditText con una correzione aggiuntiva per visualizzare un suggerimento nell'IME durante la modalità 'estrai' .

La modalità Estrai è la modalità a cui passa l'editor della tastiera quando si fa clic su un EditText quando lo spazio è troppo piccolo (ad esempio l'orizzontale su uno smartphone).
In questo caso, usando un EditText mentre stai modificando il testo puoi vedere che l'IME non ti dà un suggerimento su ciò che stai modificando

TextInputEditText corregge questo problema fornendo testo di suggerimento mentre l'IME del dispositivo dell'utente si trova in modalità Estrai.

Esempio:

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

Personalizzazione dell'aspetto di TextInputLayout

È possibile personalizzare l'aspetto di TextInputLayout e del relativo EditText incorporato definendo gli stili personalizzati nel proprio styles.xml . Gli stili definiti possono essere aggiunti come stili o temi al tuo TextInputLayout .

Esempio per personalizzare l'aspetto del suggerimento:

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>  

Per applicare lo stile, aggiornare TextInputLayout e EditText come segue

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

Esempio per personalizzare il colore dell'accento di TextInputLayout . Il colore dell'accento influisce sul colore della linea di base di EditText e sul colore del testo per il testo suggerimento mobile:

styles.xml :

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

file di layout:

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