Android
Load More in RecyclerView with Progressbar

Load More in RecyclerView with Progressbar


You have an infinite number of items or a large number of items to show in a RecyclerView. But Loading all that data at once is neither a good practice nor gives good user experiences. So in this tutorial, we will learn how to implement dynamic loading of data in RecyclerView i.e loading a small amount of data at a time and loading more number of items as a user approaches the end of the previous items list. We will also learn how to show a ProgressBar at the end of RecyclerView while the next items load.




 

Important Points:

1. You should be using Android Studio for development.

2. As this tutorial is about loading data dynamically, you should have a REST API configured which accepts
limit and skip as parameters.

3. In this tutorial, I shall take an example of Comments Activity i.e I shall be writing code for showing a list of comments in RecyclerView. But you must tweak this code as per your App’s requirement.

 

STEP 1Add Dependencies

Add the below-given dependency to the app-level build.gradle file.

I have added the dependency for RecyclerView. If you are using CardView in RecyclerView, then you must add a dependency for CardView also.

 

STEP 2Define Layout for Item Views inside RecyclerView

Before defining the Adapter class for RecyclerView, we shall define the layout files for the views inside the RecyclerView i.e one layout file for the comment view (view for the item shown in RecyclerView) and another layout file for the ProgressBar that is shown while more data loads at the bottom of RecyclerView.

Copy the below-given code in their respective layout files named comment_layout.xml and progressbar_bottom_layout.xml


 

STEP 3Define the POJO class for the Items in RecyclerView

Here, we are defining the POJO (model) class for the items shown inside RecyclerView. Here, it is a class for comment. But you should define it according to your needs.

Copy the below-given code in a file named Comment.java

 

STEP 4Define an Interface

In this step, we shall define an Interface which will be used to load more data in the RecyclerView. This interface will contain a method called onLoadMore(). If you don’t know, an Interface contains only abstract methods i.e method without a body. The body of the method is defined where the Interface is implemented.

Copy the below-given code in a file named OnLoadMoreListener.java

 

STEP 5Define the Adapter Class

In this step, we will write code for the Adapter class of RecyclerView. I have well commented the code for your understanding along with explanation after the code.

Copy the below-given code in a file named RecyclerViewAdapter.java

In the above code, the main logic lies in the method getItemViewType(). This method matches each item against the VIEW_ITEM except for the last item in the list which is null. This null item is matched against a VIEW_PROG.

Now every time a holder of type ProgressViewHolder is encountered inside the method onBindViewHolder(),onLoadMore() method of the mOnLoadMoreListener is called. This initiates an action inside the Activity class to load more Data.

One more method that needs to be discussed from the above code is removeLastItem(). This method removes the current ProgressBar
from the list, when more data has been loaded. This method is called inside Activity class as you will see.

 

STEP 6Define Layout for Activity

In this step, we shall define the layout for our Activity which contains RecyclerView.

Copy the below-given code in a file named activity_recycler_view.xml.

 

STEP 7Define the Activity Class

This is the last step in which we are going to define our Activity class which contains the RecyclerView. The Activity will handle all the task of loading data dynamically and show in RecyclerView with the help of RecyclerViewAdapter

Copy the below-given code in a file named RecyclerViewActivity.java





Important Points:

1. You must tweak above code as per your requirements. I have not used a REST API in above code but you must use a REST API if you want to load data dynamically.

2. I have well commented the code above so that you can understand it easily. The logic lies in the OnLoadMoreListener() passed to the Adapter and the null item added to the list.

3. I have tried to provide the logic for loading data dynamically in RecyclerView. Now it depends on you, how you want to use it?

4. In Case you get stuck, fork the Github repository below for complete code.

 

Github Link

 


If you face any problem in this tutorial, you can always leave a comment below or you can reach me through the chat option visible in the bottom-right corner of the window.

Share this Story

Related Posts

9 Comments

  1. devops online training in hyderabad

    October 13, 2017 at 4:47 am

    Thank you very much ! You have cleared out the difference between them.

    Reply

    • SVB

      October 16, 2017 at 7:17 pm

      Thank you for your response.

      Reply

  2. Avishek Biswas

    July 13, 2018 at 7:34 am

    if (mOnLoadMoreListener != null) {
    mOnLoadMoreListener.onLoadMore(mDataset.get(position));
    }
    loading = true;
    }

    at com.example.avibis.practicerecyclerview.Adapter.removeLastItem(Adapter.java:117)
    at com.example.avibis.practicerecyclerview.MainActivity.loadMoreData(MainActivity.java:71)
    at com.example.avibis.practicerecyclerview.MainActivity$1.onLoadMore(MainActivity.java:57)
    at com.example.avibis.practicerecyclerview.Adapter.onBindViewHolder(Adapter.java:89)

    I am facing that type of Problem…
    How can I solve it?

    Reply

    • SVB

      July 21, 2018 at 12:36 pm

      Hi Avishek,

      Thank you for pointing this out. There was a mistake in my code.

      Instead of

      mOnLoadMoreListener.onLoadMore(mDataset.get(position));

      it should be

      mOnLoadMoreListener.onLoadMore(position);

      I have corrected my code above. I’m sorry for the mistake.

      Reply

  3. Bilel

    August 27, 2018 at 1:14 pm

    I have an error:
    at com.example.root.mitchapp.RecyclerViewAdapter.removeLastItem(RecycleViewAdapter.java:126)
    at com.example.root.bilel.MainActivity.loadMoreData(MainActivity.java:94)
    at com.example.root.bilel.MainActivity$1.onLoadMore(MainActivity.java:67)
    at com.example.root.bilel.RecyclerViewAdapter.onBindViewHolder(RecycleViewAdapter.java:90)

    Reply

    • SVB

      August 28, 2018 at 5:26 pm

      Hi! Bilel,

      Have you implemented the exact same code given above or you made some changes? In the latter case, I need more data to resolve your problem.

      Thank you!

      Reply

  4. fatima

    September 15, 2018 at 3:54 am

    thank you for your code it was brilliant but i get this error below
    Cannot call this method while RecyclerView is computing a layout or scrolling
    i have this problem at this function
    public void removeLastItem(){
    Works.remove(Works.size() – 1);
    notifyDataSetChanged();
    }
    on notifyDataSetChanged();
    what should i do

    Reply

    • SVB

      September 22, 2018 at 5:23 pm

      Hi! Fatima,

      I have fixed the error and have sent you an email. Kindly look into that.

      Reply

      • fatima

        September 23, 2018 at 5:29 am

        i appreciate your attention .thank you very much

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me


I'm a college student pursuing B.tech. I created this website (Blog) to share my learnings with the people who search for the same content/knowledge.