Full Guide to Lazy Grid in Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to a new video today i'm going to show you how you can implement a very cool grid of composables in jetpack compose and that is actually a lazy grid so that means that it only shows that only composes and shows these items that are actually on the screen so it won't process the others and it will then yep just start displaying the items as soon as we scroll and we'll start hiding those that leave the screen that is just the the concept of calling something a lazy we also have a lazy column and a lazy row as you probably know but this one will be a lazy vertical grid and it's actually super easy to implement that so let's jump into our studio just an empty japan composed project and see how that would work as i said it's called a lazy vertical grid which is this composable here that anybody of you can use and it takes on the one hand a cell's parameter on the other hand takes a content parameter if we use a laser column and then we know that coordinate parameter that's of course what we need to put into this laser column so how we want each item to look like basically however with the lazy vertical grid we of course need to give it some kind of information about how each grid cell looks like and how we want them to behave and that is what we do with this oops sales parameter in the end we have two options that we could choose from here on the one hand we have grid cells dot fixed so if we want to always have a fixed amount of columns in our grid so we could set this to for example five and you can see we get a bunch of errors here by the way we can press alt plus enter and add this experimental foundation api to main activity that's just annotation that yeah the google team says this is not fully stable yet it is experimental and it might change however um i think i've used this a year ago and yeah even then it had this annotation and we had to add this uh yeah google likes to add this and keep it for years so i think it's pretty pretty um pretty fine to use that in your projects however these grid cells here with this fixed class we have the option to give it a fixed count a fixed amount of uh columns so if we do it like this that would mean we would have five columns in our grid no matter how wide our grid actually is the alternative to this would be adaptive with adaptive we need to specify a minimum size and that will actually be a dp value so whatever value we enter here for example 100 dp will be taken as the size for our grid for so for each grid cell so if we do it this way then let's say we rotate our screen and we have more space so because our screen is of course wider in landscape mode so we could also fit in more grid cells and it will now make sure that it will at least make each cell 100 dp wide but it will make sure that it will actually fill the whole width of the grid so let's just um implement this here like the rest and then we will see the differences here in action which i think is better to understand how this works in here it's just like with the lazy column we just specify an item's block and here i'll just have 100 items and get reference to each index here using i and in the end you can also just take a look at the source code of the lazy vertical grid if we hold ctrl and click on this lazy vertical grid then you will see something pretty interesting and that is you can see um that is how it's implemented and all it does here is it distinguishes whether your cells parameter is actually fixed or adaptive and then it uses this fixed lazy grid which is another composable we can again hold ctrl and click on that we get to this composable and what do we see here well it's nothing else but a lazy column that just gets modified a little bit with some rows and some calculations and also some columns and some calculations so it's in the end just a lazy column that consists of rows with your composables and you could of course do the same on your own but the lazy vertical grid just takes away all this calculation from you so in here i would just like to have a simple box that centers the text we can pass a modifier of modifier yeah let's say we want to have an aspect ratio of one f so it's just a square let's give it some padding before of let's say 80p so we have a little bit of spacing between our items we can then say okay we might want to clip this to maybe a rounded corner shape of 5 db so we have 5 dp rounded corners and then let's give it a background color of color green then we can say we want to center the content using content alignment is alignment.center and we can open the content block of this box and then simply specify a text and we say item number i and that is now just how each item in our grid looks like it's the same as with a lazy column just that you now have to think in a grid style kind of so if we now actually launch this app here take a look here and wait until it is launched you can see now each item will have a minimum width of actually 100 dp might be wider here it will just figure out a nice width for each item so that these um perfectly fit into this into our width of our screen and if we now actually rotate our device then you can see the width of each item will actually stay exactly the same and that is in the end what adaptive does here if we go here and we change this back to fixed and we say we want five columns no matter what and we launch this then we see okay we have five columns but if we now rotate it you can see we still have five columns but now each item is actually bigger so depending on your use case you might want to either use fixed or adaptive view for the cell style and one more thing that might be interesting here to talk about is that you can also pass a state which is in the end a lazy list state as well so the same type of state we can pass to lazy column so we can say val state is remember lazy list state and then we can pass that here and with that we can just manipulate for example we could programmatically scroll to some kind of index of our list of our grid or we could simply pass an initial for initial first visible item index so if we do that and we say okay we actually set that to 99 which is the last index in our list and we launch our app then what we should see is okay we actually actually now scroll completely to the bottom of our grid and we can now scroll up you could of course also do that programmatically that you have a button and you click on that and then in that button on click you would say state dot animate scroll to item and you could say okay i now want to animate scrolling to index 99 or choose some other kind of index and to make sure that you don't miss the next video in this important android fundamentals playlist simply click here you

Channel: Philipp Lackner

Views: 21,402

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, jetpack compose, compose, grid, vertical grid, lazy, lazy column

Id: UhnTTk3cwc4

Length: 8min 6sec (486 seconds)

Published: Wed Jun 08 2022