Saltear al contenido principal
Recycler View Issue

Creación de una App con Material Design: tarjetas y listas

Material Design
1. Material Design, nuevo diseño en Android 5
2. Creación de una App con Material Design: tarjetas y listas
3. Animaciones personalizadas con Material Design
4. Proyecto Android: transiciones y animaciones con Material Design
5. Videotutorial: proyecto Android 5.0 con Material Design

Vamos a describir dos de las mejoras introducidas con Android 5.0 Lollipop y el uso de Material Design: las listas de datos de un componente ListView (clase RecyclerView) y el uso de un sistema de tarjetas mediante la clase CardView, muy intuitivo. Ambas nos aportan mejoras a nivel de rendimiento y de visualización.

En primer lugar, es necesario aclarar que para el desarrollo de los siguientes componentes, deberán utilizarse las clases CardView y RecyclerView.

  • CardView: Clase que hereda de FrameLayout, mostrando información a modo de tarjetas, con un diseño basado en bordes redondeados y sombras, muy similar a Google Now. Este componente, para la versión de Android Lollipop, define la propiedad cardElevation, para la creación de una tarjeta con sombras, mediante la asignación de una elevación real. Para versiones anteriores de Android, se recomienda el uso del método setCardElevation(float) para establecer la compatibilidad con la elevación de CardView.

Propiedades para personalizar un componente CardView:

  • Definir el radio de los bordes a nivel de diseño con el siguiente atributo:
  • Invocar al siguiente método para establecer el radio de los bordes (nivel programático):
  • Para asignar un color al fondo de la tarjeta, se implementa el siguiente atributo en tiempo de diseño:

Ejemplo práctico:

En el siguiente ejemplo, se puede observar como incluir un widget CardView dentro de un layout en Android, además de que dependencia se deberá añadir al archivo gradle del módulo «app»:

  • RecyclerView: Clase que posibilita la construcción de una vista flexible, delimitando la ventana para un listado grande de datos. Representa una versión actualizada de los componentes de tipo selección ListView o GridView, permitiendo la visualización de una gran cantidad de datos, simplificando su manipulación, y añadiendo diferentes animaciones para la creación o eliminación de registros.

Recycler View Issue

Ejemplo práctico:

  • En primer lugar se define RecyclerView dentro del layout:
  • Posteriormente, se asigna el identificador del objeto RecyclerView, conectándolo con el LinearLayoutManager, y por último definiendo un adaptador encargado de mostrar los datos en el componente:
  • A continuación, se muestra un ejemplo de adaptador para mostrar la lista de datos asociada al componente RecyclerView:
  • Por último, recordar que será necesario añadir la siguiente dependencia, dentro del archivo gradle del módulo «app», para usar el widget RecyclerView:

Nota: este tutorial y ejemplos que se muestran están basados en la documentación oficial de Android para desarrolladores: https://developer.android.com/training/material/lists-cards.html , utilizándose de acuerdo a los términos descritos en la Creative Commons 2.5 Attribution License con que han sido publicados.

Volver arriba