Before starting this tutorial, I recommend you to read about Pagination Library in Android.
Here, we are going to implement pagination for fetching user photos from Instagram using the MVVM pattern. Let’s start now.
https://medium.com/media/657a47571fda328576c2459a3715a7af/href
1. Configuration
To configure pagination in our project use
https://medium.com/media/1f814c2600b4f67a2bfdff0c5500ce21/href
for integrating Instagram please follow these steps.
Go to the next step when you have the required access token for Instagram.
2. Setting up network calls
- Setting up Retrofit client
https://medium.com/media/d5c7a5ab893de5db1f8941a7817a22b9/href
- Creating our media model
https://medium.com/media/069daead14ebe22689b54bf78f8d198a/href
3. Create a Repository for fetching data
We will be displaying only photos, so we need:
media_type -> to filter images/album
media_url -> to load images from URL
children -> used only in case of a carousel album. We will define the same fields for children nodes too
https://medium.com/media/9adf75fa87dc88cac1a2150e8918354f/href
4. Creating a Data source
There are 3 types of Data source available. You can use any of the below Data source as per your requirement.
- ItemKeyedDataSource -> if you need to fetch data from last fetched item id.
- PositionalDataSource -> if you need to fetch data from a specific position/page.
- PageKeyedDataSource -> if pages you load embed next/previous keys
We will be using PageKeyedDataSource as we get next/previous pointers in response from Graph API.
Initially, we will pass them the next cursor as null. Then the adapter will load data until the params.key or next is null.
On getting InstagramMediaModel in API response we supply the data along with previous and next keys to the callback object. In case of error, we simply pass an empty list and the next pointer as null.
https://medium.com/media/e3d6f26016982aa03d5ef01bd6212dda/href
getFilteredList method filters the response list and provides a single list consisting of all photos from an individual post as well as from an album post.
5. Creating a Data Source Factory
Data-loading systems of an application or library can implement this interface to allow LiveData<PagedList> to be created
https://medium.com/media/19dc788034a45e5137f52297bfb83c36/href
6. Creating List Adapter
A simple PagedListAdapter to inflate the photo item into our layout. PagedListAdapter internally extends RecyclerView.Adapter. It takes 2 parameters:
- data -> the type of list. Here, InstagramMediaModel.Data? is our item type,
- ViewHolder.
We also provide a DiffUtil class. It is a utility class which is used to calculate the difference between old and new list supplied to the adapter and outputs the update operation to convert old into a new list. It uses an efficient mechanism to communicate with updates to the recycler view.
https://medium.com/media/9539ee8d375e424ef0bfabea283637b5/href
7. Creating ViewModel
This ViewModel will be used for creating the paged list. That PagedList will ask InstagramPhotosDataSource to load all the photo list and also will hold the photo item. For fetching the data it uses background executors.
To build PagedList we use:
- DataSourceFactory -> to fetch data form,
- PagedList configuration -> configuration of pagedList such as initial page size, size of loaded items when the list is first initialized, enable/disable placeholders, etc.
https://medium.com/media/7fbf19c9e84334df40236a97761ec668/href
8. Presenting list inside Activity
Initializing adapter inside our activity. If we receive a null list than we can check if there is an error. If the adapter does not hold any list previously, then we can handle our error case on the view (for now, I am showing a snackbar), otherwise we submit the list to our adapter and it appends the new list to the current list.
https://medium.com/media/a76afe2d7c2e97b8d515d2a180fd7b23/href
That’s all! Now you can try this inside your app.
Suggestions are always welcome! Happy Coding!