Tutorial Swipe For Delete, Edit, Share Item on Android RecyclerView

Today i going to share you a tutorial using Ryclerview. This tutorial will show how to take an action by swapping the item on Recyclerview.

I using THIS LIBRARY for this tutorial. Take a look at the following steps.

PREPARATION

Compile this library to your build.gradle (Module :app) :

	compile "com.daimajia.swipelayout:library:1.2.0@aar"
	compile 'com.android.support:recyclerview-v7:23.1.1'

view raw build.gradle hosted with ❤ by GitHub

Prepare 2 layouts and give name like below :

activity_main.xml
swipe_layout.xml

Prepare 4 java class and give like below :

MainActivity.java
StudentModel.java
DividetItemDecoration.java
SwipeRecyclerViewAdapter.java

IMPLEMENTATION

1. Prepare all XML file that we'll use in this project

Create a divider layout in your Drawable folder, give name as divider.xml. Paste the code below :

	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">

	<solid android:color="#666666"/>
	<size android:width="1dp"
	android:height="1dp" />

	</shape>

view raw divider.xml hosted with ❤ by GitHub

Divider.xml used as the border line of recyclerview's item.

Modify your color.xml or you can use the default color when the project created

	<?xml version="1.0" encoding="utf-8"?>
	<resources>
	<color name="colorPrimary">@android:color/white</color>
	<color name="colorPrimaryDark">@android:color/holo_blue_dark</color>
	<color name="colorAccent">@android:color/holo_blue_light</color>
	</resources>

view raw color.xml hosted with ❤ by GitHub

Modify your style.xml, paste the code below :

	<resources>

	<!-- Base application theme. -->
	<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
	<!-- Customize your theme here. -->
	<item name="colorPrimary">@android:color/white</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@android:color/holo_green_light</item>
	</style>

	<style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
	</style>

	<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="colorPrimary">@android:color/white</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">#FF4081</item>

	<item name="android:windowBackground">@color/colorPrimary</item>
	</style>

	<style name="Widget.CardContent" parent="android:Widget">
	<item name="android:paddingLeft">16dp</item>
	<item name="android:paddingRight">16dp</item>
	<item name="android:paddingTop">24dp</item>
	<item name="android:paddingBottom">24dp</item>
	<item name="android:orientation">vertical</item>
	</style>


	<style name="ToolBarStyle" parent="">
	<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
	<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
	</style>

	</resources>

view raw style.xml hosted with ❤ by GitHub

Modify your activity_main.xml, paste the code below :

	<?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="match_parent"
	android:orientation="vertical">

	<android.support.v7.widget.Toolbar
	android:id="@+id/toolbar"
	style="@style/ToolBarStyle"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@android:color/holo_blue_light"
	android:elevation="8dp"
	android:minHeight="?attr/actionBarSize">

	</android.support.v7.widget.Toolbar>

	<android.support.v7.widget.RecyclerView
	android:id="@+id/my_recycler_view"
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_margin="5dp"
	android:layout_weight="1"
	android:scrollbars="vertical" />
	<TextView
	android:id="@+id/empty_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:text="No Records"
	android:visibility="gone" />


	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Modify your swipe_layout.xml, paste the code below :

	<?xml version="1.0" encoding="utf-8"?>
	<com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:id="@+id/swipe"
	app:leftEdgeSwipeOffset="0dp"
	app:rightEdgeSwipeOffset="0dp"
	android:layout_height="wrap_content">

	<!-- Button View For Right to Left -->
	<LinearLayout
	android:id="@+id/bottom_wraper"
	android:layout_width="240dp"
	android:weightSum="3"
	android:orientation="horizontal"
	android:layout_height="match_parent">

	<TextView
	android:id="@+id/tvEdit"
	android:layout_width="1dp"
	android:layout_height="match_parent"
	android:layout_weight="1"
	android:background="#0076a5"
	android:gravity="center"
	android:text="Edit"
	android:textColor="#fff"/>

	<TextView
	android:id="@+id/tvShare"
	android:layout_width="1dp"
	android:layout_height="match_parent"
	android:layout_weight="1"
	android:background="#003c54"
	android:gravity="center"
	android:text="Share"
	android:textColor="#fff" />

	<TextView
	android:id="@+id/tvDelete"
	android:layout_width="1dp"
	android:layout_height="match_parent"
	android:layout_weight="1"
	android:background="#0076a5"
	android:gravity="center"
	android:text="Delete"
	android:textColor="#fff"/>

	</LinearLayout>

	<!-- Another Button View For Left To Right -->
	<LinearLayout
	android:id="@+id/bottom_wrapper1"
	android:layout_width="80dp"
	android:layout_height="match_parent"
	android:weightSum="1">
	<ImageButton
	android:id="@+id/btnLocation"
	android:layout_width="1dp"
	android:layout_height="match_parent"
	android:layout_weight="1"
	android:background="@null"
	android:gravity="center"
	android:src="@drawable/ic_action_settings"/>
	</LinearLayout>

	<!-- Top View, Row ItemView of RecyclerView -->
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?android:selectableItemBackground"
	android:elevation="5dp"
	android:orientation="vertical"
	android:padding="10dp">
	<TextView
	android:id="@+id/tvName"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="5dp"
	android:text="Name"
	android:textColor="@android:color/black"
	android:textSize="10sp"/>

	<TextView
	android:id="@+id/evEmailId"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="5dp"
	android:text="Email ID"
	android:textColor="@android:color/black"
	android:textSize="12sp"/>
	</LinearLayout>

	</com.daimajia.swipe.SwipeLayout>

view raw swipe_layout.xml hosted with ❤ by GitHub

2. Prepare all the Java class

Modify your StudentModel.java like below :

	package com.example.putuguna.swipelayout.models;

	import java.io.Serializable;

	/**
	* Created by putuguna on 23/06/16.
	*/
	public class StudentModel implements Serializable {
	private static final long serialVersionUID = 1L;

	private String name;
	private String emailId;

	public StudentModel() {
	}

	public StudentModel(String name, String emailId) {
	this.name = name;
	this.emailId = emailId;
	}

	public String getName() {
	return name;
	}

	public void setName(String name) {
	this.name = name;
	}

	public String getEmailId() {
	return emailId;
	}

	public void setEmailId(String emailId) {
	this.emailId = emailId;
	}
	}

view raw StudentModel.java hosted with ❤ by GitHub

After that, Modify your DividerItemDecoration.java until look like the following code :

	package com.example.putuguna.swipelayout;

	import android.content.Context;
	import android.content.res.TypedArray;
	import android.graphics.Canvas;
	import android.graphics.Rect;
	import android.graphics.drawable.Drawable;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import android.util.AttributeSet;
	import android.view.View;
	import android.widget.LinearLayout;

	/**
	* Created by putuguna on 23/06/16.
	*/
	public class DividerItemDecoration extends RecyclerView.ItemDecoration {
	private Drawable mDivider;
	private boolean mShowFirstDivider = false;
	private boolean mShowLastDivider = false;

	private DividerItemDecoration(Context context, AttributeSet attrs){
	final TypedArray a = context
	.obtainStyledAttributes(attrs, new int[android.R.attr.listDivider]);
	mDivider = a.getDrawable(0);
	a.recycle();
	}

	public DividerItemDecoration(Context context, AttributeSet attrs, boolean showFirstDivider,
	boolean showLastDivider) {
	this(context, attrs);
	mShowFirstDivider = showFirstDivider;
	mShowLastDivider = showLastDivider;
	}

	public DividerItemDecoration(Drawable divider) {
	mDivider = divider;
	}

	public DividerItemDecoration(Drawable divider, boolean showFirstDivider,
	boolean showLastDivider) {
	this(divider);
	mShowFirstDivider = showFirstDivider;
	mShowLastDivider = showLastDivider;
	}

	@Override
	public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
	super.getItemOffsets(outRect, view, parent, state);

	if(mDivider == null){
	return;
	}
	if(parent.getChildPosition(view)<1){
	return;
	}

	if(getOrientation(parent)== LinearLayout.VERTICAL){
	outRect.top = mDivider.getIntrinsicHeight();
	}else{
	outRect.top = mDivider.getIntrinsicWidth();
	}
	}

	@Override
	public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
	if(mDivider==null){
	super.onDrawOver(c, parent, state);
	return;
	}

	//initialization needed to advoid compiler warning
	int left=0, right=0, top=0, bottom=0, size;
	int orientation = getOrientation(parent);
	int childCount = parent.getChildCount();

	if(orientation == LinearLayoutManager.VERTICAL){
	size = mDivider.getIntrinsicHeight();
	left = parent.getPaddingLeft();
	right = parent.getWidth() - parent.getPaddingRight();
	}else{
	size = mDivider.getIntrinsicWidth();
	top = parent.getPaddingTop();
	bottom = parent.getHeight() - parent.getPaddingBottom();
	}

	for (int i = mShowFirstDivider ? 0 : 1; i < childCount; i++) {
	View child = parent.getChildAt(i);
	RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

	if (orientation == LinearLayoutManager.VERTICAL) {
	top = child.getTop() - params.topMargin;
	bottom = top + size;
	} else { //horizontal
	left = child.getLeft() - params.leftMargin;
	right = left + size;
	}
	mDivider.setBounds(left, top, right, bottom);
	mDivider.draw(c);
	}

	// show last divider
	if (mShowLastDivider && childCount > 0) {
	View child = parent.getChildAt(childCount - 1);
	RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
	if (orientation == LinearLayoutManager.VERTICAL) {
	top = child.getBottom() + params.bottomMargin;
	bottom = top + size;
	} else { // horizontal
	left = child.getRight() + params.rightMargin;
	right = left + size;
	}
	mDivider.setBounds(left, top, right, bottom);
	mDivider.draw(c);
	}
	}

	private int getOrientation(RecyclerView parent){
	if(parent.getLayoutManager() instanceof LinearLayoutManager){
	LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
	return layoutManager.getOrientation();
	}else{
	throw new IllegalStateException("DividerItemDecoration can only be used with a LinearLayoutManager.");
	}
	}
	}

view raw DividerItemDecoration.java hosted with ❤ by GitHub

Next, write down the following code in your SwipeRecyclerViewAdapter.java. Here the code :

	package com.example.putuguna.swipelayout;

	import android.content.Context;
	import android.support.v7.widget.RecyclerView;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.ImageButton;
	import android.widget.TextView;
	import android.widget.Toast;

	import com.daimajia.swipe.SwipeLayout;
	import com.daimajia.swipe.adapters.RecyclerSwipeAdapter;
	import com.example.putuguna.swipelayout.models.StudentModel;

	import java.util.ArrayList;

	/**
	* Created by putuguna on 23/06/16.
	*/
	public class SwipeRecyclerViewAdapter extends RecyclerSwipeAdapter<SwipeRecyclerViewAdapter.SimpleViewHolder> {

	private Context mContext;
	private ArrayList<StudentModel> studentList;

	public SwipeRecyclerViewAdapter(Context context, ArrayList<StudentModel> objects) {
	this.mContext = context;
	this.studentList = objects;
	}


	@Override
	public SimpleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
	View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.swipe_layout, parent, false);
	return new SimpleViewHolder(view);
	}

	@Override
	public void onBindViewHolder(final SimpleViewHolder viewHolder, final int position) {
	final StudentModel item = studentList.get(position);

	viewHolder.tvName.setText(item.getName() + " - Row Position " + position);
	viewHolder.tvEmailId.setText(item.getEmailId());


	viewHolder.swipeLayout.setShowMode(SwipeLayout.ShowMode.PullOut);

	//drag from left
	viewHolder.swipeLayout.addDrag(SwipeLayout.DragEdge.Left, viewHolder.swipeLayout.findViewById(R.id.bottom_wrapper1));

	//drag from right
	viewHolder.swipeLayout.addDrag(SwipeLayout.DragEdge.Right, viewHolder.swipeLayout.findViewById(R.id.bottom_wraper));


	//handling different event when swiping
	viewHolder.swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
	@Override
	public void onStartOpen(SwipeLayout layout) {
	//when the SurfaceView totally cover the BottomView.
	}

	@Override
	public void onOpen(SwipeLayout layout) {
	//when the BottomView totally show.
	}

	@Override
	public void onStartClose(SwipeLayout layout) {

	}

	@Override
	public void onClose(SwipeLayout layout) {
	//when the SurfaceView totally cover the BottomView.
	}

	@Override
	public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
	//you are swiping.
	}

	@Override
	public void onHandRelease(SwipeLayout layout, float xvel, float yvel) {
	//when user's hand released.
	}
	});

	viewHolder.swipeLayout.getSurfaceView().setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	Toast.makeText(mContext, " onClick : " + item.getName() + " \n" + item.getEmailId(), Toast.LENGTH_SHORT).show();
	}
	});

	viewHolder.btnLocation.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	Toast.makeText(v.getContext(), "Clicked on Map " + viewHolder.tvName.getText().toString(), Toast.LENGTH_SHORT).show();
	}
	});

	viewHolder.tvShare.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {

	Toast.makeText(view.getContext(), "Clicked on Share " + viewHolder.tvName.getText().toString(), Toast.LENGTH_SHORT).show();
	}
	});

	viewHolder.tvEdit.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {

	Toast.makeText(view.getContext(), "Clicked on Edit " + viewHolder.tvName.getText().toString(), Toast.LENGTH_SHORT).show();
	}
	});

	viewHolder.tvDelete.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	mItemManger.removeShownLayouts(viewHolder.swipeLayout);
	studentList.remove(position);
	notifyItemRemoved(position);
	notifyItemRangeChanged(position, studentList.size());
	mItemManger.closeAllItems();
	Toast.makeText(v.getContext(), "Deleted " + viewHolder.tvName.getText().toString(), Toast.LENGTH_SHORT).show();
	}
	});

	mItemManger.bindView(viewHolder.itemView, position);
	}

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

	@Override
	public int getSwipeLayoutResourceId(int position) {
	return R.id.swipe;
	}

	public static class SimpleViewHolder extends RecyclerView.ViewHolder{
	public SwipeLayout swipeLayout;
	public TextView tvName;
	public TextView tvEmailId;
	public TextView tvDelete;
	public TextView tvEdit;
	public TextView tvShare;
	public ImageButton btnLocation;
	public SimpleViewHolder(View itemView) {
	super(itemView);

	swipeLayout = (SwipeLayout) itemView.findViewById(R.id.swipe);
	tvName = (TextView) itemView.findViewById(R.id.tvName);
	tvEmailId = (TextView) itemView.findViewById(R.id.evEmailId);
	tvDelete = (TextView) itemView.findViewById(R.id.tvDelete);
	tvEdit = (TextView) itemView.findViewById(R.id.tvEdit);
	tvShare = (TextView) itemView.findViewById(R.id.tvShare);
	btnLocation = (ImageButton) itemView.findViewById(R.id.btnLocation);
	}
	}
	}

view raw SwipeRecyclerViewAdapter.java hosted with ❤ by GitHub

Last, modify your MainActivity.java until similar like the following code :

	package com.example.putuguna.swipelayout;

	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import android.support.v7.widget.Toolbar;
	import android.util.Log;
	import android.view.View;
	import android.widget.TextView;

	import com.daimajia.swipe.util.Attributes;
	import com.example.putuguna.swipelayout.models.StudentModel;

	import java.util.ArrayList;

	public class MainActivity extends AppCompatActivity {

	private Toolbar toolbar;
	private TextView tvEmptyTextView;
	private RecyclerView mRecyclerView;
	private ArrayList<StudentModel> mDataSet;

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

	toolbar = (Toolbar) findViewById(R.id.toolbar);
	tvEmptyTextView = (TextView) findViewById(R.id.empty_view);
	mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

	mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

	mRecyclerView.addItemDecoration(new DividerItemDecoration(getResources().getDrawable(R.drawable.divider)));

	mDataSet = new ArrayList<>();
	if(toolbar!=null){
	setSupportActionBar(toolbar);
	getSupportActionBar().setTitle("Android Student");
	}

	loadData();

	if(mDataSet.isEmpty()){
	mRecyclerView.setVisibility(View.GONE);
	tvEmptyTextView.setVisibility(View.VISIBLE);
	}else{
	mRecyclerView.setVisibility(View.VISIBLE);
	tvEmptyTextView.setVisibility(View.GONE);
	}


	//creating adapter object
	SwipeRecyclerViewAdapter mAdapter = new SwipeRecyclerViewAdapter(this, mDataSet);


	// Setting Mode to Single to reveal bottom View for one item in List
	// Setting Mode to Mutliple to reveal bottom Views for multile items in List
	((SwipeRecyclerViewAdapter) mAdapter).setMode(Attributes.Mode.Single);

	mRecyclerView.setAdapter(mAdapter);

	/Scroll listener/
	mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
	@Override
	public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
	super.onScrollStateChanged(recyclerView, newState);
	Log.e("RecyclerView", "onScrollStateChanged");
	}

	@Override
	public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
	super.onScrolled(recyclerView, dx, dy);
	}
	});

	}

	// load initial data
	public void loadData() {

	for (int i = 0; i <= 20; i++) {
	mDataSet.add(new StudentModel("Student " + i, "putugunaputu" + i + "@gmail.com"));

	}


	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

That's all the steps for swiping on RecyclerView's item. Wait for other Tutorial.

BELOW IS THE COMPLETE PROJECT LINK : LINK GITHUB