Android y RecyclerView – Tutorial

Android y RecyclerView - Eliminar item de adaptador

El widget de RecyclerView en Android sirve para crear una lista de elementos de cualquier tipo, definiendo un layout personalizado o propio para mostrarlos, y permitiéndonos una mayor personalización.

En este post mostraré un ejemplo de Android y RecyclerView con:

  • Animación al agregar y eliminar un elemento
  • AdapterView personalizado
  • Listener personalizado (para cuando hacen click en el elemento)
  • Layout personalizado que será mostrado en el RecyclerView

El código completo se encuentra en mi GitHub, y la aplicación de demostración en la página de releases.

La vista principal

En la vista principal tenemos un elemento de RecyclerView y los elementos para interactuar con el mismo, es decir, dos botones y 3 campos de texto.

Vista principal con RecyclerView y BotonesHe utilizado un ConstraintLayout, el código XML de esta vista es el siguiente. Presta atención al id de cada elemento.

Por el momento no veremos el código Java, lo veremos cuando tengamos el adaptador terminado.

Elemento que se mostrará en RecyclerView

Dentro de nuestro RecyclerView mostraremos una fila personalizada con datos personalizados. En este caso usaremos una mascota que tiene nombre y edad así que definimos el layout XML:

Fila que se muestra en RecyclerView

Así será la vista, y se cambiará según el adaptador y el elemento actual que el usuario esté viendo dentro del RecyclerView. El código de la vista de arriba es el siguiente:

Para inflar esta vista debemos declarar un ViewHolder que se encargará de obtener referencias a los elementos de la vista, es decir, a cada TextView. Cabe mencionar que aparte de un TextView podemos tener cualquier tipo de vista.

El código del ViewHolder es el siguiente:

Fíjate en que estamos extendiendo de RecyclerView.ViewHolder. Además de eso, he añadido dos métodos para obtener los TextView, esto lo hago para colocar los datos de la mascota dentro de cada fila como veremos más adelante.

Y finalmente, la clase Mascota a continuación:

Con eso ya tenemos definido cada elemento que irá dentro del RecyclerView, con el ViewHolder inflamos el layout XML.

El adaptador del RecyclerView

Ahora vamos a ver lo realmente bueno de Android y RecyclerView. Para poder usar un RecyclerView necesitamos un adaptador que se encargue de mostrar los datos y de administrarlos.

Este adaptador debe extender de RecyclerView.Adapter y debe ser de un tipo de ViewHolder, en este caso será de tipo de ViewHolder de ViewHolderMascota como vimos anteriormente. Debemos sobrescribir los siguientes métodos:

  • onCreateViewHolder: aquí inflamos la vista, todavía no renderizamos datos
  • onBindViewHolder: aquí tenemos la vista anteriormente inflada, además de la posición; con ella obtenemos el elemento de nuestra lista y colocamos el texto de los TextView según sea el caso.
  • getItemCount: debemos regresar el total de elementos que hay.

Normalmente tendremos un ArrayList o lista dentro de nuestro adaptador, y por cada elemento de la lista tendremos una layout y un ViewHolder que vimos anteriormente.

onCreateViewHolder

Primero inflamos la vista de fila_mascota, es decir, el archivo de layout que vimos antes. Después creamos un ViewHolder de la mascota, en donde definimos los elementos de la vista (los TextView).

En la línea 9 agregamos un listener para el click de ese elemento, todavía no veremos esa parte pero presta atención; simplemente estamos pasándole (al listener) la vista y la mascota que fue tocada.

Finalmente regresamos el ViewHolder después de haber colocado el listener.

onBindViewHolder

En esta función se nos pasa la posición que se va a dibujar; con ella obtenemos la mascota y establecemos los datos:

Con la variable position obtenemos la mascota, después obtenemos los TextView del holder y le ponemos el texto correspondiente.

getItemCount

Como ArrayList ya tiene un método que cuenta sus elementos, simplemente regresamos lo que regrese size:

Código completo del adaptador

Además de los métodos que se deben sobrescribir, he agregado otros métodos para trabajar con el ArrayList. Veamos el código a continuación:

Tenemos al método agregarMascota y eliminar, que simplemente trabaja con el ArrayList. Es muy importante que cada que hagamos esto, notifiquemos que hemos cambiado los datos para que el adaptador sepa y para que se muestren las animaciones.

Esto se logra invocando a notifyDataSetChanged, notifyItemRemoved y notifyItemInserted. Por cierto, tenemos un constructor que recibe una interfaz de un listener, esto es para comunicar el RecyclerView con la actividad. En unos momento veremos eso en profundidad.

El listener del item del RecyclerView en Android

Para saber cuando hacen click en un elemento del RecyclerView y obtener al mismao, debemos crear un listener. En este caso dentro del adaptador estamos invocando al listener:

La interfaz es muy simple:

Cuando se implemente, solo hay que sobrescribir al método onClick y recibiremos la mascota junto con la vista. La vista no es necesaria en estos casos pero siempre es bueno pasarla por si se hace algo con ella.

Código de la actividad para usar Android con RecyclerView

Ahora sí, dentro de la actividad principal creamos el adaptador, instanciamos el RecyclerView y agregamos datos. Primero veamos cómo instanciamos el adaptador que recibe la interfaz:

Estamos definiendo la interfaz al crear una instancia de AdaptadorRecyclerView, sobrescribimos el onClick y simplemente mostramos en un Toast a la mascota.

Ahora veamos cómo juntamos el RecyclerView con el Adaptador:

Primero debemos definir cómo se colocarán los elementos o filas personalizadas dentro del RecyclerView; aunque cada fila está definida con un ConstraintLayout, se deben organizar todas dentro de la lista. Así que indicamos que se organizarán con un LinearLayoutManager para que aparezcan en forma de lista.

Después agregamos una decoración para poner un separador o línea entre cada elemento.

Finalmente invocamos a setAdapter y pasamos el adaptador creado anteriormente.

Agregar elementos a RecyclerView de Android

 

Android y RecyclerView - Agregar elemento a lista

Para agregar elementos simplemente invocamos al método agregarMascota del adaptador, y le pasamos una nueva mascota:

Estamos haciendo una validación muy básica, si quieres una con más estilo mira este post.

Recuerda que dentro del adaptador también tenemos al método setMascotas, esto es por si ya tienes una lista obtenida, por ejemplo, de una base de datos.

Por cierto, aunque no se ve a simple vista, existe una animación al agregar el elemento.

Eliminar elemento de RecyclerView en Android

Android y RecyclerView - Eliminar item de adaptador

Para eliminar un elemento del RecyclerView invocamos a eliminar pasando el índice.

Ahora sí se puede apreciar más la animación al remover el elemento.

Obtener elemento en el click | Android y RecyclerView

Finalmente veamos en acción el Toast que aparece cuando se toca un elemento:

Obtener elemento seleccionado

Código completo de actividad

Finalmente así queda todo el código, ya que hace un momento omití la declaración de elementos y esas cosas:

Conclusión

Parece complejo, pero esto nos da un gran poder sobre cómo mostramos los datos, ya que tenemos posibilidades infinitas para cada elemento, es decir, tenemos un diseño personalizado por cada vista, y podemos agregar listeners de igual manera personalizados.

Recuerda que puedes descargar el APK aquí, y ver el código completo aquí.

Si quieres un ejemplo de RecyclerView con base de datos mira este post.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *