Android
TextInputLayout

Introducción

Observaciones

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

Uso básico

Es el uso básico de TextInputLayout .
Asegúrese de agregar la dependencia en el archivo build.gradle como se describe en la sección de comentarios.

Ejemplo:

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

Errores de manejo

Puede usar TextInputLayout para mostrar mensajes de error de acuerdo con las pautas de diseño del material utilizando los métodos setError y setErrorEnabled .

Para mostrar el error debajo del uso EditText:

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

Para habilitar el error en TextInputLayout , puede utilizar la app:errorEnabled="true" en xml o til.setErrorEnabled(true); como se muestra arriba.

Obtendrás:

Agregando el conteo de personajes

TextInputLayout tiene un contador de caracteres para un EditText definido dentro de él.
El contador se renderizará debajo de EditText.

Solo use los setCounterEnabled() y setCounterMaxLength :

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

o los app:counterEnabled y app:counterMaxLength en el xml.

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

    <EditText/>

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

La visibilidad de la contraseña cambia

Con un tipo de contraseña de entrada, también puede habilitar un icono que puede mostrar u ocultar todo el texto usando el atributo passwordToggleEnabled .

También puede personalizar el mismo valor predeterminado utilizando estos atributos:

• passwordToggleDrawable : para cambiar el icono de ojo predeterminado
• passwordToggleTint : para aplicar un tinte a la visibilidad de la contraseña, se puede alternar dibujable.
• passwordToggleTintMode : para especificar el modo de fusión utilizado para aplicar el tinte de fondo.

Ejemplo:

<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 es un EditText con una solución adicional para mostrar una sugerencia en el IME cuando está en el modo 'extraer' .

El modo Extraer es el modo al que cambia el editor de teclado cuando hace clic en un texto de edición cuando el espacio es demasiado pequeño (por ejemplo, paisaje en un teléfono inteligente).
En este caso, el uso de un EditText mientras se está editando el texto se puede ver que el IME no le da una pista de lo que está editando

TextInputEditText soluciona este problema al proporcionar un texto de sugerencia mientras el IME del dispositivo del usuario está en modo Extraer.

Ejemplo:

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

Personalizando la apariencia de TextInputLayout

Puede personalizar la apariencia de TextInputLayout y su EditText incrustado definiendo estilos personalizados en su styles.xml . Los estilos definidos se pueden agregar como estilos o temas a su TextInputLayout .

Ejemplo para personalizar el aspecto de la pista:

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>  

Para aplicar el estilo, actualice su TextInputLayout y EditText de la siguiente manera

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

Ejemplo para personalizar el color de acento de TextInputLayout . El color de acento afecta el color de la línea de base del texto de EditText y el color del texto del texto de sugerencia flotante:

styles.xml :

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

archivo de diseño:

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