Deslizar para eliminar y deshacer en Android RecyclerView

Hemos visto muchas aplicaciones que tienen un RecyclerView presente y, junto con eso, hemos visto muchas funcionalidades en ese RecyclerView para deslizar para eliminar y muchas más. Hemos visto este tipo de función en las aplicaciones de Gmail, donde podemos deslizar un elemento hacia la derecha o hacia la izquierda para eliminarlo o agregarlo al archivo. En este artículo, veremos la implementación de Swipe to Delete RecyclerView items en Android con la función Deshacer. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un RecyclerView simple que muestra una lista de cursos junto con su descripción y agregaremos la funcionalidad de deslizar para eliminar y deshacer. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Para implementar Recycler View, se necesitan tres subpartes que son útiles para controlar RecyclerView. Estas tres subpartes incluyen:  

• Diseño de la tarjeta : el diseño de la tarjeta es un archivo XML que representará cada elemento de cuadrícula individual dentro de su vista de Recycler.
• View Holder : View Holder Class es la clase de Java que almacena la referencia a los elementos de la interfaz de usuario en el diseño de la tarjeta y se pueden modificar dinámicamente durante la ejecución del programa mediante la lista de datos.
• Clase de datos : la clase de datos es una clase de objeto que contiene información que se mostrará en cada elemento de la vista del reciclador que se mostrará en la Vista del reciclador.

Paso 2: Cree un diseño de tarjeta para elementos de tarjeta RecyclerView

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y nombre el archivo como card_layout . En este archivo, se escribe todo el código XML relacionado con los elementos de la tarjeta en RecyclerView. A continuación se muestra el código para el archivo card_layout.xml .

<?xml version="1.0" encoding="utf-8"?><!--XML implementation of Card Layout-->
<androidx.cardview.widget.CardView
    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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:orientation="vertical">
 
        <!--text view for displaying our course name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:padding="5dp"
            android:text="Course Name"
            android:textColor="@color/black" />
 
        <!--text view for displaying
            our course description-->
        <TextView
            android:id="@+id/idTVCourseDesc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:padding="5dp"
            android:text="Course Description"
            android:textColor="@color/black" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 3: Cree una clase Java para datos modales

Vaya a la aplicación > java > Haga clic con el botón derecho en el nombre del paquete de su aplicación > Nuevo > Clase Java y nombre el archivo como RecyclerData . Esta clase manejará los datos de cada elemento de Recycler que se va a mostrar. A continuación se muestra el código para el archivo RecyclerData.java .

public class RecyclerData {
    // string for displaying
    // title and description.
    private String title;
    private String description;
 
    // constructor for our title and description.
    public RecyclerData(String title, String description) {
        this.title = title;
        this.description = description;
    }
 
    // creating getter and setter methods.
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public String getDescription() {
        return description;
    }
 
    public void setDescription(String description) {
        this.description = description;
    }  
}

Paso 4: cree una nueva clase Java para el adaptador

Del mismo modo, cree una nueva clase Java y nombre el archivo como RecyclerViewAdapter. El adaptador es la clase principal responsable de RecyclerView. Contiene todos los métodos que son útiles en RecyclerView.  

Nota : View Holder Class también se implementa en Adapter Class.  

Estos métodos para manejar Recycler View incluyen:  

• onCreateViewHolder : este método aumenta los elementos de diseño de la tarjeta para Recycler View.
• onBindViewHolder : este método establece los datos en vistas específicas de los elementos de la tarjeta. También maneja métodos relacionados con clics en elementos de la vista Recycler.
• getItemCount : este método devuelve la longitud de RecyclerView.

A continuación se muestra el código del archivo RecyclerViewAdapter.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
 
import java.util.ArrayList;
 
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder> {
 
    // creating a variable for our array list and context.
    private ArrayList<RecyclerData> courseDataArrayList;
    private Context mcontext;
 
    // creating a constructor class.
    public RecyclerViewAdapter(ArrayList<RecyclerData> recyclerDataArrayList, Context mcontext) {
        this.courseDataArrayList = recyclerDataArrayList;
        this.mcontext = mcontext;
    }
 
    @NonNull
    @Override
    public RecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate Layout
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_layout, parent, false);
        return new RecyclerViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull RecyclerViewHolder holder, int position) {
        // Set the data to textview from our modal class.
        RecyclerData recyclerData = courseDataArrayList.get(position);
        holder.courseNameTV.setText(recyclerData.getTitle());
        holder.courseDescTV.setText(recyclerData.getDescription());
    }
 
    @Override
    public int getItemCount() {
        // this method returns
          // the size of recyclerview
        return courseDataArrayList.size();
    }
 
    // View Holder Class to handle Recycler View.
    public class RecyclerViewHolder extends RecyclerView.ViewHolder {
       
        // creating a variable for our text view.
        private TextView courseNameTV;
        private TextView courseDescTV;
 
        public RecyclerViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our text views.
            courseNameTV = itemView.findViewById(R.id.idTVCourseName);
            courseDescTV = itemView.findViewById(R.id.idTVCourseDesc);
        }
    }
}

Paso 5: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--creating a recycler view for
        displaying our list of courses-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourse"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
     
</RelativeLayout>

Paso 6: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
 
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
 
import com.google.android.material.snackbar.Snackbar;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
     
    // creating a variable for recycler view,
    // array list and adapter class.
    private RecyclerView courseRV;
    private ArrayList<RecyclerData> recyclerDataArrayList;
    private RecyclerViewAdapter recyclerViewAdapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing our variables.
        courseRV = findViewById(R.id.idRVCourse);
         
        // creating new array list.
        recyclerDataArrayList = new ArrayList<>();
         
        // in below line we are adding data to our array list.
        recyclerDataArrayList.add(new RecyclerData("DSA Course", "DSA Self Paced Course"));
        recyclerDataArrayList.add(new RecyclerData("C++ Course", "C++ Self Paced Course"));
        recyclerDataArrayList.add(new RecyclerData("Java Course", "Java Self Paced Course"));
        recyclerDataArrayList.add(new RecyclerData("Python Course", "Python Self Paced Course"));
        recyclerDataArrayList.add(new RecyclerData("Fork CPP", "Fork CPP Self Paced Course"));
        recyclerDataArrayList.add(new RecyclerData("Amazon SDE", "Amazon SDE Test Questions"));
        
        // initializing our adapter class with our array list and context.
        recyclerViewAdapter = new RecyclerViewAdapter(recyclerDataArrayList, this);
        
        // below line is to set layout manager for our recycler view.
        LinearLayoutManager manager = new LinearLayoutManager(this);
         
        // setting layout manager for our recycler view.
        courseRV.setLayoutManager(manager);
         
        // below line is to set adapter
        // to our recycler view.
        courseRV.setAdapter(recyclerViewAdapter);
         
        // on below line we are creating a method to create item touch helper
        // method for adding swipe to delete functionality.
        // in this we are specifying drag direction and position to right
        new ItemTouchHelper(new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT) {
            @Override
            public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
                // this method is called
                // when the item is moved.
                return false;
            }
 
            @Override
            public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
                // this method is called when we swipe our item to right direction.
                // on below line we are getting the item at a particular position.
                RecyclerData deletedCourse = recyclerDataArrayList.get(viewHolder.getAdapterPosition());
                 
                // below line is to get the position
                // of the item at that position.
                int position = viewHolder.getAdapterPosition();
                 
                // this method is called when item is swiped.
                // below line is to remove item from our array list.
                recyclerDataArrayList.remove(viewHolder.getAdapterPosition());
                 
                // below line is to notify our item is removed from adapter.
                recyclerViewAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());
                 
                // below line is to display our snackbar with action.
                Snackbar.make(courseRV, deletedCourse.getTitle(), Snackbar.LENGTH_LONG).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // adding on click listener to our action of snack bar.
                        // below line is to add our item to array list with a position.
                        recyclerDataArrayList.add(position, deletedCourse);
                         
                        // below line is to notify item is
                        // added to our adapter class.
                        recyclerViewAdapter.notifyItemInserted(position);
                    }
                }).show();
            }
            // at last we are adding this
            // to our recycler view.
        }).attachToRecyclerView(courseRV);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: