En esta entrada vamos a profundizar sobre los RecyclerView paso a paso en Android, explicaremos qué son, cómo funcionan, realizaremos una implementación simple y una implementación compleja.
¿ Qué es un RecyclerView ?
Un RecyclerView es un un elemento gráfico de Android que permite mostrar una lista de elementos mediante una disposición gráfica establecida mediante un «layout». Los RecyclerView son una versión optimizada de las antiguas listas que estaban disponibles en las primeras versiones de Android. Su punto fuerte en contraposición con las listas es rendimiento y fluidez, ya que solo se pintan los elementos que el usuario está viendo en un momento determinado en la pantalla. En las antiguas listas se pintaban todos los elementos aunque el usuario no los estuviera visualizando y esto sobrecargaba demasiado la potencia de computo necesaria de las aplicaciones.
Para que os hagáis una idea un RecyclerView es lo siguiente:
¿ De qué se compone un RecyclerView ?
Un RecyclerView se compone de los siguientes elementos:
- El componente gráfico, se trata del propio RecyclerView.
- Un Adaptador con la lógica necesaria para pintar los elementos en la pantalla.
- Un fichero XML con la disposición gráfica de los elementos que se pintaran en cada elemento.
Veamos un ejemplo simple y entendamos el código.
Un RecyclerView sencillo
Vamos a diseñar lo siguiente:
Vamos a ver el código de nuestro adaptador:
package com.example.recyclerview;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
public class SimpleCustomAdapter extends RecyclerView.Adapter<SimpleCustomAdapter.ViewHolder>{
//Interface para que MainActivity o cualquier otra actividad implemente el listener y poder capturar el evento
//fuera del adaptador
public interface ItemClickListener {
public void onClick(View view, int position);
}
//Aquí podemos pasar cualquier tipo de colección de objetos
private ArrayList<Producto> dataSet;
//Lo utilizamos para poder capturar los clics sobre los elementos fuera del adaptador
private ItemClickListener clicListener;
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
//Aquí obtenemos la referencia a nuestros elementos visuales
private final TextView tvNombreProducto;
public ViewHolder(View view) {
super(view);
// Define click listener for the ViewHolder's View
view.setOnClickListener(this);
tvNombreProducto = (TextView) view.findViewById(R.id.tvNombreProducto);
}
//Getters
public TextView getTvNombreProducto() {
return tvNombreProducto;
}
//Esto propaga el evento hacía fuera, así podemos capturarlo en el punto que queramos de
//nuestra aplicación
@Override
public void onClick(View view) {
clicListener.onClick(view, getAdapterPosition());
}
}
//Constructor, aquí pasamos los items que pintaremos, es decir, el modelo de datos
public SimpleCustomAdapter(ArrayList<Producto> dataSet) {
this.dataSet = dataSet;
}
//Este metodo se utiliza desde la actividad que captura el evento de clic de los items
public void setOnClickListener(ItemClickListener clicListener){
this.clicListener = clicListener;
}
//Solo se llama la primera vez al crear la lista
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
//Creamos la vista de cada item a partir de nuestro layout
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.simple_custom_item, viewGroup, false);
return new ViewHolder(view);
}
//Se llama cada vez que se hace scroll en la pantalla y los elementos desaparecen y aparecen
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
//Seteamos los valores en cada campo de los que hemos obtenido en el constructor del ViewHolder
viewHolder.getTvNombreProducto().setText(dataSet.get(position).getNombre());
}
// Devolvemos el numero de items de nuestro arraylist, lo invoca automaticamente el layout manager
@Override
public int getItemCount() {
return dataSet.size();
}
}
Vayamos por partes, lo más importante es comprender que en un RecyclerView podemos almacenar cualquier clase Java, en nuestro ejemplo hemos decidido que nuestro RecyclerView muestre productos
//Aquí podemos pasar cualquier tipo de colección de objetos
private ArrayList<Producto> dataSet;
Nuestra clase Producto
package com.example.recyclerview;
public class Producto {
private int id;
private String nombre;
private String descripcion;
private String urlFoto;
private double precio;
public Producto(int id, String nombre, String descripcion, String urlFoto, double precio) {
this.id = id;
this.nombre = nombre;
this.descripcion = descripcion;
this.urlFoto = urlFoto;
this.precio = precio;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getDescripcion() {
return descripcion;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
public String getUrlFoto() {
return urlFoto;
}
public void setUrlFoto(String urlFoto) {
this.urlFoto = urlFoto;
}
public double getPrecio() {
return precio;
}
public void setPrecio(double precio) {
this.precio = precio;
}
}
Para pasar los elementos a nuestro Modelo se utiliza el constructor del adaptador:
//Constructor, aquí pasamos los items que pintaremos, es decir, el modelo de datos
public SimpleCustomAdapter(ArrayList<Producto> dataSet) {
this.dataSet = dataSet;
}
Nuestro adaptador tiene en su interior una clase llamada «ViewHolder» cuyo código es el siguiente:
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
//Aquí obtenemos la referencia a nuestros elementos visuales
private final TextView tvNombreProducto;
public ViewHolder(View view) {
super(view);
// Define click listener for the ViewHolder's View
view.setOnClickListener(this);
tvNombreProducto = (TextView) view.findViewById(R.id.tvNombreProducto);
}
//Getters
public TextView getTvNombreProducto() {
return tvNombreProducto;
}
//Esto propaga el evento hacía fuera, así podemos capturarlo en el punto que queramos de
//nuestra aplicación
@Override
public void onClick(View view) {
clicListener.onClick(view, getAdapterPosition());
}
}
En esta clase se obtiene la referencia a los elementos que hemos definido en nuestro layout en el constructor y se crean los «getters» para poder acceder a los mismos en un método que veremos posteriormente que es el encargado de actualizar el contenido que se visualiza en la lista. Las líneas 17 a la 22 las veremos posteriormente. Veamos el layout para comprender mejor esta sección y después seguiremos con el código fuente:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tvNombreProducto"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="TextView"
android:textSize="20sp" />
</LinearLayout>
Como podéis apreciar se trata de un simple «LinearLayout» con un «TextView».
Siguiendo con el código del adaptador, tenemos el constructor del mismo:
//Constructor, aquí pasamos los items que pintaremos, es decir, el modelo de datos
public SimpleCustomAdapter(ArrayList<Producto> dataSet) {
this.dataSet = dataSet;
}
Aquí pasamos la lista de objetos con la que queremos que trabaje nuestro adaptador y por ende, nuestro RecyclerView.
El siguiente método es «OnCreateViewHolder»:
//Se llama cada vez que se hace scroll en la pantalla y los elementos desaparecen y aparecen
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
//Creamos la vista de cada item a partir de nuestro layout
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.simple_custom_item, viewGroup, false);
return new ViewHolder(view);
}
En este método se hace referencia al layout que hemos mostrado anteriormente, se utiliza un «LayoutInflater» para crear cada elemento de la lista.
Nuestro penúltimo método y uno de los más importantes es «OnBindViewHolder»:
//Se llama cada vez que se hace scroll en la pantalla y los elementos desaparecen y aparecen
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
//Seteamos los valores en cada campo de los que hemos obtenido en el constructor del ViewHolder
viewHolder.getTvNombreProducto().setText(dataSet.get(position).getNombre());
}
En este método se establecen los valores en los elementos gráficos de Android que hemos definido en nuestro Layout, es importante fijarse que recibe un entero con la posición que corresponde con la posición que Android está pintando en un momento determinado dependiendo de la posición del scroll de la lista donde estemos.
Finalmente tenemos el método «getItemCount», este método lo llama el propio layout manager para saber cuantos elementos tiene la lista:
// Devolvemos el numero de items de nuestro arraylist, lo invoca automaticamente el layout manager
@Override
public int getItemCount() {
return dataSet.size();
}
Antes de explicar como utilizar e instanciar nuestro RecyclerView vamos a ver como se capturan las pulsaciones sobre los elementos de la lista fuera del adaptador. Principalmente hay 2 formas de capturar los eventos de pulsación:
- Dentro del Adaptador. Muy poco útil debido a que normalmente como resultado de una pulsación sobre un elemento queremos interaccionar con otras pantallas o elementos. El adaptador no tiene referencia a estos elementos, por eso no es la forma óptima de hacerlo.
- Fuera del adaptador, esta es la forma óptima para capturar las pulsaciones, pero es un poco liosa si no se entiende bien. Es la que vamos a utilizar en esta entrada.
Primero es necesario crear una «interface»:
//Interface para que MainActivity o cualquier otra actividad implemente el listener y poder capturar el evento
//fuera del adaptador
public interface ItemClickListener {
public void onClick(View view, int position);
}
Esta «interface» será la que luego implementará el receptor de nuestros eventos, pero eso lo veremos posteriormente, veamos ahora como se captura el evento de «click» y se propaga hacia fuera:
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
//Aquí obtenemos la referencia a nuestros elementos visuales
private final TextView tvNombreProducto;
public ViewHolder(View view) {
super(view);
// Define click listener for the ViewHolder's View
view.setOnClickListener(this);
tvNombreProducto = (TextView) view.findViewById(R.id.tvNombreProducto);
}
//Getters
public TextView getTvNombreProducto() {
return tvNombreProducto;
}
//Esto propaga el evento hacía fuera, así podemos capturarlo en el punto que queramos de
//nuestra aplicación
@Override
public void onClick(View view) {
clicListener.onClick(view, getAdapterPosition());
}
}
Aquí la clave es implementar en la clase ViewHolder, de la que hemos hablado anteriormente, la «interface» «View.OnClickListener» e implementar el método «onClick». Este método propaga el evento a través de un «listener» que se le pasa al adaptador desde el receptor del evento.
El método mediante el cuál se pasa el «listener» es:
//Este metodo se utiliza desde la actividad que captura el evento de clic de los items
public void setOnClickListener(ItemClickListener clicListener){
this.clicListener = clicListener;
}
que establece una referencia que hemos creado como atributo de clase de nuestro adaptador:
//Lo utilizamos para poder capturar los clics sobre los elementos fuera del adaptador
private ItemClickListener clicListener;
Por último solo es necesario crear nuestros objetos «Producto» en nuestra actividad donde hayamos implementado nuestro RecyclerView, obtener la referencia del mismo, crear el adaptador pasándole los objetos, establecer el adaptador en el RecyclerView e implementar la «interface» para capturar los eventos:
package com.example.recyclerview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements SimpleCustomAdapter.ItemClickListener{
private RecyclerView rcView;
ArrayList<Producto> productos = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Obtenemos la referencia al RecyclerView
rcView = findViewById(R.id.rcView);
//Creamos los productos
productos.add(new Producto(1, "Manzanas", "Manzanas Fuji! Las mejores del mundo!!!", "manzana", 3.15));
productos.add(new Producto(2, "Platanos", "Platanos de Canarias, que tenemos que apoyar a La Palma!!!", "platano", 4.45));
productos.add(new Producto(3, "Peras", "Ricas y Jugosas peras para los amantes de las frutas de la mejor calidad", "pera", 3.12));
productos.add(new Producto(4, "Cerezas", "Cerezas con gran calidad y a un precio asequible!!!", "cerezas", 5.6));
productos.add(new Producto(5, "Naranjas", "Verdaderas naranjas de Valencia. Están especialmente ricas", "naranja", 1.2));
productos.add(new Producto(6, "Mandarinas", "Mandarinas Valencias, dulces como el chocolate!!!", "mandarina", 1.18));
productos.add(new Producto(7, "Pomelos", "Pomelos de la Huerta Murciana. Pruebalos!!!", "pomelo", 5.3));
productos.add(new Producto(8, "Ciruelas", "Si te gustan las ciruelas estas son las tuyas, están riquísimas!!!", "ciruela", 3.2));
productos.add(new Producto(9, "Uva", "La uva se come en fin de año, pero también puedes comerla durante todo el año con la mejor calidad!!!", "uva", 2.3));
productos.add(new Producto(10, "Melon", "Melones jugosos y refrescantes con la calidad garantizada!!!", "melon", 1.03));
//Creamos el adaptador
SimpleCustomAdapter myAdapter = new SimpleCustomAdapter(productos);
//Establecemos el adaptador
rcView.setAdapter(myAdapter);
rcView.setLayoutManager(new LinearLayoutManager(this));
//Establecemos el capturador de eventos de pulsaciones de elementos, en este caso somos nosotros mismos. Es el método onClick
myAdapter.setOnClickListener(this);
}
@Override
public void onClick(View view, int position) {
Toast.makeText(this, "Se ha pulsado: " + productos.get(position).getNombre(), Toast.LENGTH_SHORT).show();
}
}
Ahora al pulsar un elemento en nuestro RecyclerView se mostrará un mensaje emergente:
Vamos a complicar ahora algo más nuestro RecyclerView para crear un modelado más atractivo.
Un RecyclerView más complejo y bonito
El código de nuestro adaptador será el siguiente:
package com.example.recyclerview;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
public class ComplexCustomAdapter extends RecyclerView.Adapter<ComplexCustomAdapter.ViewHolder>{
//Interface para que MainActivity o cualquier otra actividad implemente el listener y poder capturar el evento
//fuera del adaptador
public interface ItemClickListener {
public void onClick(View view, int position);
}
//Aquí podemos pasar cualquier tipo de colección de objetos
private ArrayList<Producto> dataSet;
//Lo utilizamos para poder capturar los clics sobre los elementos fuera del adaptador
private ItemClickListener clicListener;
//Referencia al contexto para poder obtener las imagenes que vamos a pintar
private Context context;
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
//Aquí obtenemos la referencia a nuestros elementos visuales
private final TextView tvNombreProducto;
private final TextView tvDescripcion;
private final TextView tvPrecio;
private ImageView ivProducto;
public ViewHolder(View view) {
super(view);
view.setOnClickListener(this);
//Obtenemos las referencias a nuestros componentes visuales
tvNombreProducto = (TextView) view.findViewById(R.id.tvNombreProducto);
tvDescripcion = (TextView) view.findViewById(R.id.tvDescripcion);
tvPrecio = (TextView) view.findViewById(R.id.tvPrecio);
ivProducto = (ImageView) view.findViewById(R.id.imageView);
}
//getters
public TextView getTvNombreProducto() {
return tvNombreProducto;
}
public TextView getTvDescripcion() {
return tvDescripcion;
}
public TextView getTvPrecio() {
return tvPrecio;
}
public ImageView getIvProducto() {
return ivProducto;
}
//Esto propaga el evento hacía fuera, así podemos capturarlo en el punto que queramos de
//nuestra aplicación
@Override
public void onClick(View view) {
clicListener.onClick(view, getAdapterPosition());
}
}
//Constructor donde pasamos la lista de productos y el contexto
public ComplexCustomAdapter(ArrayList<Producto> dataSet, Context ctx) {
this.dataSet = dataSet;
this.context = ctx;
}
//Este metodo se utiliza desde la actividad que captura el evento de clic de los items
public void setOnClickListener(ItemClickListener clicListener){
this.clicListener = clicListener;
}
//Se llama cada vez que se hace scroll en la pantalla y los elementos desaparecen y aparecen
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
//Creamos la vista de cada item a partir de nuestro layout
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.complex_custom_item, viewGroup, false);
return new ViewHolder(view);
}
//Se llama cada vez que se hace scroll en la pantalla y los elementos desaparecen y aparecen
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
//Seteamos los valores en cada campo de los que hemos obtenido en el constructor del ViewHolder
viewHolder.getTvNombreProducto().setText(dataSet.get(position).getNombre());
viewHolder.getTvDescripcion().setText(dataSet.get(position).getDescripcion());
viewHolder.getTvPrecio().setText(String.valueOf(dataSet.get(position).getPrecio()) + " €/KG");
//De esra forma establacemos las imagenes de la lista
String uri = "@drawable/" + dataSet.get(position).getUrlFoto(); // where myresource (without the extension) is the file
int imageResource = context.getResources().getIdentifier(uri, null, context.getPackageName());
Drawable res = context.getResources().getDrawable(imageResource);
viewHolder.getIvProducto().setImageDrawable(res);
}
// Devolvemos el numero de items de nuestro arraylist, lo invoca automaticamente el layout manager
@Override
public int getItemCount() {
return dataSet.size();
}
}
Nuestro Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/imageView"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="0.7"
tools:srcCompat="@tools:sample/avatars" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:orientation="vertical">
<TextView
android:id="@+id/tvNombreProducto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:textSize="20sp" />
<TextView
android:id="@+id/tvDescripcion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="@+id/tvPrecio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:text="TextView"
android:textColor="@color/purple_500" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Aquí hemos utilizado «CardViews» para crear tarjetas con relieve.
La forma de utilizar nuestro RecyclerView
package com.example.recyclerview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements ComplexCustomAdapter.ItemClickListener{
private RecyclerView rcView;
ArrayList<Producto> productos = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Obtenemos la referencia al RecyclerView
rcView = findViewById(R.id.rcView);
//Creamos los productos
productos.add(new Producto(1, "Manzanas", "Manzanas Fuji! Las mejores del mundo!!!", "manzana", 3.15));
productos.add(new Producto(2, "Platanos", "Platanos de Canarias, que tenemos que apoyar a La Palma!!!", "platano", 4.45));
productos.add(new Producto(3, "Peras", "Ricas y Jugosas peras para los amantes de las frutas de la mejor calidad", "pera", 3.12));
productos.add(new Producto(4, "Cerezas", "Cerezas con gran calidad y a un precio asequible!!!", "cerezas", 5.6));
productos.add(new Producto(5, "Naranjas", "Verdaderas naranjas de Valencia. Están especialmente ricas", "naranja", 1.2));
productos.add(new Producto(6, "Mandarinas", "Mandarinas Valencias, dulces como el chocolate!!!", "mandarina", 1.18));
productos.add(new Producto(7, "Pomelos", "Pomelos de la Huerta Murciana. Pruebalos!!!", "pomelo", 5.3));
productos.add(new Producto(8, "Ciruelas", "Si te gustan las ciruelas estas son las tuyas, están riquísimas!!!", "ciruela", 3.2));
productos.add(new Producto(9, "Uva", "La uva se come en fin de año, pero también puedes comerla durante todo el año con la mejor calidad!!!", "uva", 2.3));
productos.add(new Producto(10, "Melon", "Melones jugosos y refrescantes con la calidad garantizada!!!", "melon", 1.03));
//Creamos el adaptador
ComplexCustomAdapter myAdapter = new ComplexCustomAdapter(productos, this);
//Establecemos el adaptador
rcView.setAdapter(myAdapter);
rcView.setLayoutManager(new LinearLayoutManager(this));
//Establecemos el capturador de eventos de pulsaciones de elementos, en este caso somos nosotros mismos. Es el método onClick
myAdapter.setOnClickListener(this);
}
@Override
public void onClick(View view, int position) {
Toast.makeText(this, "Se ha pulsado: " + productos.get(position).getNombre(), Toast.LENGTH_SHORT).show();
}
}
Y ya está, lo tenemos, tenemos nuestro RecyclerView con el siguiente aspecto:
Y esto ha sido todo, seguiremos profundizando sobre este elemento con animaciones y algunas cosas más, pero lo principal es lo que hemos visto en esta entrada.
Un saludo programadores, os dejo el código por aquí del adaptador de este último elemento y del layout.
Recordar dejar un comentario a modo de apoyo en el blog y también podéis utilizar los comentarios para debatir el funcionamiento de los recycler.