Lazy Lists In Jetpack Compose - (Lazy Column, Row, Grid)

hello what is up everyone welcome back to a new video a new jitpack compos video in which we'll be creating three different types of lazy L jitpack compos the first one is the lazy row lazy common and lazy GD so let's see the three of them this is the laser row like this so it's a row of items that uh load in a lazy way and then the second one is the lazy colon so like this the this is a common of lazy items again that load when we scroll and last one is lazy grade so as you can see here we have a grade of course you can have as many uh items as you want in one row like three or four and uh you can also create a lazy vertical I mean horizontal why because this one is a vertical one but you can Al of course create a a horizontal one so before we get started I actually named my Instagram page and my YouTube channel to Android diffs Academy because I believe this name is more focused and is about about Android development and the Android ecosystem so uh you can check my Instagram page you can follow me where I I show you some really helpful tips underw tips and a new updates so first of all let's see what we need for this app uh we need this Library which is the compos navigation one to navigate because we have different screens to navigate between and then we need three images of course you'll find the link to this project in the description on GitHub and you can get this IM these images if you want or you can just use other images uh basically these images we have three different images in here and so I say let's get started on creating our home screen so in our main activity let's create some space like this and now let's create our home screen which is a composable fun home screen like this our home screen will only take a naig an host controller so to navigate to the auto screen so have host controller this one and of course we have a colon that includes that includes three buttons that has three buttons inside it so let's create the column we will need a modifier in this column to fill the max size so fill Max size and then just Center the content in the center of it so horizontal alignment center horizontally and vertical alignment center uh like this and then let's create our first button button uh I will write the on click uh like will be the last things right but inside our button we just have a text a normal text that says lazy lazy roll for the first one in my button and the on click I will navigate so now host controller. navigate to Lazy row screen this is the route and I'm going to create these after I just finished creating the buttons uh so this is the first button let's of course create some spacer here to have a little bit of space height let's say tot. DP import DP and just copy this and paste it basically three times like this so for the second button we'll navigate to the colum and this also will say common and then in the last button we navigate to the GD one GD as well here so grd and now in our surface in our own create function I'm going to create an instance of that nav controller so [Music] well host controller is [Music] remember nav host controller and then we create our nav host so nav host like this and of course this one is nav host controller we don't want graph but instead we want start destination in our case it's going to be home screen and let's create our composes or the screens that we want to navigate to Let's format this inside here the first one uh composable the route is going to be home screen of course and uh it is is our home screen that we've created let's pass this one and let's just copy this four four times like this and the second one is going to be the lazy roll screen so lazy roll screen right here as well laser [Music] screen and here lazy Colman [Music] screen last one is the lazy grid screen so lazy great screen Li great screen so uh now let's create first our item that we want because because uh these items here are a bunch of items inside the list of course just like recycl view from XML so let's create our data class and new C in data class and call it item our item is going to take a title and the image ID which is a draw R so image it is of type int so this is it for our item and then the list that we will display in our lazy lists I'm just going to paste it here it is there is no point of writing this but it's inside a component object to actually access it from the other screens and it's just a bunch of items that uh have different images and different names and now let's create our first one which is the laser all screen so let's create a new file for that laser nope not this let's just name this fun and it is a composable we can of course preview what we are doing so preview and show background is set that to true and do this so we could see but actually we can't see the preview because we have so let's just not even see the preview because we have those errors there and this is a function it needs these like this and inside here we'll create a laser row we don't want content instead we'll just need a modifier to fill the max size and then we want content padding so content padding padding values 16 DP so this is like the the padding between all the items is going to be uh not between all the items but from the edges you could say uh 16 DP let's create space here and now we need this function which is items in Index this one will pass our list so main activity do it items and this function will give us now the index and the items so the index and its item uh now I'm not going to create the item here but let's just create a a different function for that so composable fun I'm going to call it roll item and it will take the item so item item like this to how our item is going to look like so it's just a colon that has an image and a text very simple so just create that column and that we need a modifier uh modifier to give it of course a height so modify I mean the size height and the width so height for this is going to be 350 DP and the width is going to be 200. DP and then horizontal alignment to make things centered horizontally or the content centered horizontally and then uh of course let's create the image inside here image and the painter is going to be painter resource and it is item. image let's format this the content description is going to be item. title and then and the content scale is going to be crop you could could say in XML it was Center crop this is the equivalent to that this will need a modifier modifier dot fill Max width to fill all the width which is 3 350 DP and then the height is going to be smaller than that to have some space for the title so height is going to be what we have there but l so 300 DP because that one was 350 now down here I'm just going to create a little spacer between the the title in the image height is going to be 8. DP and then the text so text the text is going to be item. text and the font font weight font weight is going to be S bold like this so this is it actually for our row uh our lazy row now let's just remove this import I'm just going to copy this file for the other ones because basically they are almost the same with but first I need to call I need to call this one inside here row item I didn't call it and then pass in item let's create a space between all the items so basically this content padding is the space you could say it's open that padding from here but between the items we need to create that so the first one spacer WID is going to be 8. DP and the same after that so like this as I said I'm just going to copy this one for the other ones because they are the same with little differences so let's copy this one and then create our for now Colman Colman screen and let's copy its name from there so this is the name and then we'll replace this with a lazy Colman this one and uh basically we just need to rename this instead of Colman I mean roll we name it now Colman and call it from here so that we don't need space right here but actually here we won't have we will have height to have let's go to see that uh this spacer right here so uh from the bottom of each item will have some space and actually this the other things are going to be the same except for for the size so here our height is going to be 2 50 and uh we will fill the max width for this one we'll fill the max width and right here now again we'll fill the max width but this the height is going to be 200 DP so yes this is it actually for the lazy Colman and last one let's just again copy this one and paste it this one is going to be the lazy GD so let's just copy its name from here actually I don't have to pass anything to these functions I me to these screens yes and then in our lazy grid let's rename that and here as well name it grid and yes call this one here so let's create it now we don't want a lazy colon but instead a lazy vertical grid this one and uh we need to specify how many colums we want to have so colums so there are two types of colums I'm going to we're going to see both of them so let's start with the fixed one fixed let's say to two like this and we can't have padn values 16 DP that we can only have the vertical uh padding like this for a vertical grid and then for a horizontal grid we can only have horizontal if we have both of them it will work but it won't look like a lazy grid it will just look like a common so here we need to import this function and yes now in our item we're going to change the size so to the same height but for the width we we'll have 200 DP and in here we won't fill the max width but actually we will have a size now of 200. DP like this and then one thing I forgot is to clip these rounded Corners uh let's say 13. DP to have rounded Corners I'm not sure if I did it for the other ones I may have not done it yes I didn't so clip rounded corners shortt DP and here as well [Music] clip T do DP so yes I think this is it let's just run the app and see if everything runs all fine now here is the app let's check those here is our Lazy R it's working just fine as expected let's check our lazy common now as well our lazy common is just fine now the lazy Grid it's working fine as I said we have two types of uh we can specify two types of uh we don't need this space here but anyway we can specify two types of common so we have the fixed one that gives us a fixed number so let's for example say three and let's check our app here we have three items and to have space between them I just need to come to uh my common and down here I'm going to say padding vertical I mean horizontal actually not vertical so horizontal a. DP because I already have the vertical padding here so let's check that as you can see uh so we can specify as many items as we want but we have the other one which is the Adaptive One so actually we have three we have also fixed size but let's start now with the Adaptive One so this one actually adapts to the size of the screen and then we can specify a main size so for [Music] example and 60 DP so this is the main the minimum that this size can be so as you can see like this and the biggest this size becomes the list items we can have now only one item but if I say for example 160 I can have a lot more but this depends on the size of the device or the screen so the last one is the fixed size fixed size which of course have you can you can only have one fixed size so if I say uh 29. DP something like this and they run the app I think it didn't run not sure what's going on but let's rerun it as you can see the size is fixed but I don't think this one is really good I rather have the uh Adaptive One looks really fine so I could specify the main size could specify the main size like8 DP and this just adapts to the screen size and if you want to have fixed one you can just you can just use fixed like this and then have let's say two items like this so yes this is it actually for this video we just learned how we can create lazy grid and the lazy common and lazy row inj pal compose so this is it for this video thanks for watching leave a like if you find this helpful you subscribe and leave a comment if you have any question so see you in another video and bye

Channel: Ahmed Guedmioui

Views: 1,670

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: j88wrM4eRPs

Length: 18min 53sec (1133 seconds)

Published: Mon Nov 20 2023