How to Implement a Pull-to-Refresh LazyColumn with Material3 in Android Studio

hey guys and welcome back to a new jetpack compos tutorial in this tutorial I will show you how you can Implement a pull to refresh mechanism in your app so very often we have a list of data and when we pull down we would like to refresh that data and reload it from the API or database or whatever you're using so if I leave this here you can see we see this little loading bubble and after a little delay the list will reload in this case it's really just an a sample list but I will show you how you can really react to these refresh events how you can then also refresh data from the API at least where you would need to put the API request and also how you can add a button to fors refresh without needing to uh pull down and in the past I've already done a video about that with the old accompan library but that Sly get deprecated pretty quickly so here you have an update with the official composer version of implementing this because I think compos really did not solve this in in a very intuitive way here a video so you can understand how this works the first thing you need to make sure if if you are in an empty Andro project is to dive into your buildr app file and update this composed B version to yeah ideally the same one but at least this version since um as of now with Android Studio Hedgehog the uh default version does not support this pull to refresh composable that we need here if you sync this then you are good to go and you can pretty much just go to your root package and create a pool to refresh a column that is what we will build here since usually if you have a pull to refresh gesture then you want to have that together with a lazy column not always but in most cases so I just want to have a generic container which abstracts out all the functionality we don't need when we want to use such a pull to refresh gesture in a list so we want to have this pull to refresh lazy column and this is a generic function which takes into Ty T which is the type of items we have in the list we show this lazy column so items is a list of T and oops each item has some kind of composable content that we would like to show so just a composable Lambda each item actually not each item but the whole list has a state whether it's currently refreshing or not so whether to show this loading indicator or not we want to have a Lambda on refresh that gets triggered when we are actually refreshing so that would be the Lambda we would or remake our API qu or so we'd like to be able to pass in an optional modifier modifier like this and we would like to be able to pass in a lazy list state from the outside which is the default Remember Las list state so just if you would like to pass some state to the laser column we want to be able to do that and the first thing we need is a pull to refresh State pull to refresh so just like uh when creating a lazy column we can also create such a pull to refresh state that lets us control or pull to refresh configuration kind of so remember pull to refresh State we go I'll enter to opt into this experimental API and then we actually need need to put in our lazy column in a box composable or a column or any type of container pretty much because we need to connect this container of our lazy column with this pull to refresh State and we do this with a nested scroll action so we just um use this to to communicate the scroll information when we try to swipe down uh that the indicator is actually displayed at the right position that the animation properly plac for for that loading indicator and so on um for for all that we need this nested scroll connection luckily we don't need to create that on our own but rather refer to the nested scroll connection from our pull to refresh date and inside this box we can then create our lazy column so whoops what am I doing here here we have a lazy column here we' like to be able to pass in our lazy list State whoops lazy list State let's say we have some content padding of padding values ATP all these are of course values you could also easily provide from the outside um which you usually would want to keep flexible for a lazy column you could also want to pass in a modifier we say hey we actually want to fill the whole size of our screen at least of the parent composable and let's say we want to have some spacing between each item so vertical Arrangement is Arrangement that's spaced by ATP and then inside here we can Define which items our lazy column actually needs we do that with an items block make sure to use this overload that takes in a list since we have a list of items here so this function just Loops over all of our items gives us a reference to each item which we can then put in our content composable um actually didn't provide as a parameter here so let's put in t here since yeah depending on what kind of item type that is we might want to show different content and since you would like to have a generic pull to refresh lazy column that doesn't just work for one type of list we have a generic parameter that allows us to use this for any lazy column and so far we haven't used this pool to refresh state yet so we have assigned this to our nested scroll but we don't really have any mechanism that tells this pull to refresh state that we should really show this indicator when we're swiping and that happens below our lazy column with a so-called pull to refresh container that takes in our pull to refresh State and also lets us configure this a little bit more so for example the modifier is something we would want to override since we would like to align this in the top Center we just making sure that the indicator really displays at the top Center and not somewhere at the bottom or so and other than that you you could also change the indicator itself so if you have a custom indicator if you're not fine with the default from Android you can change this to your own composable you can change the shape of the indicator you can change the color um and yeah that's pretty much it okay so so far we've connected our pool to refresh state with our container and with our uh root composer with our box but as you can see what's currently missing is that we listen to this is refreshing Boolean since if this changes from false to true for example we would want to start a refresh for our lazy column if it switches from True to false we want to stop the refresh and also call this on refresh Lambda when we are actually refreshing and this modify actually also isn't used I want to use this here so we're fine with that so let's take a look how we now do what I just talked about if our pull to refresh state that is refreshing so the state just contains all the information we might want to know about when it's about pull to refresh so you also see the positional threshold the progress uh the vertical offset so if you might want to animate something else depending on how far the user swiped uh the indicator down then you can also listen to things like the vertical offset and perform some kind of other movement or so we really only care about is refreshing and refresh and start refresh so with these two functions we can do exactly what they say and is refreshing is just the Boolean State we can listen to when uh that actually changes so here if we have a launched effect block with a key of true so we just fire this launched effect block once but once every time this state changes since then this launch effect composable will um be put on our screen again and it will just run runs in that case we just call on refresh what we also need is another launch def block down here with our is refreshing Boolean since when that changes that is the Boolean we pass from the outside then we want to trigger the actual refresh so if is refreshing so if we change that from false to true then we want to use our pull to refresh State and start the refresh and otherwise we say pull to refresh State and refresh so that is how we really trigger these changes if the pull to refresh dat could change we could also pass it as a key here but since we initialized this directly inside the composer and don't allow to to pass this from the outside this can never change since it's a valve in here and now let's see how we can use this composable since that now contains all the functionality we need here in our surface let's just have a list of items equal to remember doesn't need to be compos dat really just a list of items a static list that we display here could be a list of 100 Items Map them to I don't know item and the corresponding number of that item we want to have a state is refreshing by remember mutable state State off false initially so this will just show when we are refreshing the list otherwise it will just be fult normally all that would be put in a view model of course uh but here for this simple tutorial let's put it in our UI and let's have a little cortin scope just to simulate our little Network call with a delay so we can say remember cortin scope and in here we can then have a box since in our UI we take a look here again we have our lazy column and at the bottom display a little button that can Force Trigger or refresh without us needing to swipe so this box as a modify of filx size and in here we first of all want to have our pull to refresh lazy column the items are our items we've created before the content now gives us a reference to each item which in this case is a string item title or so here we could just show a little text composable with this item title also maybe add some padding modifier. padding 16 DP or so I'll end to import that format this a little bit is refreshing is equal to our is refreshing State and when we are now refreshing so when we actually trigger the refresh then we want to launch our coroutine so normally you would again delegate this call to the view model which would then fire uh or fire the API call again which would reload that data but in this case let's just say this refreshing is now true then we delay this by let's say 3 seconds and then this refreshing is false this is really just the simulated API call and for as long as that API call takes we just leave it refreshing to true so as long as that yeah is actually going on we also show our indicator let's also quickly add our button down below here button onclick should now just set is refreshing to true we add a little text say refresh and by just switching this is refreshing state to true that will trigger our um launched effect block here since it's refreshing changed uh then it will check okay it's refreshing that's true so we start the refresh with our pulse refresh state that will change the is refreshing State our pull to refresh state so that's different Boolean which will then fire off the launched effect block and finally also this on refresh Lambda that will then just again trigger here set this refreshing to True again in this case it's already true so this line will not do anything but it will fire off our API call and then set it back to Falls afterwards so if we launch this hopefully that should work and you can see I apparently forgot to align this refresh button but that shouldn't keep us back from trying this out let's pull down you can see that's the indicator and it will show up for exactly 3 seconds and then disappear there we go if we click refresh then the same should happen and yes that's exactly the case if you would want to align this you could simply add a modifier here is modifier align whoops align bottom center like this and then it also jumps to the bottom so that's how you create a pull to refresh Gest in Jetpack compos natively without any accompan Library while compos is really great and it's also very easy to make mistakes with it thanks to all these complex effect handlers we can use thanks to all these performance hacks we often need to apply in order to make it run smoothly I've combined all these important and and crucial mistakes into one PDF which you can download for completely free by clicking the first link in the S description so check that out download it and happy learning other than that thanks so much for watching I will see you back in the next video have an amazing rest of your week bye-bye

Channel: Philipp Lackner

Views: 7,980

Keywords:

Id: e20DAyE0YsY

Length: 13min 17sec (797 seconds)

Published: Wed Mar 27 2024