Implementing Pagination for fetching Instagram photos

Implementing Pagination for fetching Instagram photos

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!


Implementing Pagination for fetching Instagram photos was originally published in Kt. Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.