Item Click LazyColumn/Row Navigate to new Screen - Android Jetpack Compose

hey guys and welcome back to new video in this video I'm going to show you how to handle click event listener on the items of lazy columns or lazy Rose or a lazy vertical or horizontal grid uh just like this I'm going to click on one of the items and using navigation to go to another screen and show the data in the new screen so it's a practical example of using navigation and lazy column or lazy row together uh you have watched all of these materials in my channel and now I'm going to show you a good example of this let's get started [Music] when I was showing you how to use lazy column and lazy row we created this application together but it doesn't have any click event this in it it's just a normal lazy column and I'm going to use this project this application so if you don't know how to use lazy column radio and you don't know how to use navigation you can find the link of them down below in the description and you stop uh watch them then come back here to be familiar with uh using them together and now uh I'm going to add some other stuff to this project to convert it to the first example that you saw okay we have to start with build.gradle by adding this dependency I will put it down below in the description as well remember if in the time that you are watching this video this uh Target SDK is on 33 change it to 34 and also the compile SDK the same then press the sync somewhere here on the top and after that you can use navigation okay let me close it and briefly I'm going to explain what do I have here here in the drawable folder I have added six photos and you can see one of them as example here in the package that holding the main activity I have created a new package called screens and I have added two uh experience one of them is detailed screen it doesn't have anything but I have sent some arrays to it the arrays that we have them in the main Activity one of them is array of images the other one area of names and the last one area of ingredients and I have passed them to the main screen here and also I have passed there in the detail screen but uh we don't have any layout here to use them for now and I'm going to build it in a while in the main screen I have a lazy column I passed the size of one of these arrays to this uh items function and in the return it will give me a the item index for each items and here it is and through this variable item index I have passed this return function to this new function and this new function is column item is layout of one of the single items as you can see here we have image then we have two texts and you can see them here we have a car inside the card we have a row we have an image and two text inside another column let me close this will be clearly video okay this is the whole design and the data are said on different items of this lazy color now we need to use navigation to go from one of the two from this screen to the new screen let's say I am going to main activity here after this arrays I'm going to create a Val calling it now controller equals to Remember map control then I need enough host I'm going to choose this one with the start destination if you use the second one you should write the start destination by your hand okay here I don't need this Builder the nav controller will be this snap controller the start destination will be a name and I'm going to write main screen okay here I need two composables for two screens one and the other one for the second SK each of them need a road equals to the same name with this third destination and equals to detail the screen okay here I'm going to pass this main screen and also I'm going to pass this nav controller to this function let's go to the main screen here in the construction of this function I'm going to write a comma and Here and Now controller okay here let me show you the example here on each item of this lazy column we have a car then we have image and text I'm going to manage the key Link Event listener on the card and then uh all over this card when we are clicking it will be applied but if I do it for one of the texts or for this image only when I'm clicking on the image or the text it will be executed so we are using it on the car here I'm going to write clickable and I have to pass this nav controller to this column item function as well so here comma nav controller equals to map controller and create parameter nav controller refactor here it is so in the clickable I'm going to use nav controller dot navigate then I need the road equals to detail the screen should be inside of the quotation okay the road detail the screen and I have to pass this item index to this screen as well and I told you this item is screen I saw the item index comes from these items so here a slash dollar sign item index uh for now we manage the clickable for the car and when we are clicking on the card this item index will be passed to the graph by this route and in the main activity in the graph we have to take this data okay so here a slash curly bracer and here I'm going to write index or item index whatever you want it's just the key the keyboard then here comma argument arguments list of inside of this list nav argument we need a name again it can be index and then the type which is equal to nav type integer type and here in the body of this composer I'm going to add foreign for the photos I'm passing this image ID Arc for the names these names and for the ingredients thank you so here image ID names ingredients and here for the item index I have to extract the data from the graph again here I have the return function value I'm going to write it uh so index dot arguments question mark dot get integer and index so the data is taken from the graph and passed to the detail screen now I have all of the required data here I have to design the layout and uh set the data on the elements let's start with having a column here the column needs a modifier Dot fill Max size then in the next line Dot padding of 20 DB importing the DP just like this inside of the column uh first before that let me add the vertical arrangement [Music] is faced by 20 DP that's better inside of the body of this column I need the Box fill Max with and the content alignment alignment Dot Center that's good because we want to have the image in the center of the skill and I'm going to add the image here paint resource here I have ID for the ID I am going to pass this photos item index null check and that's it for the content description I need a string type value so it can be names again item index and outside of this box in the body of the column I'm going to add two text it takes for the name names item index I'll check then comma font size 30 that SP importing SV comma font weight volt in the next line another takes ingredients item index font size maybe I don't know 80 dot SP and all set let's check it on emulate okay we have the layout clicking and we have the items let me add another thing to the layer after this content description here comma modifier Dot clip and rounded Corner shape and maybe 16 DPR rounded corner let me check it I want this corner to be round okay now I have rounded Corner shape on the images and it's good works perfect okay that was everything about this video and in the next videos I'm going to show you how to make nested lazy column or row or maybe handling sweep event listener sweep left and sweet right to add or delete one of the items of this uh play Zero lazy column and also handling long click on one of these items so if you like this video please give me a thumbs up for this and if you want to see the other videos please do subscribe right now and hit the Bell button to be aware about those new videos thank you for your support if you have any question any suggestion any requests for new videos write them down below in the comment box and I will be so happy to read and answer them thank you for your time have a good day have a good rest of the week and see you

Channel: MkrDeveloper

Views: 4,383

Keywords: lazy row/column item click + NAVIGATION in jetpack compose, lazy row/column item click + NAVIGATION in compose, lazy row/column item click + NAVIGATION in jetpack compose android studio, android jetpack compose lazy row/column item click + new screen, lazy row/column item click - Jetpack Compose - Android studio, lazy row/column item click - jetpack compose Android studio | Kotlin, Mkr Developer, mohsen mashkour, Jetpack compose mohsen mashkour, android jetpack compose, navigation

Id: LKPGeT43a68

Length: 17min 52sec (1072 seconds)

Published: Sat Sep 02 2023