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.

He utilizado un ConstraintLayout, el código XML de esta vista es el siguiente. Presta atención al id de cada elemento.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewMascotas"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.405"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnAgregar" />

    <Button
        android:id="@+id/btnAgregar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Agregar"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextEdad" />

    <Button
        android:id="@+id/btnEliminar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Quitar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toBottomOf="@+id/editTextIndice" />

    <EditText
        android:id="@+id/editTextNombre"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:ems="10"
        android:hint="Nombre"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <EditText
        android:id="@+id/editTextEdad"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:ems="10"
        android:hint="Edad"
        android:inputType="number"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextNombre" />

    <EditText
        android:id="@+id/editTextIndice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:ems="10"
        android:hint="Índice"
        android:inputType="number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="parzibyte.me/blog"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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:

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:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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:background="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/textViewNombre"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Nombre" />

    <TextView
        android:id="@+id/textViewEdad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewNombre"
        tools:text="Edad" />

</androidx.constraintlayout.widget.ConstraintLayout>

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:

package me.parzibyte.demostracionrecyclerview;

import android.view.View;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

class ViewHolderMascota extends RecyclerView.ViewHolder {
    private TextView textViewEdad, textViewNombre;

    ViewHolderMascota(@NonNull View itemView) {
        super(itemView);
        textViewEdad = itemView.findViewById(R.id.textViewEdad);
        textViewNombre = itemView.findViewById(R.id.textViewNombre);
    }

    TextView getTextViewEdad() {
        return textViewEdad;
    }

    TextView getTextViewNombre() {
        return textViewNombre;
    }

}

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:

package me.parzibyte.demostracionrecyclerview;


public class Mascota {
    private String nombre;
    private int edad;


    public Mascota(String nombre, int edad) {
        this.nombre = nombre;
        this.edad = edad;
    }

    public String getNombre() {
        return nombre;
    }

    public int getEdad() {
        return edad;
    }

    @Override
    public String toString() {
        return "Mascota{" +
                "nombre='" + nombre + '\'' +
                ", edad=" + edad +
                '}';
    }
}

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

@NonNull
@Override
public ViewHolderMascota onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    // Esta es la vista del layout que muestra los detalles de la mascota (fila_mascota.xml)
    View vista = LayoutInflater.from(parent.getContext()).inflate(R.layout.fila_mascota, parent, false);
    // Crear el viewholder a partir de esta vista. Mira la clase ViewHolderMascota si quieres
    final ViewHolderMascota viewHolder = new ViewHolderMascota(vista);
    // En el click de la vista (la mascota en general) invocamos a nuestra interfaz personalizada pasándole la vista y la mascota
    vista.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            interfazClickRecyclerView.onClick(v, mascotas.get(viewHolder.getAdapterPosition()));
        }
    });
    return viewHolder;
}

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:

@Override
public void onBindViewHolder(@NonNull ViewHolderMascota holder, int position) {
    // Dibujar la fila de la mascota con los datos de la mascota actualmente solicidata según la variable position
    Mascota mascota = this.mascotas.get(position);
    holder.getTextViewEdad().setText(String.valueOf(mascota.getEdad()));
    holder.getTextViewNombre().setText(mascota.getNombre());
}

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:

@Override
public int getItemCount() {
    return this.mascotas.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:

package me.parzibyte.demostracionrecyclerview;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class AdaptadorRecyclerView extends RecyclerView.Adapter<ViewHolderMascota> {
    private List<Mascota> mascotas;
    private InterfazClickRecyclerView interfazClickRecyclerView;

    public AdaptadorRecyclerView(List<Mascota> mascotas) {
        this.mascotas = mascotas;
    }

    public List<Mascota> getMascotas() {
        return mascotas;
    }

    public void setMascotas(List<Mascota> mascotas) {
        this.mascotas = mascotas;
        this.notifyDataSetChanged();
    }

    public AdaptadorRecyclerView(InterfazClickRecyclerView interfazClickRecyclerView) {
        this.interfazClickRecyclerView = interfazClickRecyclerView;
        this.mascotas = new ArrayList<>();
    }

    public void agregarMascota(Mascota mascota) {
        this.mascotas.add(mascota);
        this.notifyItemInserted(this.mascotas.size() - 1);
    }


    public void eliminar(int indice) {
        if (indice < 0 || indice >= this.getItemCount()) return;
        this.mascotas.remove(indice);
        this.notifyItemRemoved(indice);
    }

    @NonNull
    @Override
    public ViewHolderMascota onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Esta es la vista del layout que muestra los detalles de la mascota (fila_mascota.xml)
        View vista = LayoutInflater.from(parent.getContext()).inflate(R.layout.fila_mascota, parent, false);
        // Crear el viewholder a partir de esta vista. Mira la clase ViewHolderMascota si quieres
        final ViewHolderMascota viewHolder = new ViewHolderMascota(vista);
        // En el click de la vista (la mascota en general) invocamos a nuestra interfaz personalizada pasándole la vista y la mascota
        vista.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                interfazClickRecyclerView.onClick(v, mascotas.get(viewHolder.getAdapterPosition()));
            }
        });
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolderMascota holder, int position) {
        // Dibujar la fila de la mascota con los datos de la mascota actualmente solicidata según la variable position
        Mascota mascota = this.mascotas.get(position);
        holder.getTextViewEdad().setText(String.valueOf(mascota.getEdad()));
        holder.getTextViewNombre().setText(mascota.getNombre());
    }

    @Override
    public int getItemCount() {
        return this.mascotas.size();
    }
}

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 misma, debemos crear un listener. En este caso dentro del adaptador estamos invocando al listener:

// En el click de la vista (la mascota en general) invocamos a nuestra interfaz personalizada pasándole la vista y la mascota
vista.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        interfazClickRecyclerView.onClick(v, mascotas.get(viewHolder.getAdapterPosition()));
    }
});

La interfaz es muy simple:

package me.parzibyte.demostracionrecyclerview;

import android.view.View;

public interface InterfazClickRecyclerView {
    public void onClick(View v, Mascota m);
}

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:

final AdaptadorRecyclerView adaptadorRecyclerView = new AdaptadorRecyclerView(new InterfazClickRecyclerView() {
    @Override
    public void onClick(View v, Mascota m) {
        Toast.makeText(MainActivity.this, m.toString(), Toast.LENGTH_SHORT).show();
    }
});

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:

// Configuramos cómo se van a organizar las vistas dentro del RecyclerView; simplemente es un LinearLayout para que
// aparezcan una debajo de otra
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this);
recyclerViewMascotas.setLayoutManager(linearLayoutManager);
// La línea que divide los elementos
recyclerViewMascotas.addItemDecoration(new DividerItemDecoration(MainActivity.this, LinearLayoutManager.VERTICAL));
// El adaptador que se encarga de toda la lógica
recyclerViewMascotas.setAdapter(adaptadorRecyclerView);

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

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

btnAgregar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String nombre = editTextNombre.getText().toString();
        String edad = editTextEdad.getText().toString();
        if (nombre.isEmpty() || edad.isEmpty()) {
            Toast.makeText(MainActivity.this, "Rellena los campos", Toast.LENGTH_SHORT).show();
            return;
        }
        adaptadorRecyclerView.agregarMascota(new Mascota(nombre, Integer.valueOf(edad)));
    }
});

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

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

btnEliminar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String indice = editTextIndice.getText().toString();
        if (indice.isEmpty()) {
            Toast.makeText(MainActivity.this, "Escribe el índice", Toast.LENGTH_SHORT).show();
            return;
        }
        adaptadorRecyclerView.eliminar(Integer.valueOf(indice));
    }
});

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:

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:

package me.parzibyte.demostracionrecyclerview;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnAgregar = findViewById(R.id.btnAgregar);
        Button btnEliminar = findViewById(R.id.btnEliminar);
        RecyclerView recyclerViewMascotas = findViewById(R.id.recyclerViewMascotas);
        final EditText editTextNombre = findViewById(R.id.editTextNombre);
        final EditText editTextEdad = findViewById(R.id.editTextEdad);
        final EditText editTextIndice = findViewById(R.id.editTextIndice);

        final AdaptadorRecyclerView adaptadorRecyclerView = new AdaptadorRecyclerView(new InterfazClickRecyclerView() {
            @Override
            public void onClick(View v, Mascota m) {
                Toast.makeText(MainActivity.this, m.toString(), Toast.LENGTH_SHORT).show();
            }
        });
        // Configuramos cómo se van a organizar las vistas dentro del RecyclerView; simplemente es un LinearLayout para que
        // aparezcan una debajo de otra
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this);
        recyclerViewMascotas.setLayoutManager(linearLayoutManager);
        // La línea que divide los elementos
        recyclerViewMascotas.addItemDecoration(new DividerItemDecoration(MainActivity.this, LinearLayoutManager.VERTICAL));
        // El adaptador que se encarga de toda la lógica
        recyclerViewMascotas.setAdapter(adaptadorRecyclerView);
//        adaptadorRecyclerView.agregarMascota(new Mascota());

        btnAgregar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String nombre = editTextNombre.getText().toString();
                String edad = editTextEdad.getText().toString();
                if (nombre.isEmpty() || edad.isEmpty()) {
                    Toast.makeText(MainActivity.this, "Rellena los campos", Toast.LENGTH_SHORT).show();
                    return;
                }
                adaptadorRecyclerView.agregarMascota(new Mascota(nombre, Integer.valueOf(edad)));
            }
        });

        btnEliminar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String indice = editTextIndice.getText().toString();
                if (indice.isEmpty()) {
                    Toast.makeText(MainActivity.this, "Escribe el índice", Toast.LENGTH_SHORT).show();
                    return;
                }
                adaptadorRecyclerView.eliminar(Integer.valueOf(indice));
            }
        });
    }
}

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.