Do you want to learn how
to implement pagination with the Paging three library
in your Android Jetpack Compose app? Then stay tuned. Hey guys, my name is Yanneck Reiß. I hope you're doing well
and I welcome you to a new video in general
when loading data, you have, for example, one SQL query and load all your data
from your Android room database. However, if you have a large dataset
that can get quickly, very inefficient. One way to overcome
this problem is using pagination. With pagination. You don't load all your data at once,
but in smaller chunks. So for example,
you have thousand items in your database and you incrementally load your data
in steps of ten items, for example. That way
we can spare the user loading animations and so on and can directly show the data
to them. Paging three is Google's solution
for Android apps to implement pagination. While it is very handy
at the first glance, it can be a little bit overwhelming,
but no worries. In this video,
we'll take a look at a practical example where we take a look at the once out
loading screen. So where all the data is stored at once
and then we will see from the bottom up how we can use pagination
to improve this process. In Android Studio, we are here in the app
module, build Gradle file and as you can see we have two dependencies
that are important for page three. So at this point
I assume that you have successfully set up your project for Jetpack Compose,
and now if you want to use page three, you just have to include the runtime and also the paging composer dependency. Note that this is a release
candidate version but I use it here because it aligns together and previously
the paging compose dependency was still misaligned
with the version numbers of the runtime. So let's directly
look at a practical example here. We have an all articles Overview screen. So we have some kind of articles
that at some point came from a backend and got stored in our local Android Room
database to show all articles to the user. We now want to load those articles
from a database. We can also do that
for, for example, offline support. As you can see here
is this one shot approach. So all the articles get loaded at once and then we just show the articles
in a lazy column here and use the items here
from the lazy column scope. Finally we have a simple article item. Composable here
that just shows those articles. So how does one article
look like to set up a structure? This is a domain representation. And of course
we also have a database representation. And as you can see, very simple
and straightforward title abstract, which is just a short description of the article, content
and also so our final goal is now to stop loading all the data at once
and instead use pagination. We do that from a bottom up approach
and start with the data access object. So now inside the article, as you can see,
we still have the load all articles function
which is currently used by the current approach of loading data. And now, instead of retrieving
a list of article entities, we want to receive a so-called
paging source. So let's quickly replace that say here. Instead load all articles paged. For example,
and then we want to use a paging source. And here
we now need to put in a key and the value and the key represents
essentially the index of all data source. In our case, we have pages,
and those pages are stored by an ID, which is in our case an integer. So it's incremental. That means page one, page two and so on. So we use an integer and our value here is, of course, our article entity. Next up, as you can see where inside
the article is repository. And now there's nothing more to do
than replacing here the new function. And of course, here
we also want to return the paging source. And now we can also adapt this function
name here loads all articles paged for example, once again
and we are done for this part. So now that we migrated already the data
layer, let's proceed to the domain layer. And here actually comes the interesting
part of this whole process. We have here a use case that is called
get articles paged use case. And you can see we have here
the articles repository and now we want to write the function that returns a flow. But the flow is not directly
of our articles but of the paging data. And here we have
the domain representation of the article. And what this paging data represents
is essentially all the data that already got loaded
from our paging source. So to finally return this flow, we first need to create a new Pager. And inside we need a paging config. And this page in config
can be created by providing a page size and we can simply say page size ten. And we can also set a prefix distance. And this prefix distance is essentially
what gets loaded at the first occurrence
or retrieval of this source here. But don't get it wrong, it's
not about the page itself, how many pages
we are pre fetching, but about the items. So if you go inside here,
as you can see, the initial or default value here
for is the page size. Now let's say we want to load
20 items instead. And yeah, essentially we're good to go. Of course, you have also some more
configuration options here, like enabling place wallets, which is enabled by default and also the max size or jump threshold. Next up,
we need to provide our paging source, which we already tunneled fully data layer
to the optics repository. So we can now just say here articles
repository, we load all articles paste and now we just need to call here flow
and are already returning. Yeah. Paging data of article entities. But what we actually want to have here
is the domain representation. So let's quickly call here map
and what we now receive is as an input parameter the value which is of paging data. And now we can use a special function of this patient data
here called map and Insight. So once again, map and inside we can actually access the respective item here. So let's say article entity
and I have here a mapping function
that maps to the domain model and we are good to go. Next up,
we are inside the objects overview model. And here we just need to add introduce the use case we just created and then we can migrate
this little example here and we say articles page data, and then we access to the view use case
and additionally use the cached in function
to actually preserve the loaded data. And we need to put in here
the view model scope. So if a configuration
change of your application happens, for example,
through rotating the device, your last state of the paged
data will be preserved and it's not fetched
from its initial state again. So let's quickly also at the type here, you can see it's off the page data article and let's proceed to the last step,
converting the composable. So we are back in the objects
overview screen. Composable let's go and start converting this example to use pagination. And it's not that complicated. We can simply say here for this case
we don't need to state because it's only an example. So we can say articles, lazy paging items, and then we can access the view, model our flow, and then we say collect as lazy paging items, which comes from the page
and compiles dependency. So once again, let's add the type here
and now we can quickly migrate that. So let's also name
the two articles, lazy paging items, input and the variable here. And then can we can also up type here. And next up, we need to adapt the lazy column and here it gets a little bit weird,
but don't worry, because we now no longer directly insert items, but we use count and then access here the articles lazy page items with the item count. And next up, we need a key. And here we can once again access it. And you see the item key. And yeah, just insert our identifier here
so we can once again name that here. Also two article
and then the next thing you might also want to add is the content type. And here you can also use a little help
from this type here. So just say item content type and then you can just say for example,
articles. And yeah, the last thing we need to insert
here is the or create is the actual composable, which refers to the respective item. So here we just retrieve the article from the articles lazy page items and we can use an array accessor here
and say index. So as you can see,
this value here is none of blue. So let's say if this article is not now, we can simply show our article item
and are fine. And even if it's not worth much, here's our example. And you can see I can scroll and scroll
and the paging source automatically loads the for the pages. When it hits a threshold of items that are currently visible on the screen. So in this video,
we saw how we can use the paging through library in combination
with Android Room and Jetpack Compose. Are you interested in looking deeper to the Paging 3 library
to explore the capabilities? Did you already have a use case
for pagination in an Android app? And if so, did you use paging three
or another solution? Let me know in the comments. As always, I hope you had some takeaways
like the video. Subscribe to my YouTube channel, activate the notification
bell, and I hope to see you soon!
