User input errors

Según la documentación de Google sobre Material Design.

Ayuda a los usuarios a solucionar errores de entrada tan pronto como son detectados. Deshabilitar el envío de un formulario si se detectan errores, y si se detectan después del envío del formulario, explicar claramente el error y cómo solucionarlo.

¿Cómo se añade?

I. En tu archivo build.gradle añade la última versión de las librerías appcompat y design.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. Haz que tu activity extienda de android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {  
    ...
}

III. Declara tu EditText dentro de cualquier archivo layout.xml e inclúyelo dentro de un TextInputLayout.

<android.support.design.widget.TextInputLayout  
    android:id="@+id/inputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/First_name" />

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

IV. Para mostrar/ocultar el error utiliza TextInputLayout#setError.

TextInputLayout inputLayout = (TextInputLayout) findViewById(R.id.inputLayout);  
inputLayout.setError("First name is required"); // show error  
inputLayout.setError(null); // hide error  

Declara el atributo app:errorEnabled="true" dentro del TextInputLayout para reservar el espacio necesario para la etiqueta situada bajo el EditText.

¿Cómo modificar el estilo?

Floating labels

I. Declara tu estilo personalizado dentro de tu archivo styles.xml.

<!--Error label text style-->  
<style name="MyErrorText" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/pink</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>  

II. Aplica este estilo a tu TextInputLayout mediante el atributo app:errorTextAppearance y al EditText con el atributo android:theme.

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorTextAppearance="@style/MyHintText"
    app:errorEnabled="true">

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

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

Problemas

I. TextInputLayout provee una etiqueta flotante y no hay manera de deshabilitarla.
Ocurre: en todas las versiones hasta v23.1.1

AOSP Issue Tracker link

II. La etiqueta TextInputLayout es coloreada en rojo cuando se llama al método setError.
Ocurre: sólo en la versión v23.1.1

AOSP Issue Tracker link

Escrito originalmente por Dmytro Danylyk en MaterialDoc