Implementing Load More When Woking On Blogger's API

In this tutorial, i will share a tutorial about how to implementing load more and pagination function in Blogger API using retrofit.

When you working with API Blogger, you will face an endpoint that contains much data in list.

The URL that contains a lot of data in list is :

https://www.googleapis.com/blogger/v3/blogs/your-id-blog/posts?key=YOUR_AUTH_ID

That URL will display output json look like the following image :

Output List Json

If you run the URL above, the result will give you only 10 datas in first page. Take a look at attribute items.

To get the next page you have to request it again (load more) and display the result as pagination. To implementing the pagination (request the next page), you can use the attribute nextPageToken. As long as the attribute nextPageToken exist, it means the data still exist in the next page.

Request the first page

Just request the first data in normal URL (without params nextPageToken). In this case i request the data using retrofit :

	//this is interface to get the first page
	@GET("blogs/"+GlobalVariable.BLOGGER_ID+"/posts")
	Call<ListPostModel> getListPost(@Query("key") String apiKey);
	/**
	* this method used for get first page of list posts
	*/
	private void getFirstPage(){
	mSwipeRefreshLayout.setRefreshing(true);
	BloggerApiService apiService = BloggerApiClient.getClient().create(BloggerApiService.class);
	Call<ListPostModel> call = apiService.getListPost(GlobalVariable.APP_KEY_V3);
	call.enqueue(new Callback<ListPostModel>() {
	@Override
	public void onResponse(Call<ListPostModel> call, Response<ListPostModel> response) {
	ListPostModel listpost = response.body();
	initDataView(listpost);
	mSwipeRefreshLayout.setRefreshing(false);
	}
	@Override
	public void onFailure(Call<ListPostModel> call, Throwable t) {
	mSwipeRefreshLayout.setRefreshing(false);
	Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
	}
	});
	}
	/**
	*This method used for set the first data into adapter
	*/
	private void initDataView(ListPostModel listpost){
	// save the value of nextPageToken into sharedPreference. This value will used to request the next page
	GlobalFunction.saveString(this,GlobalVariable.keySharedPreference.TOKEN_PAGINATION, listpost.getNextPageToken());
	//dispay the nextPageToken value from the sharePreference
	final String nextPageToken = GlobalFunction.getStrings(this, GlobalVariable.keySharedPreference.TOKEN_PAGINATION);
	mListPost.addAll(listpost.getListItemsPost());
	mPostAdapter = new ListPostAdapter(mListPost, this) {
	@Override
	public void load() {
	// check the nextPageToken is exist or not
	if(nextPageToken==null){
	}else{
	// if exist request the next page
	getNextListPost();
	}
	}
	};
	mRecyclerviewPost.setAdapter(mPostAdapter);
	mRecyclerviewPost.setHasFixedSize(true);
	mGridViewLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
	mGridViewLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
	mRecyclerviewPost.setLayoutManager(mGridViewLayoutManager);
	}

view raw getFirstPage.java hosted with ❤ by GitHub

On the code above, I request the first page and set the data into the adapter. Don't forget to save the value of nextPageToken.

In load more function, i check the nextPageToken is exist or not. Is exist, then request the next page.

Request the next page

To request the next page, you have to add params pageToken, and the value set from nextPageToken.

The URL to be :

https://www.googleapis.com/blogger/v3/blogs/your-id-blog/posts?key=YOUR_AUTH_ID&pageToken=CgkIChjigf_aoisQu_ugxZqtye83

The code is look like the follows :

	//interface for get next page
	@GET("blogs/"+GlobalVariable.BLOGGER_ID+"/posts")
	Call<ListPostModel> getNexPageListPost(@Query("key") String apiKey, @Query("pageToken") String tokenPagination);
	/**
	* this method used for get next page
	*/
	private void getNextListPost(){
	mSwipeRefreshLayout.setRefreshing(true);
	//get the nextPageToken from sharePreference that saved before.
	final String nextPageToken = GlobalFunction.getStrings(this, GlobalVariable.keySharedPreference.TOKEN_PAGINATION);
	BloggerApiService apiService = BloggerApiClient.getClient().create(BloggerApiService.class);
	Call<ListPostModel> call = apiService.getNexPageListPost(GlobalVariable.APP_KEY_V3,nextPageToken);
	call.enqueue(new Callback<ListPostModel>() {
	@Override
	public void onResponse(Call<ListPostModel> call, Response<ListPostModel> response) {
	ListPostModel listpost = response.body();
	//check attribute nextPageToken is exist or not
	if(nextPageToken==null){
	}else{
	// in contains, then set the data into adapter
	initDataView2(listpost);
	}
	mSwipeRefreshLayout.setRefreshing(false);
	}
	@Override
	public void onFailure(Call<ListPostModel> call, Throwable t) {
	mSwipeRefreshLayout.setRefreshing(false);
	Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
	}
	});
	}
	/**
	* this method used for set the nextpage's data into adapter
	* @param listpost
	*/
	private void initDataView2(ListPostModel listpost){
	//save the nextPageToken into sharedPreference
	GlobalFunction.saveString(this,GlobalVariable.keySharedPreference.TOKEN_PAGINATION, listpost.getNextPageToken());
	//set data into adapter
	mListPost.addAll(listpost.getListItemsPost());
	mPostAdapter.notifyDataSetChanged();
	}

view raw getNextPage.java hosted with ❤ by GitHub

That's all what i did to implementing load more pagination when request data using Blogger API. Hope it helps. Thank you.