How to Implement Pagination With Jetpack Compose

How to Implement Pagination With Jetpack Compose - Android Studio Tutorial

Рет қаралды 37,317

2 жыл бұрын

Very often, you get some large sets of data from a remote API and you don't want to fetch it all at once. Instead, you want to only load what the user needs to see. That's called pagination.
In this video you'll learn about my approach using Jetpack Compose.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/premium-courses...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/newsletter
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/philipplackner/Com...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/philipplackner
You like my free content? Here you can buy me a coffee:
www.buymeacoffee.com/philippl...

Пікірлер: 74

@Landofcoding Жыл бұрын

This video is helpful, not only for paging but it also teaches how to design a solution for a programming struggle.

@codinginflow 2 жыл бұрын

If you modify the items in that list you get a 2nd source of truth. Generally, all properties in your data class should be vals.

@JujareVinayak 2 жыл бұрын

I have stopped watching your videos because of Philipp🤣

@codinginflow 2 жыл бұрын

@@JujareVinayak I haven't made any new android tutorials in over a year

@JujareVinayak 2 жыл бұрын

@@codinginflow Why why why?? I see only podcasts. We need your videos back. You were my first tutor.

@amitmondal7427 2 жыл бұрын

@@codinginflow I think, You should start again.

@jaloliddinabdullaev2310 10 ай бұрын

You should come back! You were good instructor and explain everything in detail, I really love your videos@@codinginflow

@top10channels31 2 жыл бұрын

Hey Philip can you make a video on multiple navhost I want to say that in main navhost I have 4 composable one of them have another navhost with bottombar and bottom baars tabs have separate navhost I think it's complex navigation but can you make it humble request

@TiagoDvl 2 жыл бұрын

Nice video, man. Well done!

@PhilippLackner 2 жыл бұрын

Glad you liked it!

@josephtimothy9546 2 жыл бұрын

Really thanks for all you do ...your channel has been really helpful in my learning, these contents have been the best really.....with that I'd like to ask I'd you could make maybe a video that dives into recyclerview and some of it features too like the multiple header and sticky header...Thank you

@TomBerghuis 2 жыл бұрын

I think you should only run the side effect viewModel.loadNextItems() within LaunchedEffect not in the composable function. So you would have val scrollState = rememberLazyListState() LaunchedEffect(scrollState){ (condition to check if scrolled to end) { viewModel.loadNextItems() } }

@PhilippLackner 2 жыл бұрын

That's a great way to handle this, I didn't think of that. Thanks!

@tomasskarnulis6005 8 ай бұрын

1 year after and still find same thought about pagger 3 - it's ridiculously hard to modifie after fetch, you stricten to use "page: Int", not that clear refresh... With this little update feels like this would be better custom solution, thanks to you 2 !

@arnobk 2 жыл бұрын

Please make a tutorial on implementing Material You with Jetpack Compose.

@liosha2007 2 жыл бұрын

Thanks a lot. It's exactly what I need 😊

@edwardjosephpegollo3411 2 жыл бұрын

Did try Paging 3 recently and I find it difficult to implement, tough to reflect LoadStates from its RemoteMediator in the data layer. Might just use this one. Big thanks!

@alicantipi4235 Жыл бұрын

hi Philipp, how would you test the viewmodel in this implementation? I wonder if it would be better to implement a Paginator, inject to the viewmodel, and access the methods. Any thoughts if that would be better? Thank you

@farid8902 2 жыл бұрын

Quality content thanx brother❤

@mustafaammar551 2 жыл бұрын

i wait for this video thank you bro you are the best👍👍👍

@PhilippLackner 2 жыл бұрын

Hope you enjoyed it!

@clamum9648 2 жыл бұрын

For some reason, I was under the impression that the current views that display lists of data (I'm coming from old Java/XML apps from like Android v6/7 days) did this loading of more items dynamically, already. Well that's a bummer lol. Thankfully my simple crappy app won't have to worry about that much data, but this is good stuff big 🐕

@sovrinfo 2 жыл бұрын

Thank you a lot!

@JohanAlbrectsen Жыл бұрын

Hi Phillip, love the video, saw it a couple times. Could you do a video on the RemoteMediator, that integrates Room?

@ntikomathaba2662 Жыл бұрын

Awesome video! Just one question, how do you update an item from a page source?

@tmjromao 2 жыл бұрын

Hello Philip, could you do video explaining how you would load static JSON content from resources folder? many thanks, regards.

@aloussase 4 ай бұрын

How would this work when returning a Flow from a room dao method?

@CitizenWarwick 2 жыл бұрын

Nice one Philip I've done custom pagination implementations before and they are not so straight forward, nice to see a working compose implementation, could it be easier with flows? Nice one! 🙏

@lukalukovic5082 2 жыл бұрын

Have you managed to get it to work with flows I'm really having trouble with that?

@jozefvivodik912 2 жыл бұрын

Hi Philip, why you use Interface for DefaultPaginator and not only fun ? thx

@ndonnayacynth1991 2 күн бұрын

The perfect one

@nourmorgan6751 Жыл бұрын

hi Philipp , can you make a series about the paging 3 library ? Thank you

@hpmusicbytes Жыл бұрын

Thats really awsome . I just wonder how can we include local database like room into it

@ricola4310 2 жыл бұрын

Hi I do have a question that's has nothing to do with the video but i don't know where to ask it... I put NoActionBar on my themes and when i run my app in an emulated devices no action bar are shown BUT when i install and run the app on my smartphone an action bar is still displaying why so?

@harishpadmanabh6857 4 ай бұрын

@phillipplackner How can use this paginator with a search query in an efficient way with debounce and on each like you mentioned in your implement search video?

@nikolozlatsabidze2196 2 жыл бұрын

Philipp I am interested in one case, so basically I want to return flow value from callback, but I cannot emit value because it's not suspend, so I came across of callbackflow/channelflow idea, I was interested if it is good to use them, because they are experimental, or do u have any better suggestions that I can use? thx!

@PhilippLackner 2 жыл бұрын

If you wanna transform a callback to a flow, using a callback flow makes sense :)

@rhen4610 Жыл бұрын

may I know where this custom paginator fall in MVVM architecture?

@damianviltres2202 2 жыл бұрын

Nice video, Can I paginate with this example from Room Database and Api as well ? Thanks

@PhilippLackner 2 жыл бұрын

Sure

@damianviltres2202 2 жыл бұрын

@@PhilippLackner It will be awesome if you make a video run this example with Room Database. I will be thankful grateful. Thank you again

@osisuper98 2 жыл бұрын

Is it okay to paginate data from our local database? I don't mean fetching data from an API now, just data already saved to our device.

@renzcarlosalanga1970 2 жыл бұрын

this is not good you are loading the items on a list. You just keep piling up the List eventually it will result in an oom. where is page dropping?

@dpkaalwyn5104 2 жыл бұрын

is there any way to do separator in compose paging

@favour2871 Жыл бұрын

thx

@athithyaparamesh8251 2 жыл бұрын

Please make a tutorial on Retrofit POST request. Or at lease please share some recourses. I'm stuck in this thing for days... 😟

@pierre.vieira 2 жыл бұрын

Can you make a video using paging-compose library?

@user-sl2ev5jj3p 10 ай бұрын

我想知道lazyColumn能不能反向滚动，就像Twitter的Home页面那样，是向下滚动的

@efeegbevwie9467 2 жыл бұрын

I had this problem with paging 3, I needed to display some graphics when the list was empty from the api. The hacky solution I used was to throw a custom exception in the RemoteDataSource and catch that exception in the UI layer. Of course Document your exceptions in your project ReadMe

@user-eb9tb1hu9q 9 ай бұрын

Maybe i am misunderstanding it, but this seems like a solution for a rare case where the API will send all the data, and the pagination happens locally. In real life usually the API sends just a small part and a pagenumber.

@ingressus17 6 ай бұрын

while i only watched only 1 time and I am a novice, my assumption is that the "whole local" data is only as an example, in reality the calls to a remote API with page numbers (limits, offsets etc) are happening in place of the .slice() function

@masti437 2 жыл бұрын

Hi Philipp ... I am a subscriber to a few of your courses on pl-coding ..... On course completion ... we get the certificate .... now to add that certificate to LinkedIn... LinkedIn requires an official LinkedIn page .... without it we cannot add it ... The Coding in flow author has it ... similarly can you also create an official page of pl-coding on LinkedIn It will help all your subscribers of your course. ...

@PhilippLackner 2 жыл бұрын

I do have a linkedin page, search for Philipp Lackner

@masti437 2 жыл бұрын

@@PhilippLackner ... Thank you for replying That is your personal page .... Official Page will be something like Pl-Coding .... :) ... Please have a look at this request .... You can take example of official page like "Coding in Flow" or "Code with Mosh" and its how courses are linked across linkdin :) Please check once .... B/w I love your teaching

@buszi_ 2 жыл бұрын

I feel like this is not really a Composable like approach, the way you fire the next request by calling the ViewModel during the composition is a huge side effect that should not be allowed

@PhilippLackner 2 жыл бұрын

I agree, someone here commented a better approach I didn't think of first. With that it's still a superior approach to pagination IMO :)

@John-qt6qk 2 жыл бұрын

Would be fun see a hide and show FB or Snackbar

@ho-thtmarketingonline711 Жыл бұрын

@user-xz9iv7st3p 7 ай бұрын

I found bug Philipp. When Data is lower than PageSize, Data is not loaded :(

@gulfappdeveloper2849 2 жыл бұрын

Pagination is difficult task

@mhdunknown Жыл бұрын

Not sure if it's just me, but this video doesn't have any audio.

@MetehanBOLAT 2 жыл бұрын

Please make a video about widgets (It doesn't have to be with compose :D ) There is very little content on this topic. It's hard to understand.

@harisai3580 2 жыл бұрын

What is pagination? Please explain briefly why we need this

@adrian110288 2 жыл бұрын

When you for example have a list of 100 items, but you only load first 20 and when you scroll the list to the bottom, you load the next 20

@amitmondal7427 2 жыл бұрын

But, I used Paging 3.

@nipunkumarit2168 2 жыл бұрын

You already have a pagination video in pokedex app, why you upload same thing again??

@PhilippLackner 2 жыл бұрын

You already watched the pokedex video, why you watch this again?

@nipunkumarit2168 2 жыл бұрын

@@PhilippLackner nice punch 😂

@XDgamer1 2 жыл бұрын

Recycler View is faster

@clamum9648 2 жыл бұрын

Does that take care of this dynamic list item loading? I was under the impression that the newer Android controls already did this (my app is super old and I'm rewriting it in Jetpack/Kotlin) but I'm pretty much a n00b so I could be wrong. Does that mean that for Jetpack you need to handle it yourself, like he's doing here (or use library)?