Android Jetpack Paging 3.0 Tutorial – Paged RecyclerView using Retrofit

Android team is continuously releasing new things to help us building Great Android Applications. Another addition to the list is Android Jetpack Paging 3.0 Library.

Announcement: Now you can join Simplified Coding Space at Quora. You can ask any query here related to my tutorial or android development. 

What is Paging?

If you are already into Android Development, then I am pretty sure that you know about RecyclerView.

Why do we use RecyclerView? 

We use it to display list of data. And this list in some cases can be huge, in-fact so huge. Consider any OTT application, you see a list of movies or media files; and this list may contain thousands of items.

Will you fetch all these thousands of items at once and create view objects to display all items at once? Of course a BIG NO.

It is a very bad idea to fetch this many items at once and create view components for it. It will requires too much network bandwidth (if data is coming remotely) and it will also use too much system resources to display that huge data set at once.

So an efficient solution is divide your large data set into small pages, and fetch them page by page.

Jetpack released Paging Library long back, and I have already published a complete guide about Android Paging Library here.

But now we have Paging 3.0. And it is really really better than the previous version. And the best part is Kotlin Coroutines, Flows or RxJava is officially supported now.

In this tutorial I will teach you, how you can create a paged list using paging 3.0 with your backend api.

Backend API

In most cases we fetch data from a Backend API. And for this tutorial I’ve selected this free JSON API.

Here you can see in the API we are passing page index and page size. It is a dummy API and you can use it as well.

Creating a new Project

Now, let’s start a new project to implement Jetpack Paging 3.0.

I have created a new project using an Empty Activity, and with Kotlin Language.

  • Come inside project level build.gradle  and add the following classpath.

  • Now come inside app level build.gradle  file and add these two plugins.

  • Now add compile options of Java8 and enable ViewBinding.

  • Finally add these dependencies and sync the project.

  • And our project is setiup.

Setting Up Retrofit

Now let’s setup our Retrofit that will hit the backend api to fetch data sets.

Creating API Interface

  • Create an interface named MyApi.kt  and write the following code.

  • As you can see I have defined a function to hit our GET API, and inside companion object I have the invoke function that will return us our API Instance.
  • You will get an error in this file for now, because we have not created the model data classes.

Data Classes to Map API Response

  • I use a plugin to directly create data classes for JSON Structures. You can check here, to know more about the plugin.
  • The classes that we have to map the API Response are

  • So we have the above 3 classes, and you need to make three different files for these three classes.

Fragment to display the Paged List

Now let’s first create an Empty Fragment. Here I have created a fragment named PassengersFragment.

Inside the layout of this fragment we will create our RecyclerView.

We also need a layout file for our RecyclerView, and for this I have created a file named item_passenger.xml .

Navigation Graph

  • As we are also using Navigation Architecture, we need to create a navigation graph.
  • I have created nav_graph_main.xml .

MainActivity

  • Now come inside acitivity_main.xml  and define the NavHostFragment.

  • Here we have added our fragment, and it is also the start destination.

Creating Utils

  • Create a file named Utils.kt  and write the following code in it.

Here we have created two extension functions, one is to change the visibility of a View, and another one is to load image into an ImageView using Glide.

PagingDataAdapter

To display a paged list in RecyclerView, we need to create a PagingDataAdapter.

  • I have created a class named PassengersAdapter  to create my PagingDataAdapter.

PagingSource

To get the data from backend API, we need a PagingSource.

Creating ViewModel

Now let’s create a ViewModel  for our Fragment. Inside ViewModel  we will get our PagingSource to get the paged data.

That’s it, here we will get the passengers using Flow, and it will create a stream for us, that we can use to get paged data in our Fragment or Activity.

As we are passing a parameter inside our ViewModel, we also need to create a ViewModelFactory .

Now, that’s it we are ready to display the paged data in RecyclerView.

Displaying Paged RecyclerView

Come inside your fragment, in this case it is PassengersFragment .

Now you can run your application and you will see your paged list.

Android Jetpack Paging 3 Library
Android Jetpack Paging 3 Library

But wait, we are not done yet, we need to also show, loading state, error message and a retry button.

Displaying Loading/Error State

First we need a layout for our Loading/Error state.

Now we will create one more Adapter that is the LoadStateAdapter.

LoadStateAdapter

  • I have created a new class for my LoadStateAdapter.

Using LoadStateAdapter

Now we will use the function withLoadStateHeaderAndFooter  to add the LoadStateAdapter  to our PagedAdapter .

And that’s it. Run your app and you will see the loading state or error state if occurred, you will also get a retry button and everything will work smoothly; as you can see here.

Android Jetpack Paging 3.0 Source Code

You can also download my source code, if you are having any kind of trouble following the tutorial.

Android Jetpack Paging 3.0 Source Code Download

So that is all for this post friends. In case you have any problem related to this tutorial, feel free to comment it below. And I will try to help you out. Very soon I will post a detailed Video Tutorial about this post, so that you can understand the concept more easily. So make sure you have Subscribed to Simplified Coding’s YouTube Channel. You can also SHARE this post and the channel with your friends. Thank You 🙂

Leave a Comment