Handling Pagination with Retrofit - MVVM News App

hey guys and welcome back to a new video in this video we will finally set up the pagination for our responses so that we are able to scroll further even after our first 20 articles and the first changes we need to do for that is in our news view model because we need to save the current response in that news view model we can't manage that in our fragments because if we would do that and let's say we already loader three pages and we rotate our device then the response will basically reset and that would only be the first page again that would be shown for us but we want to be able to see all the news that were already loaded when we rotate the device and because the view model doesn't get destroyed on device rotation we need to save the current response here to do that we want to make a new variable for our breaking news and search news response which is a var breaking news response and that is a news response that is nullable and we set it to null initially because we don't know that response yet then we can copy that and paste it for our search news and call its search news response and then we scroll down to our handle breaking news response function because now we may have to make some adjustments in that so when we get that successful response the first thing we want to do is we want to increase our current page numbers so that we are able to load the next page after that so for that we already have that breaking news page variable here which we can simply increase by one and now since our breaking news response is null initially we want to set it when we get the first response so we need to check if that breaking-news response is equal to null and if it is then we want to set that breaking newest response to our result response so that is the response that we got from our API and in the case that it's not the first page so we already set that breaking news response we instead want to take the new response so the result response take its articles and add all of these articles to our articles of the breaking news response so to the response that is already safe in our view model so we can get the old articles from our breaking news response make that null check and call the articles and we can get the new articles from our result response dot articles and because that article list if you take a look is a list of article and not a mutable list we cannot simply add these new articles to our old articles so that is why we should go into our news response class and make our article list immutable list of article so we are actually able to add articles to that then we can go back to a news view model and call our old articles that are a doll at all and fast or near articles so we add all articles from our newer articles to our old articles and I forgot to make that null check there and if we have done that then we also want to return our breaking news response here and if that is now so if that is the first response then we want to return our result response instead so basically everything we need we do here is we increase the page number by one every time we get response then if that is the the first response ever then we will set our breaking news response to our result response in that breaking news response we will save the current response with all available articles from all pages that we loaded yet and if we loaded more than one page already then we simply want to get the old articles so all of our shown articles and add the new articles to that list and then we can actually just copy that whole block and paste it for our handle search news response function and just add just everything we need to change here so that must be search news page instead then we have search news response here and here and here and finally here and that are all changes we need to do in that function the next step is to actually detect when we completely scroll down so then we want to paginate our request then we want to load the next page and on the one hand we need to do that in our breaking news fragment and in our search news fragment because those are the two fragments that are able to paginate our requests so let's start by going into our breaking news fragment and here we will need a shitload of boolean's but I hope everything will get clearer to you when we implement that so first of all we'll have a boolean that determines if we are currently loading so if we're loading Newton on the new page then we will have a boolean if we are at the last page already and set that to false initially so to determine if we should stop paginating and we have a boolean if we are currently scrolling which is also false initially and now we can create our own scroll is enough for our recyclerview so that will be a well scroll listener and that will be an anonymous clone as an object and set that to recyclerview that on scroll listener called the constructor on that open the class and here we want to press ctrl + O to override on scrote and on scroll state here press ok we don't want to remove that and first of all we want to go into our on scroll State changed so in that case we want to check if we are currently scrolling so we can check if the new State so the new scroll state is equal to abs list view dot on scroll listener dot scroll state touch scroll so that just means we are currently scrolling and in here we just want to set our boolean is scrolling to true that is everything for our on scroll state changed function and in our on scroll function we have to add a lot more and sadly there is not a default mechanism that tells us whether we scroll until the bottom or not so we need to actually make some calculations with the layout manager of our a stack of view we can get that layer manager a writing layout manager is equal to recyclerview dot layout manager and convert that to linear layout manager then we need to get the first visual visible item position of that layout manager so first visible item position and set that to lab manager dot first visible item position we will need the total visible item counts so well visible item count we can also get that from the layout manager dot child count and finally the total item count in our recycler view total item count and set it your layout manager dot item count and with these three numbers here we are actually now able to make some calculations to check if we scroll until the bottom of our recycler view so for that I will add many billions to make that as readable as possible so first of all that is a boolean is not loading and not at the last page and not last page so that is very easy just we check if we're not loading and if we are not at our last page then we will have a boolean if we are at the last item so well is add last item and for that to check if we are at the last item we can take our first visible item position and add our visible item count and if that is greater than or equal to total item count then we know that our last item is visible because the first visible item position will it will be the position of the first item that is visible on our screen so if we scroll and completely down then the first item that is visible at that moment will be the first visible item position and if we add the visible item count on that so how many items are currently visible in our recycler view and we get the total item count so all of our items in the recycler view then we know that our last item must be visible then we will have a boolean if we are not at the begin our recyclerview so well is not at beginning and we will set that to first visible item position greater than or equal to zero so that will just determine if we already scrolled a little bit jumped so that the first item is not visible then we will also have a boolean which is is total more than visible that will check if we have at least as many items in our recyclerview than our crabby page size so that will be 20 each page of our requests will be 20 so we set that to total item count is greater than or equal to our query page size which our query constant for in right now let's go to our util package open up the constants class here and I will duplicate that line and call it query page size and we will set that to 20 because our response contains 20 items so let's go back to breaking news fragment import that query page size and with all those four boolean's here we can now determine if we should paginate or not so we create another boolean well short paginate and set that to is not loading and not less page and we want to check if we're not at if we are at the last item of course and if we're not at the beginning and if the total is more than visible and if we are currently scrolling and then we can simply make an if condition and check if we should paginate if so then we want to call view model dot get breaking news and pass our country code and we also want to set is scrolling to false so whenever we now call this view model that gate we get breaking news then in our view model it will just make our next request and in the handle breaking news response function it will just increase the breaking news page by one so we don't need to worry about that in our breaking news fragment so whenever we call that the breaking news page will automatically be increased in our view model and because I manage that progress bar of a recycler view with the clipped repelling attribute of our recycler view so you can just take a look in the layout file of that to see how I managed to solve that because of that we also need to reset the padding of a recycler view if we scroll until the last page so in case we don't paginate here then we simply want to call our r.v breaking news our recycler view and set the padding to zero zero zero zero and now we can actually scroll down to our setup recyclerview function and add that scroll listener to the recyclerview so we can call add-on scroll listener here and add our scroll listener and be careful you don't pass just scroll is not because that is the scroll listen of our respective you already we want to call this at breaking news fragment dot scroll listener because I caught this scroll listener the same as the scroll listener that is already in the recyclerview then we will have to make some adjustments in our our height progress bar function and show progress bar function because we have that is loading boolean and when we hide the progress bar then we of course are not loading anymore so we can set is loading to false and in the show progress bar function we can set is loading to true of course and we also need to make some changes in this breaking news observer here when we get the successful response here so what we need to check here is we need to set up our is less page ruling here accordingly because every time we get a new response then that could be our last page and we need to notify our scroll isn't about that so it knows if it should paginate further or not and for that I want to get the total amount of pages of breaking news so we can get that by writing a valve total pages and set it to our newest response dot total results that is an integer that is already included in the JSON response that tells us how many results we have in our response and we need to divide that by our query page size plus 2 so why do we have to add that to upon that first of all we have an integer division here that is always rounded off so that is why we have to add one to that and the last page of our response will always be empty and we don't really want to consider that so we have to add one more to that and with this total pages integer now we can update our is last page boolean and set it to view model dot breaking news if that is equal to our total pages then we are at the last page and if we now try out our app and see if we can paginate our breaking news responses then if we scroll down you can see the loading bar appeared but there are not more results in our recycler view and that is really strange what happens here I spent hours to solve that FAQ because the articles are actually loaded into the into the list of our list differ in our recycler view adapter so our adapter contains all all available breaking news so also the news from the next page from page 2 that we paginate it when we scroll down but the recycler view doesn't show them up but that is normally the purpose of live on the futile that it should automatically calculate the differences and add these up so we don't need to call notify data set changed and what solve the issue for me is to just take our news response that articles and convert that to a normal list because currently we have a mutable list and it just seems like that the list defer can't work with mutable lists properly so we have to convert that your normal list so if you know something about that then please let me know why that works and immutable is not because immutable is is just a subclass of the normal list class that should really work but it seems like it doesn't so please let me know if you know something about that but anyways if we now we want our app and take a look now the pagination should work fine so now we can see the next results are loaded and now we have all the results loaded here and we cannot paginate further so the only thing we need to do now is to actually set that same app for our search news fragment that is just a lot of copying here copy our scroll listener go to our search news fragment scroll down and here I will add that code import everything we need we need to change the are we breaking news here to our research news of course and we don't want to call get breaking news when we paginate instead we want to search news and search queries instead of the country code it is our et search dot text that to string then we can add that scroll is not in our setup recyclerview function by calling on a ton scroll listener this at search news fragment dot scroll asana and then we can go back into our breaking news fragment and copy those two variables here and go back to search news fragment scroll up where we get the response right here paste that import query page size of course and we're doing need to adjust here of course not the breaking news page we want to have the search news page and of course also convert this articles list here to a normal list because otherwise it doesn't work as I said and don't forget to update the height progress bar function and the show progress bar function so set is loading to false when we hide it and set it to true when we show it and that should be all the changes that we need to do in our search news fragment class also a little bug fix I want to do here at the end of this series is I want to go into our article class and make those properties here actually all nullable because that can lead to crashes if we don't do that because sometimes some articles don't have an author for example and if we want to set and now to a non nullable property then our app will crash and we don't want that of course so just add a question mark at the end of each string here and at the end of that source and finally for the URL to image and I think if we now rebuild our project and there should be a place in our program where we need to update that because we no need to make a null check let's see where that is right here only say for non knowledge so that caused a lot let's click on that it's an our recyclerview adapter in the Neuse adapter class here for the source we just want to make a null check here and as I could see from my little notification in the video I made a mistake here when recording this set padding function doesn't belong in the on scroll listener instead we want to put this in an if condition when we check if we are at the last page because the purpose of that function is just to reset the padding so that the progress bar actually has its own space and is not overlapping our recyclerview so let's delete that here scroll up in our breaking news fragment by the way to our response here and here we just want to check if we are at the last page so when we get a response and that was the last response possible then we want to set the padding to null again so are we breaking news tab heading zero zero zero zero you can just leave this away and then you see what will happen then they will just be I think 50 DP of empty space at the bottom of our recycler view which just doesn't look that good then we can copy that and do the same in our search news fragment of course we move this else block here and paste it here and then we're actually good to go and can run our app and take a look in our emulator then you can see if we scroll down the progress bar appeared and if we reach the last page then we can scroll further and if we take a look at our search news page and search for developer for example then scroll down there is the progress bar and everything is working perfectly fine so yeah that was the last part of this series I hope you really enjoyed it and you learned a lot if so please let me know in the comments what new stuff you have learned in this series I'm really interested in that and also if there is anything you didn't like about this serious then please tell me that and leave me some constructive feedback below that would be really helpful for me to improve on my content have a good day see in the next video bye bye [Music] [Music]

Channel: Philipp Lackner

Views: 12,737

Rating: 4.9386191 out of 5

Keywords: tutorial, android, development, learning, programming, programmer, kotlin, beginner, mvvm, architecture, clean architecture, retrofit, room, database, pagination, response, request, coroutine, coroutines, navigation components, google

Id: ejSY4WobG58

Length: 21min 5sec (1265 seconds)

Published: Tue May 05 2020