In the last article we have learned about how to expand and collapse item of the recyclerView. If you have not seen please check with this link
Expandable item in recyclerview.
Today I am focusing good feature about swipe to delete or add item in recyclerView because it is good user experience. In recyclerView provide ItemHelper Class to handle this case. But it not provide good customized.
While searching the best feature I found one library That really help me. He made our life easy, so full credit goes to him, For more details about this library Here is detail link:
Itemtouchhelper-extensionIn this article We can swipe three different way to delete the item of recyclerView.
1. Swipe with Item width Spring
2. Swipe with Item width no Spring
3. Swipe with Item width.
You can see the detail in this uploaded video. It will helps you to understand the behavior.
Lets focus about to implements this library to our android project, It very simple just add the dependency to our project to used to same class to make more customized things.
build.gradle app level
apply plugin: 'com.android.application'
apply plugin: 'com.neenbedankt.android-apt'
android {
compileSdkVersion 25
buildToolsVersion "25.0.0"
defaultConfig {
applicationId "com.sunil.swipedeleteitemrecyclervieew"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.0.0'
testCompile 'junit:junit:4.12'
compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'
compile 'com.android.support:design:25.0.0'
compile 'com.jakewharton:butterknife:8.4.0'
apt 'com.jakewharton:butterknife-compiler:8.4.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'de.hdodenhof:circleimageview:2.0.0'
}
ItemTouchUIUtilImpl.java
class ItemTouchUIUtilImpl {
static class Lollipop extends Honeycomb {
@Override
public void onDraw(Canvas c, RecyclerView recyclerView, View view,
float dX, float dY, int actionState, boolean isCurrentlyActive) {
if (isCurrentlyActive) {
Object originalElevation = view.getTag(R.id.item_touch_helper_previous_elevation);
if (originalElevation == null) {
originalElevation = ViewCompat.getElevation(view);
float newElevation = 1f + findMaxElevation(recyclerView, view);
ViewCompat.setElevation(view, newElevation);
view.setTag(R.id.item_touch_helper_previous_elevation, originalElevation);
}
}
super.onDraw(c, recyclerView, view, dX, dY, actionState, isCurrentlyActive);
}
private float findMaxElevation(RecyclerView recyclerView, View itemView) {
final int childCount = recyclerView.getChildCount();
float max = 0;
for (int i = 0; i < childCount; i++) {
final View child = recyclerView.getChildAt(i);
if (child == itemView) {
continue;
}
final float elevation = ViewCompat.getElevation(child);
if (elevation > max) {
max = elevation;
}
}
return max;
}
@Override
public void clearView(View view) {
final Object tag = view.getTag(R.id.item_touch_helper_previous_elevation);
if (tag != null && tag instanceof Float) {
ViewCompat.setElevation(view, (Float) tag);
}
view.setTag(R.id.item_touch_helper_previous_elevation, null);
super.clearView(view);
}
}
static class Honeycomb implements ItemTouchUIUtil {
@Override
public void clearView(View view) {
ViewCompat.setTranslationX(view, 0f);
ViewCompat.setTranslationY(view, 0f);
}
@Override
public void onSelected(View view) {
}
@Override
public void onDraw(Canvas c, RecyclerView recyclerView, View view,
float dX, float dY, int actionState, boolean isCurrentlyActive) {
ViewCompat.setTranslationX(view, dX);
ViewCompat.setTranslationY(view, dY);
}
@Override
public void onDrawOver(Canvas c, RecyclerView recyclerView,
View view, float dX, float dY, int actionState, boolean isCurrentlyActive) {
}
}
static class Gingerbread implements ItemTouchUIUtil {
private void draw(Canvas c, RecyclerView parent, View view,
float dX, float dY) {
c.save();
c.translate(dX, dY);
parent.drawChild(c, view, 0);
c.restore();
}
@Override
public void clearView(View view) {
view.setVisibility(View.VISIBLE);
}
@Override
public void onSelected(View view) {
view.setVisibility(View.INVISIBLE);
}
@Override
public void onDraw(Canvas c, RecyclerView recyclerView, View view,
float dX, float dY, int actionState, boolean isCurrentlyActive) {
if (actionState != ItemTouchHelper.ACTION_STATE_DRAG) {
draw(c, recyclerView, view, dX, dY);
}
}
@Override
public void onDrawOver(Canvas c, RecyclerView recyclerView,
View view, float dX, float dY,
int actionState, boolean isCurrentlyActive) {
if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
draw(c, recyclerView, view, dX, dY);
}
}
}
}
MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
String imageUrl[] = Constant.image;
String names[] = Constant.name;
RecyclerAdapter adapter;
@BindView(R.id.recyclerView)
RecyclerView recyclerView;
public ItemTouchHelperExtension mItemTouchHelper;
public ItemTouchHelperExtension.Callback mCallback;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
List list = getList();
adapter = new RecyclerAdapter(this, list);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.addItemDecoration(new DividerItemDecoration(this,LinearLayoutManager.VERTICAL));
mCallback = new ItemTouchHelperCallback();
mItemTouchHelper = new ItemTouchHelperExtension(mCallback);
mItemTouchHelper.attachToRecyclerView(recyclerView);
recyclerView.setAdapter(adapter);
}
private List getList() {
List list = new ArrayList<>();
for (int i = 0; i < imageUrl.length; i++) {
ItemModel model = new ItemModel();
model.setName(names[i]);
model.setImagePath(imageUrl[i]);
list.add(model);
}
return list;
}
}
}
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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.sunil.swipedeleteitemrecyclervieew.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
list_item.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:orientation="vertical"
android:id="@+id/view_list_main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@android:color/white"
tools:showIn="@layout/list_item_main">
<de.hdodenhof.circleimageview.CircleImageView
android:src="@mipmap/ic_launcher"
android:id="@+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp" />
<TextView
android:id="@+id/name"
android:text="name"
android:textStyle="bold"
android:layout_alignBaseline="@id/imageView"
android:layout_margin="10dp"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_toRightOf="@+id/imageView"/>
</RelativeLayout>
list_item_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF4444">
<LinearLayout
android:id="@+id/view_list_repo_action_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:orientation="horizontal">
<TextView
android:id="@+id/view_list_repo_action_delete"
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center"
android:padding="12dp"
android:text="Delete"
android:textColor="@android:color/white"/>
<TextView
android:id="@+id/view_list_repo_action_update"
android:layout_width="80dp"
android:layout_height="match_parent"
android:background="#8BC34A"
android:gravity="center"
android:padding="12dp"
android:text="Refresh"
android:textColor="@android:color/white"/>
</LinearLayout>
<include layout="@layout/item_layout"/>
</FrameLayout>
list_item_single_delete.xml
<?xml version="1.0" encoding="utf-8">
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/view_list_repo_action_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#FF4444"
android:orientation="horizontal">
<TextView
android:id="@+id/view_list_repo_action_delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="12dp"
android:text="Delete ?"
android:textColor="@android:color/white"/>
<TextView
android:id="@+id/view_list_repo_action_undo"
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center"
android:padding="12dp"
android:text="Undo"
android:textColor="@android:color/white"/>
</LinearLayout>
<include layout="@layout/item_layout"/>
</FrameLayout>
RecyclerAdapter.java
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.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.bumptech.glide.Glide;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
/**
* Created by sunil on 11/29/16.
*/
public class RecyclerAdapter extends RecyclerView.Adapter {
private List itemModels;
private Context context;
public static final int ITEM_TYPE_RECYCLER_WIDTH = 1000;
public static final int ITEM_TYPE_ACTION_WIDTH = 1001;
public static final int ITEM_TYPE_ACTION_WIDTH_NO_SPRING = 1002;
public RecyclerAdapter(Context context, List wallTalls) {
this.itemModels = wallTalls;
this.context = context;
}
@Override
public int getItemCount() {
return itemModels.size();
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item_main, viewGroup, false);
if (viewType == ITEM_TYPE_ACTION_WIDTH)
return new ItemSwipeWithActionWidthViewHolder(view);
if (viewType == ITEM_TYPE_RECYCLER_WIDTH) {
view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item_with_single_delete, viewGroup, false);
return new ItemViewHolderWithRecyclerWidth(view);
}
return new ItemSwipeWithActionWidthNoSpringViewHolder(view);
}
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
ItemModel model = itemModels.get(position);
initializeViews(model, holder, position);
if (holder instanceof ItemViewHolderWithRecyclerWidth) {
ItemViewHolderWithRecyclerWidth viewHolder = (ItemViewHolderWithRecyclerWidth) holder;
viewHolder.mActionViewDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
doDelete(holder.getAdapterPosition());
}
});
} else if (holder instanceof ItemSwipeWithActionWidthViewHolder) {
ItemSwipeWithActionWidthViewHolder viewHolder = (ItemSwipeWithActionWidthViewHolder) holder;
viewHolder.mActionViewRefresh.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "Refresh Click" + holder.getAdapterPosition()
, Toast.LENGTH_SHORT).show();
}
}
);
viewHolder.mActionViewDelete.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
doDelete(holder.getAdapterPosition());
}
}
);
}
}
private void doDelete(int adapterPosition) {
itemModels.remove(adapterPosition);
notifyItemRemoved(adapterPosition);
}
@Override
public int getItemViewType(int position) {
if (position == 1) {
return ITEM_TYPE_ACTION_WIDTH_NO_SPRING;
}
if (position == 2) {
return ITEM_TYPE_RECYCLER_WIDTH;
}
return ITEM_TYPE_ACTION_WIDTH;
}
private void initializeViews(ItemModel model, final RecyclerView.ViewHolder holder, int position) {
String imageUrl = model.getImagePath();
if (imageUrl != null && !imageUrl.isEmpty()){
Glide.with(context)
.load(imageUrl)
.into(((ItemViewHolder)holder).imageView);
}
((ItemViewHolder)holder).name.setText(model.getName());
}
class ItemViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.name)
TextView name;
@BindView(R.id.imageView)
ImageView imageView;
@BindView(R.id.view_list_repo_action_container)
View mActionContainer;
@BindView(R.id.view_list_main_content)
View mViewContent;
public ItemViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
class ItemViewHolderWithRecyclerWidth extends ItemViewHolder {
@BindView(R.id.view_list_repo_action_delete)
View mActionViewDelete;
public ItemViewHolderWithRecyclerWidth(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
class ItemSwipeWithActionWidthViewHolder extends ItemViewHolder implements Extension {
@BindView(R.id.view_list_repo_action_delete)
View mActionViewDelete;
@BindView(R.id.view_list_repo_action_update)
View mActionViewRefresh;
public ItemSwipeWithActionWidthViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
@Override
public float getActionWidth() {
return mActionContainer.getWidth();
}
}
class ItemSwipeWithActionWidthNoSpringViewHolder extends ItemSwipeWithActionWidthViewHolder implements Extension {
public ItemSwipeWithActionWidthNoSpringViewHolder(View itemView) {
super(itemView);
}
@Override
public float getActionWidth() {
return mActionContainer.getWidth();
}
}
}
![]()
Thanks for reading this article. I hope it helps you to understand.
.png)
