Paging 3 & Jetpack Compose - Android Development | Part 1 - Introduction

hi hello there and uh welcome back to my new video so with this video i am actually starting a new tutorial series on my channel and this series will be all about paging 3 library and jetpack compose so while in this tutorial series we are going to create one a simple application in which we are going to implement a paging 3 library and the jetpack compose now our application will use the unsplash api to fetch a different images from data server and we are going to paginate the response from that test server using a page 3 library now in this tutorial series you will learn how to paginate the data from a network but also how to paginate a data from a room library or from your local database and not just that i'm going to also show you how to use a remote mediator with a remote keys so you can cache all that data which you receive from your server into your local database which means that after you cache that data locally to your database and then you will be able to access that same data in your android application without an internet connection so now let me show you how our application will actually look like so our simple application will have a two different screens the first screen will be home screen in which we are going to display all those images from our unsplash api or from a list of photos endpoint and inside our application with the help of a jetpack compose we are going to design this simple image holder where in the background we are going to display this image from unsplash api and on the bottom we are going to give the credit for that author which has uploaded that specific image on a unsplash api and then on the right side of that we are going to show here a number of likes which that the same image has on unsplash.com and all those unsplasher images are actually displayed inside a lazy column so we can just scroll down below and you can also see this uh a beautiful and smooth crossfade effect we can also see this a placeholder image if we look and scroll even faster so there you go also if we open up our local database here let me just show you so actually we are going to have a two different database tables the first one is called the unsplash image table which will contain basically all unsplash images that we receive from our unsplash api and down below you can see all the items or all the images that we have downloaded we have a different page here as well so in total we have downloaded here 59 images and also here we have this unsplash remote keys table which is basically used by our remote mediator which is actually a class from our paging 3 library that will allow us to automatically cache that data which we receive from our api and this remote keys database table will contain the previous and next page keys so that our remote mediator can know which page to request the next from our network or from our api so basically with our paging 3 library and the remote mediator we will be able to paginate through the data from our api response page by page so whenever we open up our application for the first time then we are going to receive some number of unsplash images and whenever we scroll through this list of lazy column and whenever we reach at the bottom of that list or basically one of the last items from our local database and then our paging tree library by default will send a signal to our remote mediator to request a new data from an api automatically so basically from our side we don't have to do anything from here we just need to scroll down below and the new items will automatically load into our database so let me just show you and there we go so now we have a downloaded new items from that same api so as you can see the last item was a 59 and now we have requested some new uh images as well so there we go we have even more anyhow that was our first home screen in which we have implemented that remote mediator and offline caching as well and the second screen is actually a search screen which will send a get request to a different endpoint on our unsplash website and there we can search for specific images for example here we can write dog and we can search all those dog images there we go now this second search screen does not use a remote mediator to store or to cache that data because in our searches screen we actually don't need to cache the data we only need to request a new data from our api and for this specific search endpoint we are going to implement a custom paging source and by the way this application also supports a dark mode so let me just switch here the theme to a dark theme there you go so now we can go back perfect and everything here works as expected okay so now that you have seen how our actual application will look like now i'm going to cover some theory basics about paging 3 library in general i'm going to talk about some of the most important classes which are part of pager3 library and then from the next video in this series we are going to actually start setting up the project and start working with this application but for now i'm going to cover some theory about page 3 library and i highly suggest you to keep watching this video because in this video i'm going to cover some important stuff about this library which everyone should know so uh first let's start with the basics what is a paging 3 library anyway what are the main functionalities it has to offer to us developers the short answer a paging 3 library is mostly used to paginate the data from different data sources that can be for example from a room database or from an api but what do i mean by that paginate the data well that means that the paging 3 library will be able to provide us the data page by page for example when are getting the data from the database we don't have to read all items from the database all at once instead we can read it page by page which means that the data will be loaded in a small chunks now for example when a user opens the application not all data will load at once instead the more items from the data source will load as the user scrolls through the list page by page this in general will increase the performance of our application now the paging library includes the following features in-memory caching for your page data which ensures that your application uses the system resources efficiently while working with the page data then at the first class support for our kotlin core routines in flow as well as the live data in their rx java then we can automatically request the correct page when the user has a scroll through the end of the list we can ensure that multiple requests are not triggered at the same time it will allow us to cache our data it will allow us to track a loading state also it will allow us to execute some common operations like a map or a filter okay so now that you kind of understand that what the pageantry library actually is i'm going to introduce you with some of the most important classes that belong to this library as well now first let's start with a paging source so a paging source will retrieve the data from a single data source like a network a local database and so on a paging source takes two parameters a key and a value and the value parameter is the type of the data that will be loaded and displayed to the users and with a key we define which page of data to load now key is usually an integer value representing either a page number or an item position or even a string if you are using a string as the next token returned with each response also a room library supports a paging 3 library by default which means that whenever you want to paginate the data from the local database you don't have to implement your own appearing source class instead everything is handled for you the only thing that you need to do is to add a paging source wrapper class as a return type of the function that is reading your database and you will see that in practice when we actually start implementing a pager3 library in our project also an instance of appearing source is used to load the pages of data for an instance of a paging data and that's when a paging data class comes into play so a paging data is a container for a page the data from a single generation of loads and the paging data queries data from its paging source in response to a loading hints which can be generated as the user scrolls in the lazy column now when we want to see more data we usually scroll the list and whenever we scroll data list in this case a lazy column list and then our paging data and appearing source are notified and the new page of data is received if there is one of course so each refresh of data will have a separate corresponding paging data now to control how and when a paging data queries data from it's a paging source we can use a paging config class and a paging configure class is used to configure behavior within a pager as it loads the content from a paging source a paging config class accepts multiple parameters and the first one is a page size which basically defines the number of items loaded at once from the paging source usually this page size number should be several times higher than the number of visible items on the screen in our case and in our project which we are going to build in this tutorial series there will be actually around two or maybe three unsplash images visible inside our list which means that we could have added more than three items per page in our case that can be even a number 10. also if you are loading the data from a very large social media style cards that take up the most of the screen then a 10 or 20 items of a pair size make sense and if you are displaying dozens of items in a small grid which can basically show items during a scroll much more quickly then you can consider increasing the page number to even a 100 a next important parameter of our paging config class is initial load size and this parameter will define a requested the load size for initial load from a paging source and this value is a typically larger than a page size so whenever we load some data in our application initially that number should actually be a little bit higher than our page number and a default value for this initial load size is a page size times three then after that we also have a max size parameter which basically defines the maximum number of items that may be loaded into the paging data before pages should be dropped and that this can be used to cap the number of items in memory by dropping pages and this value is a typically many pages so that all the pages are cashed in in the case that user scrolls back and of course this page in config class accepts some more parameters anyhow i have just wanted to mention those that i really find important there are also some more useful classes from a paging 3 library that you should know about but anyhow there is just one more uh class which i think that i need to mention here as well and that class is a remote mediator so the main purpose of a remote mediator is to combine a local storage with a remote queries in order to provide a consistent data flow to the users regardless if your network is available or not basically it means that with a remote mediator we will be able to implement offline caching very easily so a remote mediator implementation will help us to load the page data from the network into our database and not to load the data directly into our ui instead our application will use a local database as a single source of truth so in other words our application will display only the data that has already been cached into our database and whenever we want to paginate from our room database we don't need to implement a customer paging source because that customer paging source has already been generated by our room library and that we can handle loading the data in a paginating way with our room database automatically so basically our remote mediator will immediately be notified from our paging library whenever our application has a run out of the data so a remote mediator acts as a signal and with that a signal we can load additional data from the network and store that same data in the local database where a paging source can load and provide it to the ui to display it to our users now depending on where you're loading data from you can implement either a paging source or a paging source and a remote mediator so if you are loading the data from a single source like a network a local database or a file and then you should implement the paging source only also as i already mentioned before a room database supports a page 3 library by default so implementing a paging source for a local database is an easy job and if you are loading the data from a layered source like a network data source with a local database cache and then you should implement a remote mediator to merge those two sources and the main role of remote mediator is to load more data from the network when either the pager runs out of the data or if the existing data is invalidated now there is also one important thing that goes along with remote mediator and that is a remote keys so a remote keys are basically the keys that the remote mediator is using to tell the back-end service which data to load next so for example if we have loaded the two different pages from our api and each page contains 10 different items and then our remote key database table which we're going to create will have a 20 different entries in total for each unsplash image that we receive from our server now the first 10 images or the first 10 items from that first page will have the same values for the next and previous page keys because they are actually placed inside the same page and i'm not going to get any more into details because i don't want to confuse you anymore since we haven't even started with the practical examples so only when we start implementing a paging 3 library in our project only then you will understand all this theory which i was talking about now i highly suggest you to just go back and watch this first part of this series when you complete the whole tutorial series and if you're wondering why well because after you watch the whole tutorial series you will have the knowledge of how a paging 3 library is actually implemented and then you will understand this theory even better now that was just some brief introduction with a paging 3 library in general there are more things and more classes that i haven't mentioned here for our page 3 library and also i highly suggest you to just go and read the official android developers documentation about paging 3 library in general also one more important thing so for this project we are going to use the unsplash api which is basically one of the most popular apis for getting different kind of images so uh be sure to comment down below if you have any questions related to this tutorial series and from the next video we are going to finally start working on our project [Music] [Applause] [Music]

Channel: Stevdza-San

Views: 25,698

Keywords: paging 3, jetpack, compose, android, studio, app, kotlin, development, how to, guide, tutorial, ui, toolkit, unsplash, api, network, database, local, room, paginate, composable, offline, cache, caching, remote mediator, paging source, paging config, pager, implement, page, handle, automatically, endpoint, server, fetch, data, single, source, of truth, display, lazy column, modern, list, items, remote keys, previous, prev, next, key, table, request, response, postman, test, beautiful, design, clean architecture, mvvm, coroutines, flow

Id: 2Tj0LO5L2Dk

Length: 17min 25sec (1045 seconds)

Published: Tue Jan 04 2022