24 - NAVIGATION with ARGUMENTS - Android Jetpack Compose

hello everyone and welcome back to new video today I will show you how to navigate between different screens in Jetpack compose but with arguments I mean you can take data from one screen and display it in another screen and I will show you how to do it just like this here I have the first screen which is the home screen I have two text Fields I can hear write a screen type data like test and integer type data as h and by pressing this button the data will uh transfer to the details screen and will be shown here in the two texts let's check it [Music] first of all here in the build.gradle I have this dependency for the navigation and remember after adding it if the target SDK is 33 change it to 34 and the compile SDK as well from 33 to 34 then sync it here I have two screens in the first actually I have created two files here the home screen and the detailed screen in the first one in the home screen I have created a composable function I have a column inside it I have a text just like here a text then a spacer then the first text field then the second text field and at the end I have the button here you can see it and here for the Oinky lick of this button for now I don't have any logic and here I have two variables name value and H value and the value of the first text field will go to this name value and the value of the second text field will go to this age value and in the details screen I have just three texts first one to show we are in the details screen and the second one to display the name and the third one to display the h and now let's add another cutlane file and name it nav graph here I need another composable function and I'm going to name it now let's close this go to the main activity and call nav here that's everything for the main activity and we don't need anything extra let's go to the navgraph uh here first we have to write some code to navigate between these two screens uh for this I need a value I am going to cut it now controller equals to remember nav controller then I need a nav host and the second one which has the Str start destination I'm going to choose this one we don't need this Builder and here opening the bracket this snap controller will be called here and here I need a keyboard I'm going to write home that's it here I need a composable wheat a small C in the beginning not just like this and duplicate it here I'm going to pass the root equals to his home so from this you will be redirected to this composable and inside it I'm going to write home screen and here will be the root equals to details and details screen here in the details the skin I have passed these two variables so here we have them okay in the home screen uh we have to pass the snap controller because we need it there and I'm going to add it to the arguments of this home screen here we have it okay first of all we need to take the data from the user and pass it to the graph and then from the giraffe we have to pass it to the details screen and display it there in the detailed screen we have everything done so the data already is passed here through these variables and is set on the text so we don't need to do anything else inside the details screen let's start from the home screen by button click we want to use the nav controller dot navigate and then here we have to pass the route the route will be details till here we had everything in the last video and if I'm running the application now by pressing this button we can go from this first screen to the second screen but without any data if I want to pass the data I have to write here a slash then I have to write which kind of data I'm going to pass where is the data so here I'm going to write dollar sign then name value for now let's just pass this or maybe let's pass the second one ask slash and the dollar sign and age value so we took the data and we passed it through the root to the graph and let's go to the graph here and here we have two passage after this details as well this thing I'm going to open a bracket and writing a keyword for this and the keyword can be name closing the bracket another is Slash and the same for the age okay then the next thing that we have here let me pass them to the next line I'm writing a comma and then arguments list of and then here we have to declare that what is the type of the data that we are passing so never [Music] argument and here I need a bracket as well here has the name I'm going to pass this keyword [Music] and then here the type equals to nav type A String type and that's it for this first value and then inside this list we need to duplicate this part of code writing a comma here now argument the name should be eight just like this and the type is integer okay I think everything is okay so the next thing is to take the data from the root and pass it into the screen the second screen so here I can use the eat as the variable the return of this function but I'm going to rename it to back stack entry this is the default name that the Android developers website is using so here back is like entry dot arguments then question mark dot get a string and I'm going to pass the keyboard the same for the h like it's like entry dot arguments question mark dot get integer then age let's check it on the emulator okay here we are in the home screen I'm passing random data and pressing the past data and here I have it your name is mkr and your AGS one two three okay uh now let me show you another thing I'm going to pass something here as the data for the name the same the test and I'm not going to pass anything for the age pressing the past data and the app crash here I have to tell you that we have two types of data that we are passing between the screens first one is the required data and the second type is the optional data this one was the required data and we have to provide a type of data here in the application but if you want to give this option to the user that the user can leave some of the fields empty you have to use optional type of passing data let me show you how to do this in the detailed screen everything will remain unchanged in the graph and in the home screen we have to do some changes let's start from the home screen here in the in this line we have to change some of the post I'm going to duplicate this and comment this part uh later if you go to my GitHub page to the code you can see the differences here I'm going to delete this this slash then question mark and then I'm going to write name equals to name value deleting this slash and writing and and later H equals to age value the same in the nav graph here we have the same almost and here also we have to change it question mark then name equals and here we have them okay the next thing that we should add here after the string type I'm going to maybe write a default value for it and the default value can be a string type either empty or maybe user so if I write it like that then we don't pass anything for the name in the destination screen the user will be displayed and I can copy this for this and instead of the user I can pass zero there is another way as well instead of this default value I can write new level equals to true and that's it let's check it again okay here I have everything and without entering any data I'm going to pass later and you can see here your age is zero because you had this default value here but we didn't pass anything for the name and it's new level so it's empty and I can't pass a random number for the age and it will be displayed here but for the name nothing and it can be reverse subscribe please and I'm going to skip passing anything for the age pressing past data here we have the Subscribe and here we have zero and that was everything for this video in the next videos I'm going to show you how to use nested navigation we can have like parents screens and from each band screen we can go to branches sub Branch screens and I'm going to show you how to manage them so if you want to see those videos please hit the Subscribe button and the bell button right now to be aware about those videos If you like this video please give me a thumbs up to give me energy and also to help this video be watched by more people if you have any suggestion any question write them down for me and I will be so happy to read and answer them thank you for your time have a good day bye

Channel: MkrDeveloper

Views: 3,563

Keywords: NAVIGATION with arguments in jetpack compose, NAVIGATION with arguments in compose, NAVIGATION with arguments in jetpack compose android studio, android jetpack compose NAVIGATION with arguments, optional arguments - Jetpack Compose - Android studio, required arguments - jetpack compose Android studio | Kotlin, NAVIGATION with arguments jetpack tutorial, jetpack compose, Mkr Developer, mohsen mashkour, Jetpack compose mohsen mashkour, android jetpack compose, Kotlin

Id: uc7mF0HSnng

Length: 17min 35sec (1055 seconds)

Published: Sat Aug 26 2023