Floating labels

Floating labels

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

Cuando el usuario interactúa con el campo de entrada de texto, las etiquetas en línea se desplazan hasta la parte superior del campo de texto.

¿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:layout_width="match_parent"
    android:layout_height="wrap_content">

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

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

Los widgets TextInputLayout y EditText poseen el atributo android:hint, puedes utilizar cualquiera de ellos.

¿Cómo modificar el estilo?

Floating labels

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

<!--Floating label text style-->  
<style name="MyHintText" 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:hintTextAppearance y al EditText con el atributo android:theme.

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

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

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

Escrito originalmente por Dmytro Danylyk en MaterialDoc