In this guide, we will explore and apply the Swipe to Delete function on the RecyclerView in our Android App.<\/p>\n
The Swipe to delete function is frequently employed to remove rows from a RecyclerView. To incorporate this feature, we must make use of the ItemTouchHelper utility class.<\/p>\n
To utilize the ItemTouchHelper class, we must implement the ItemTouchHelper.Callback. The ItemTouchHelper.Callback class is primarily used for drag and drop as well as swipe to delete functionalities. For this tutorial, we will focus solely on swipe to delete. The Android framework provides us with a basic implementation of ItemTouchHelper.Callback called SimpleCallback. However, we will create our own implementation of the Swipe to delete feature. Below are the main methods that need to be overridden in our class:<\/p>\n
– getMovementFlags: Here, we specify the swipe direction by returning the direction flag using the static method makeMovementFlags.
\n– onMove: This method is used for drag and drop. If it is not required, we can simply return false.
\n– onSwiped: This method is triggered when a swipe action is detected. A complete swipe covers the entire width of the screen. To consider a partial swipe as a swipe, we need to override the following method: getSwipeThreshold.
\n– getSwipeThreshold: Here, we return a float value. For example, setting it to 0.5f means that a swipe greater than or equal to 50 percent of the RecyclerView row would be considered as a swipe.
\n– onChildDraw: In this method, we create our custom view that indicates a swipe is occurring.<\/p>\n
The purpose of ItemTouchHelper.Callback is to enable row swiping functionality, but it does not perform the deletion itself. Instead, we have to manually delete the rows using the RecyclerView Adapter.<\/p>\n
No more talking, let’s start coding. In the next section, we will develop our android app by incorporating a RecyclerView that has the Swipe to Dismiss functionality. Additionally, we will include a Snackbar that offers the undo choice.<\/p>\n
Include the subsequent dependency in the build.gradle file of the app.<\/p>\n
implementation 'com.android.support:design:28.0.0-rc01'\r\n<\/code><\/pre>\nPlease provide one option for paraphrasing the following sentence natively:<\/h3>\n
“Write the script in a programming language.”<\/p>\n
Below is the code for the layout of activity_main.xml:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.design.widget.CoordinatorLayout xmlns:android=\"https:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:app=\"https:\/\/schemas.android.com\/apk\/res-auto\"\r\n xmlns:tools=\"https:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:id=\"@+id\/coordinatorLayout\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".MainActivity\">\r\n\r\n <RelativeLayout\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\">\r\n\r\n <android.support.v7.widget.RecyclerView\r\n android:id=\"@+id\/recyclerView\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"vertical\"\r\n app:layoutManager=\"android.support.v7.widget.LinearLayoutManager\" \/>\r\n\r\n\r\n <\/RelativeLayout>\r\n\r\n<\/android.support.design.widget.CoordinatorLayout>\r\n<\/code><\/pre>\nHere is the code for the SwipeToDeleteCallback.java class, which is an extension of the ItemTouchHelper.Callback class:<\/p>\n
package com.scdev.androidrecyclerviewswipetodelete;\r\n\r\nimport android.content.Context;\r\nimport android.graphics.Canvas;\r\nimport android.graphics.Color;\r\nimport android.graphics.Paint;\r\nimport android.graphics.PorterDuff;\r\nimport android.graphics.PorterDuffXfermode;\r\nimport android.graphics.drawable.ColorDrawable;\r\nimport android.graphics.drawable.Drawable;\r\nimport android.support.annotation.NonNull;\r\nimport android.support.v4.content.ContextCompat;\r\nimport android.support.v7.widget.RecyclerView;\r\nimport android.support.v7.widget.helper.ItemTouchHelper;\r\nimport android.view.View;\r\n\r\nabstract public class SwipeToDeleteCallback extends ItemTouchHelper.Callback {\r\n\r\n Context mContext;\r\n private Paint mClearPaint;\r\n private ColorDrawable mBackground;\r\n private int backgroundColor;\r\n private Drawable deleteDrawable;\r\n private int intrinsicWidth;\r\n private int intrinsicHeight;\r\n\r\n\r\n SwipeToDeleteCallback(Context context) {\r\n mContext = context;\r\n mBackground = new ColorDrawable();\r\n backgroundColor = Color.parseColor(\"#b80f0a\");\r\n mClearPaint = new Paint();\r\n mClearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));\r\n deleteDrawable = ContextCompat.getDrawable(mContext, R.drawable.ic_delete);\r\n intrinsicWidth = deleteDrawable.getIntrinsicWidth();\r\n intrinsicHeight = deleteDrawable.getIntrinsicHeight();\r\n \r\n\r\n }\r\n\r\n\r\n @Override\r\n public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {\r\n return makeMovementFlags(0, ItemTouchHelper.LEFT);\r\n }\r\n\r\n @Override\r\n public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder viewHolder1) {\r\n return false;\r\n }\r\n\r\n @Override\r\n public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {\r\n super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);\r\n\r\n View itemView = viewHolder.itemView;\r\n int itemHeight = itemView.getHeight();\r\n\r\n boolean isCancelled = dX == 0 && !isCurrentlyActive;\r\n\r\n if (isCancelled) {\r\n clearCanvas(c, itemView.getRight() + dX, (float) itemView.getTop(), (float) itemView.getRight(), (float) itemView.getBottom());\r\n super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);\r\n return;\r\n }\r\n\r\n mBackground.setColor(backgroundColor);\r\n mBackground.setBounds(itemView.getRight() + (int) dX, itemView.getTop(), itemView.getRight(), itemView.getBottom());\r\n mBackground.draw(c);\r\n\r\n int deleteIconTop = itemView.getTop() + (itemHeight - intrinsicHeight) \/ 2;\r\n int deleteIconMargin = (itemHeight - intrinsicHeight) \/ 2;\r\n int deleteIconLeft = itemView.getRight() - deleteIconMargin - intrinsicWidth;\r\n int deleteIconRight = itemView.getRight() - deleteIconMargin;\r\n int deleteIconBottom = deleteIconTop + intrinsicHeight;\r\n\r\n\r\n deleteDrawable.setBounds(deleteIconLeft, deleteIconTop, deleteIconRight, deleteIconBottom);\r\n deleteDrawable.draw(c);\r\n\r\n super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);\r\n\r\n\r\n }\r\n\r\n private void clearCanvas(Canvas c, Float left, Float top, Float right, Float bottom) {\r\n c.drawRect(left, top, right, bottom, mClearPaint);\r\n\r\n }\r\n\r\n @Override\r\n public float getSwipeThreshold(@NonNull RecyclerView.ViewHolder viewHolder) {\r\n return 0.7f;\r\n }\r\n}\r\n\r\n<\/code><\/pre>\nThe class is considered abstract because we haven’t implemented the onSwipe method. We will do this in the MainActivity.java class. Within the onChildDraw method, we verify if the swipe has been completed by using the isCancelled boolean. Depending on this, we generate a view with a delete icon. The Swipe threshold has been set to 0.7. This implies that if the row is swiped less than 70%, the onSwipe method will not be activated. You can find the code for the MainActivity.java class below:<\/p>\n
package com.scdev.androidrecyclerviewswipetodelete;\r\n\r\nimport android.graphics.Color;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.NonNull;\r\nimport android.support.design.widget.CoordinatorLayout;\r\nimport android.support.design.widget.Snackbar;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.RecyclerView;\r\nimport android.support.v7.widget.helper.ItemTouchHelper;\r\nimport android.view.View;\r\n\r\nimport java.util.ArrayList;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n\r\n RecyclerView recyclerView;\r\n RecyclerViewAdapter mAdapter;\r\n ArrayList<String> stringArrayList = new ArrayList<>();\r\n CoordinatorLayout coordinatorLayout;\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n\r\n recyclerView = findViewById(R.id.recyclerView);\r\n coordinatorLayout = findViewById(R.id.coordinatorLayout);\r\n\r\n populateRecyclerView();\r\n enableSwipeToDeleteAndUndo();\r\n\r\n\r\n }\r\n\r\n private void populateRecyclerView() {\r\n stringArrayList.add(\"Item 1\");\r\n stringArrayList.add(\"Item 2\");\r\n stringArrayList.add(\"Item 3\");\r\n stringArrayList.add(\"Item 4\");\r\n stringArrayList.add(\"Item 5\");\r\n stringArrayList.add(\"Item 6\");\r\n stringArrayList.add(\"Item 7\");\r\n stringArrayList.add(\"Item 8\");\r\n stringArrayList.add(\"Item 9\");\r\n stringArrayList.add(\"Item 10\");\r\n\r\n mAdapter = new RecyclerViewAdapter(stringArrayList);\r\n recyclerView.setAdapter(mAdapter);\r\n\r\n\r\n }\r\n\r\n private void enableSwipeToDeleteAndUndo() {\r\n SwipeToDeleteCallback swipeToDeleteCallback = new SwipeToDeleteCallback(this) {\r\n @Override\r\n public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int i) {\r\n\r\n \r\n final int position = viewHolder.getAdapterPosition();\r\n final String item = mAdapter.getData().get(position);\r\n\r\n mAdapter.removeItem(position);\r\n\r\n\r\n Snackbar snackbar = Snackbar\r\n .make(coordinatorLayout, \"Item was removed from the list.\", Snackbar.LENGTH_LONG);\r\n snackbar.setAction(\"UNDO\", new View.OnClickListener() {\r\n @Override\r\n public void onClick(View view) {\r\n \r\n mAdapter.restoreItem(item, position);\r\n recyclerView.scrollToPosition(position);\r\n }\r\n });\r\n\r\n snackbar.setActionTextColor(Color.YELLOW);\r\n snackbar.show();\r\n\r\n }\r\n };\r\n\r\n ItemTouchHelper itemTouchhelper = new ItemTouchHelper(swipeToDeleteCallback);\r\n itemTouchhelper.attachToRecyclerView(recyclerView);\r\n }\r\n\r\n\r\n}\r\n\r\n<\/code><\/pre>\nTo place the ItemTouchHelper on the RecyclerView, we utilize the attachToRecyclerView method. When the Snackbar action is clicked, we restore the item in the RecyclerView by employing the restoreItem method. This method is declared in the RecyclerViewAdapter class. To scroll the RecyclerView to a particular position, we utilize the scrollToPosition function. This is primarily applicable when an item is added at the top of the RecyclerView. The following code represents the cardview_row.xml layout:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.v7.widget.CardView xmlns:android=\"https:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:card_view=\"https:\/\/schemas.android.com\/apk\/res-auto\"\r\n android:id=\"@+id\/cardView\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"64dp\"\r\n android:layout_margin=\"8dp\"\r\n card_view:cardCornerRadius=\"0dp\"\r\n card_view:cardElevation=\"2dp\">\r\n\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/relativeLayout\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:paddingBottom=\"8dp\"\r\n android:paddingLeft=\"8dp\"\r\n android:paddingRight=\"8dp\">\r\n\r\n\r\n <TextView\r\n android:id=\"@+id\/txtTitle\"\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_centerVertical=\"true\"\r\n android:text=\"Item 1\"\r\n android:textAppearance=\"@style\/TextAppearance.Compat.Notification.Title\" \/>\r\n <\/RelativeLayout>\r\n\r\n<\/android.support.v7.widget.CardView>\r\n<\/code><\/pre>\nBelow is the provided code for the RecyclerViewAdapter.java class.<\/p>\n
package com.scdev.androidrecyclerviewswipetodelete;\r\n\r\nimport android.support.v7.widget.RecyclerView;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.RelativeLayout;\r\nimport android.widget.TextView;\r\n\r\nimport java.util.ArrayList;\r\nimport java.util.List;\r\n\r\npublic class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {\r\n\r\n private ArrayList<String> data;\r\n\r\n public class MyViewHolder extends RecyclerView.ViewHolder {\r\n\r\n private TextView mTitle;\r\n RelativeLayout relativeLayout;\r\n\r\n public MyViewHolder(View itemView) {\r\n super(itemView);\r\n\r\n mTitle = itemView.findViewById(R.id.txtTitle);\r\n }\r\n }\r\n\r\n public RecyclerViewAdapter(ArrayList<String> data) {\r\n this.data = data;\r\n }\r\n\r\n @Override\r\n public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\r\n View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardview_row, parent, false);\r\n return new MyViewHolder(itemView);\r\n }\r\n\r\n @Override\r\n public void onBindViewHolder(MyViewHolder holder, int position) {\r\n holder.mTitle.setText(data.get(position));\r\n }\r\n\r\n @Override\r\n public int getItemCount() {\r\n return data.size();\r\n }\r\n\r\n\r\n public void removeItem(int position) {\r\n data.remove(position);\r\n notifyItemRemoved(position);\r\n }\r\n\r\n public void restoreItem(String item, int position) {\r\n data.add(position, item);\r\n notifyItemInserted(position);\r\n }\r\n\r\n public ArrayList<String> getData() {\r\n return data;\r\n }\r\n}\r\n\r\n\r\n<\/code><\/pre>\nHere is the result of the above application in use: We have now reached the conclusion of this tutorial. You can access the project by clicking on the following link:<\/p>\n
SwipeToDelete feature for Android RecyclerView.<\/p>\n
Link to the project on GitHub<\/p>\n
<\/p>\n
More Tutorials<\/p>\n
Java String substring() method(Opens in a new browser tab)<\/span><\/a><\/p>\nBroadcastReceiver Example Tutorial on Android(Opens in a new browser tab)<\/span><\/a><\/p>\nEasyMock void method to have its last call.(Opens in a new browser tab)<\/span><\/a><\/p>\nToggle button in Android(Opens in a new browser tab)<\/span><\/a><\/p>\n