RecyclerView with Endless scroll and swipe to remove the item in Android Example

In this tutorial, you will learn how to implement infinite scroll and swipe to remove the item with animation in Android Application.

 

 

Introduction

UltimaterecyclerviewRecyclerView is custom recyclerView and more advanced, flexible and efficient version of ListView with large data set of views that can be scrolled and recycled.

In this tutorial, we will create a list of items with infinite scroll using ultimateRecyclerView library. We can also remove the items through swipe of the item. And press the item at long time, we will able to drag the item up and down in the list to change the position of list of items.

 




Adding Support Library

To make list of items with infinite scroll and swipe the item to remove from list, you need to add the ultimaterecyclerview view support library to your project. Open your build.gradle (app) file and add the library in the dependencies.

 

dependencies {
   ....
    compile 'com.marshalchen.ultimaterecyclerview:library:0.4.0'
}

 

Add the UltimateRecyclerView tag to the layout file

we need to add a com.marshalchen.ultimaterecyclerview:library:0.4.0 to show set of data. Add the following code in your activity.xml file:

 

<?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: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="app.androidrecyclerview.MainActivity">

   <com.marshalchen.ultimaterecyclerview.UltimateRecyclerView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/ultimate_recycler_view"
        />
</RelativeLayout>

 

Create a custom row Layout

Create a file named list_item.xml to show the text and image in the ultimateRecyclerView and add the following to it:

 

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:id="@+id/itemview">

    <TextView
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:layout_height="wrap_content"
        android:id="@+id/textview"
        android:text="test2"/>

    <ImageView
        android:layout_marginTop="2dp"
        android:layout_below="@id/textview"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:layout_width="fill_parent"
        android:layout_height="120dp"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        android:src="@drawable/jr14" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:id="@+id/progressbar" android:visibility="gone"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

 

Create a custom progressbar Layout

Create a file named custom_bottom_progressbar.xml to make the custom progress bar at the bottom when scroll the list and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:layout_width="wrap_content"
        android:id="@+id/bottom_progress_bar"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Loading"
        android:layout_below="@id/bottom_progress_bar"
        android:layout_marginTop="2dp"
        android:gravity="center_horizontal"
     />
</RelativeLayout>

 

Initializing the UltimateRecyclerView

We need to initialize the id of UltimateRecyclerView to use the feature of UltimateRecyclerView class.

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                             findViewById(R.id.ultimate_recycler_view);
    }
}

 
 

If you are sure that the size of the RecyclerView won’t be changing, you can add the following to improve performance:

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);
    }
}

 

Creating an ArrayList

Now, we need a set of values that will be provided as data source to the UltimateRecyclerView. We will use ArrayList to provide the data to list. we create a getarraylist() method to add the list of items.

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    List<String> stringList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);
    }

    public List<String> getarraylist(){
        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;

    }
}

 

Creating UltimateViewAdapter class

We need to create a UltimateViewAdapter class named as CustomAdapter class. In this Adapter class, we will create method to populate data in the recyclerview and drag listener to change the position of items and also the swipe listener to remove the items through swipe of item.

 


public class CustomAdapter extends 
         UltimateViewAdapter<CustomAdapter.SimpleAdapterViewHolder> {
    private List<String> stringList;

    public CustomAdapter(List<String> stringList) {
        this.stringList = stringList;
    }


    @Override
    public void onBindViewHolder(final 
            SimpleAdapterViewHolder holder, int position) {
        if (position < getItemCount() && 
                (customHeaderView != null ? position <= stringList.size() 
               : position < stringList.size()) && (customHeaderView != null ? 
               position > 0 : true)) {

            ((SimpleAdapterViewHolder) holder)
             .textViewSample.setText(stringList.get(position));

        }

    }

    @Override
    public int getAdapterItemCount() {
        return stringList.size();
    }

    @Override
    public SimpleAdapterViewHolder getViewHolder(View view) {
        return new SimpleAdapterViewHolder(view, false);
    }

    @Override
    public SimpleAdapterViewHolder onCreateViewHolder(ViewGroup parent) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, parent, false);
        SimpleAdapterViewHolder vh = new SimpleAdapterViewHolder(v, true);
        return vh;
    }


    public void insert(String string, int position) {
        insertInternal(stringList, string, position);
    }

    public void remove(int position) {
        removeInternal(stringList, position);
    }

    public void clear() {
        clearInternal(stringList);
    }

    @Override
    public void toggleSelection(int pos) {
        super.toggleSelection(pos);
    }

    @Override
    public void setSelected(int pos) {
        super.setSelected(pos);
    }

    @Override
    public void clearSelection(int pos) {
        super.clearSelection(pos);
    }


    public void swapPositions(int from, int to) {
        swapPositions(stringList, from, to);
    }


    @Override
    public long generateHeaderId(int position) {

        if (getItem(position).length() > 0)
            return getItem(position).charAt(0);
        else return -1;
    }

    @Override
    public RecyclerView.ViewHolder onCreateHeaderViewHolder
                                           (ViewGroup viewGroup) {
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.stick_header_item, viewGroup, false);
        return new RecyclerView.ViewHolder(view) {
        };
    }

    @Override
    public void onBindHeaderViewHolder(RecyclerView.ViewHolder 
                                         viewHolder, int position) {

        TextView textView = (TextView) viewHolder.itemView
                                                 .findViewById(R.id.stick_text);
        textView.setText(String.valueOf(getItem(position).charAt(0)));
        viewHolder.itemView.setBackgroundColor(Color.parseColor("#AAffffff"));


    }

    @Override
    public void onItemMove(int fromPosition, int toPosition) {
        swapPositions(fromPosition, toPosition);
//        notifyItemMoved(fromPosition, toPosition);
        super.onItemMove(fromPosition, toPosition);
    }

    @Override
    public void onItemDismiss(int position) {
        if (position > 0)
            remove(position);
        // notifyItemRemoved(position);
//        notifyDataSetChanged();
        super.onItemDismiss(position);
    }


    public void setOnDragStartListener(OnStartDragListener 
                                       dragStartListener) {
        mDragStartListener = dragStartListener;

    }


    public class SimpleAdapterViewHolder extends 
                               UltimateRecyclerviewViewHolder {

        TextView textViewSample;
        ImageView imageViewSample;
        ProgressBar progressBarSample;
        View item_view;

        public SimpleAdapterViewHolder(View
                                      itemView, boolean isItem) {
            super(itemView);

            if (isItem) {
                textViewSample = (TextView) itemView.findViewById(
                        R.id.textview);
                imageViewSample = (ImageView)
                                        itemView.findViewById(R.id.imageview);
                progressBarSample = (ProgressBar)                                 
                                      itemView.findViewById(R.id.progressbar);
                progressBarSample.setVisibility(View.GONE);
                item_view = itemView.findViewById(R.id.itemview);
            }

        }

        @Override
        public void onItemSelected() {
            itemView.setBackgroundColor(Color.LTGRAY);
        }

        @Override
        public void onItemClear() {
            itemView.setBackgroundColor(0);
        }
    }

    public String getItem(int position) {
        if (customHeaderView != null)
            position--;
        if (position < stringList.size())
            return stringList.get(position);
        else return "";
    }

}

 

Set layoutManager in RecyclerView

A UltimateRecyclerView needs a LayoutManager to manage the positioning of its items. You could define your own LayoutManager by extending the ultimateRecyclerView.LayoutManager class.

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    LinearLayoutManager linearLayoutManager;
    List<String> stringList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);
 
    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;

    }
}

 

Set Adapter in Activity

Now, call the adapter constructor and set the adapter by using SetAdapter method in the MainActivity.

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    CustomAdapter customAdapter = null;
    LinearLayoutManager linearLayoutManager;
    List<String> stringList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);

        customAdapter = new CustomAdapter(getarraylist());
        ultimateRecyclerView.setAdapter(customAdapter);
 
    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;

    }
}

 

Call the enableLoadmore() method

We need to call the enableLoadmore() method to insert the item at the end of the list. We need to add the method to inflate the custom progress bar at the end of list while scrolling the list.

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    CustomAdapter customAdapter = null;
    LinearLayoutManager linearLayoutManager;
    List<String> stringList = new ArrayList<>();
    int moreNum = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);

        customAdapter = new CustomAdapter(getarraylist());
        ultimateRecyclerView.setAdapter(customAdapter);
 
        ultimateRecyclerView.enableLoadmore();
        addCustomLoaderView();
    }

    public void addCustomLoaderView(){
        customAdapter.setCustomLoadMoreView(LayoutInflater.from(this)
                .inflate(R.layout.custom_bottom_progressbar, null));
    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;
    }
}

 

Adding swipeRefresh() method

We will create a swipeRefresh() method. This method is used to refresh the item through swipe down the list.

 

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    CustomAdapter customAdapter = null;
    LinearLayoutManager linearLayoutManager;
    int moreNum = 2;

    private ItemTouchHelper mItemTouchHelper;
    List<String> stringList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);

        customAdapter = new CustomAdapter(getarraylist());
        ultimateRecyclerView.setAdapter(customAdapter);
 
        ultimateRecyclerView.enableLoadmore();
        addCustomLoaderView();

        ultimateRecyclerView.
                 setRecylerViewBackgroundColor(Color.parseColor("#ffffff"));
        swipeRefresh();
    }

    public void addCustomLoaderView(){
        customAdapter.setCustomLoadMoreView(LayoutInflater.from(this)
                .inflate(R.layout.custom_bottom_progressbar, null));
    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;
    }

    public void swipeRefresh(){
        ultimateRecyclerView.setDefaultOnRefreshListener
                        (new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        customAdapter.insert(moreNum++ + "  Refresh things", 0);
                        ultimateRecyclerView.setRefreshing(false);
                        linearLayoutManager.scrollToPosition(0);

                    }
                }, 1000);
            }
        });

    }
}

 

Adding dragList() method

We will add the dragList() method. In this method, we will use the Drag listener to change the position of items in the list.

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    CustomAdapter customAdapter = null;
    LinearLayoutManager linearLayoutManager;
    int moreNum = 2;

    private ItemTouchHelper mItemTouchHelper;
    List<String> stringList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ultimateRecyclerView = (UltimateRecyclerView) 
                               findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);

        customAdapter = new CustomAdapter(getarraylist());
        ultimateRecyclerView.setAdapter(customAdapter);
 
        ultimateRecyclerView.enableLoadmore();
        addCustomLoaderView();

        ultimateRecyclerView
               .setRecylerViewBackgroundColor(Color.parseColor("#ffffff"));
        swipeRefresh();
        dragList();
    }

    public void addCustomLoaderView(){
        customAdapter.setCustomLoadMoreView(LayoutInflater.from(this)
                .inflate(R.layout.custom_bottom_progressbar, null));
    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;
    }
  
    public void dragList(){
        ItemTouchHelper.Callback callback = 
                   new SimpleItemTouchHelperCallback(customAdapter);
        mItemTouchHelper = new ItemTouchHelper(callback);
        mItemTouchHelper.attachToRecyclerView(ultimateRecyclerView.mRecyclerView);
        customAdapter.setOnDragStartListener
                            (new CustomAdapter.OnStartDragListener() {
            @Override
            public void onStartDrag(RecyclerView.ViewHolder viewHolder) {
                mItemTouchHelper.startDrag(viewHolder);
            }
        });
    }


    public void swipeRefresh(){
        ultimateRecyclerView.setDefaultOnRefreshListener
                        (new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        customAdapter.insert(moreNum++ + "  Refresh things", 0);
                        ultimateRecyclerView.setRefreshing(false);
                        linearLayoutManager.scrollToPosition(0);

                    }
                }, 1000);
            }
        });

    }
}

 

Adding infinite_Insertlist() method

Finally, add the infinite_Insertlist() to add the item while scrolling of the list.

public class MainActivity extends AppCompatActivity  {

    UltimateRecyclerView ultimateRecyclerView;
    CustomAdapter customAdapter = null;
    LinearLayoutManager linearLayoutManager;
    int moreNum = 2;

    private ItemTouchHelper mItemTouchHelper;
    List<String> stringList = new ArrayList<>();

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

        ultimateRecyclerView = (UltimateRecyclerView) 
                          findViewById(R.id.ultimate_recycler_view);
        ultimateRecyclerView.setHasFixedSize(false);

        linearLayoutManager = new LinearLayoutManager(this);
        ultimateRecyclerView.setLayoutManager(linearLayoutManager);
        customAdapter = new CustomAdapter(getarraylist());
        ultimateRecyclerView.setAdapter(customAdapter);

        ultimateRecyclerView.enableLoadmore();


        addCustomLoaderView();


        ultimateRecyclerView.setRecylerViewBackgroundColor
                        (Color.parseColor("#ffffff"));

        swipeRefresh();
        dragList();
        infinite_Insertlist();

    }

    public List<String> getarraylist(){

        stringList.add("111");
        stringList.add("aaa");
        stringList.add("222");
        stringList.add("333");
        stringList.add("444");
        stringList.add("555");
        stringList.add("666");
        stringList.add("777");

        return stringList;

    }

    public void addCustomLoaderView(){
        customAdapter.setCustomLoadMoreView(LayoutInflater.from(this)
                .inflate(R.layout.custom_bottom_progressbar, null));
    }

    public void dragList(){
        ItemTouchHelper.Callback callback = new 
                          SimpleItemTouchHelperCallback(customAdapter);
        mItemTouchHelper = new ItemTouchHelper(callback);
        mItemTouchHelper.attachToRecyclerView(ultimateRecyclerView.mRecyclerView);
        customAdapter.setOnDragStartListener
                          (new CustomAdapter.OnStartDragListener() {
            @Override
            public void onStartDrag(RecyclerView.ViewHolder viewHolder) {
                mItemTouchHelper.startDrag(viewHolder);
            }
        });
    }

    public  void infinite_Insertlist(){
        ultimateRecyclerView.setOnLoadMoreListener(new 
            UltimateRecyclerView.OnLoadMoreListener() {
            @Override
            public void loadMore(int itemsCount, final 
                                   int maxLastVisiblePosition) {
                Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    public void run() {
                        customAdapter.insert
                    ("More " + moreNum++, customAdapter.getAdapterItemCount());
                        customAdapter.insert
                    ("More " + moreNum++, customAdapter.getAdapterItemCount());
                        customAdapter.insert
                    ("More " + moreNum++, customAdapter.getAdapterItemCount());
                    }
                }, 1000);
            }
        });
    }

    public void swipeRefresh(){
        ultimateRecyclerView.setDefaultOnRefreshListener
                      (new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        customAdapter.insert(moreNum++ + "  Refresh things", 0);
                        ultimateRecyclerView.setRefreshing(false);
                        linearLayoutManager.scrollToPosition(0);

                    }
                }, 1000);
            }
        });

    }

}

 
 

 


The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com
  • Akshay Panchal

    how we do with the live api for pagination with index number..?