Android Design Support Library (VI): TextInputLayout

Consigue gratis tu cuenta

Crea una API REST con Node.js y MongoDB

En este curso vas a aprender a crear una API REST con Node.js y MongoDB, además de crear un entorno de desarrollo con Docker y Docker Compose.

Comenzar ahora
materialdesign Otra entrega de la serie de tutoriales donde aprenderemos a utilizar la nueva librería de diseño Android Design Support Library. En esta semana veremos como implementar TextInputLayout.

TEXT INPUT LAYOUT

Con la llegada de Material Design se formó mucho hype sobre ciertos elementos, los cuales al no tener un soporte oficial fuera de las simples guías de diseño, originaron librerías de terceros. Uno de los que más tuvo culpa de eso es sin duda los títulos/placeholders con animaciones en los EditText, también conocido como Floating labels. Finalmente se han dignado a facilitarnos un estándar en la librería de diseño con TextInputLayout. 

SHOW ME THE CODE

Este es otro de los widgets más sencillos de implementar, simplemente tendremos que añadir la etiqueta en nuestro layout e insertar dentro un EditText, es lógico si tenemos en cuenta que este widget nada más que extiende la funcionalidad del EditText corriente. Quedaría una cosa así:
<android.support.design.widget.TextInputLayout
    android:id="@+id/edit_text_wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp">
 
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"/>
 
</android.support.design.widget.TextInputLayout>
Y así de sencillo y así de rápido tendremos nuestro widget implementado. Recordad que tenéis todo el código en el repositorio de GitHub.

¿Quieres seguir aprendiendo?