Jetpack Compose Navigation Architecture Without Fragment?

hello guys welcome back in this tutorial compose tutorial we are going to learn about jetpack compose navigation we will navigate between composables only with no fragments and how to pass arguments between composables so without further ado let's get started so before we start we should add the dependence for the navigation component for this composables so we can navigate here to this build.gradle and we are going to paste inside here this implementation and i'm going to link the documentation down below so that you can go and copy this so let's just sync here build project and we can start so now we can collapse this and create here a new file so we are going to create here our screen so that we can navigate between these screens so we are going to call these screens so inside here we are going to create composables and this composable you are going to call this screen a and inside this screen a here we are going to create a surface and we can change the color this so that we can differentiate them we can start with the red here so we can try to fix the max size now inside here we are going to use a box inside this box here we are going to have a text simple text just here so we are going to call this and inside here we should create a button that is going to aid us for navigation so now we are done here by creating these screens so we can try here and duplicate these screens so that we can navigate between different screens so this one we're going to call this screen c and also we can change here a color to green so now we are done here creating our screens so we can start here navigating between these screens so we can go here to this main activity and inside here now we can start to navigate and in order to navigate we have to create a navigation controller so this is just like a steering wheel so in order to navigate between one screen to another screen this navigation controller is going to bring up those routes and it can specify that the direction which they are going and they are going to add this to the back stack and also it understand the state of this of this composable of each screen so in order to create this we have to create at the hierarchy where any other composables which you want it's can can easily access it and this is just the principle of state hosting where the states lies above the composables where other composables can easily access it and the grid candidate for this we are going to make it inside this compose navigation theme so we can create here and it's just easily so we are going to create a navigation host so we are going to create this navigation controller and we can use the remember remember navigation navigation controller so we are going to remember this navigation controller and inside here we can now create our navigation host so a navigation host is just like a link between the navigation controller and the navigation graph the navigation graph contains all of the composables and their destinations so in order to create this navigation host first we have to define a route and this route is just defining the destination of a certain composable so for example we have a screen a we can define the root and this root is just a string implementation so that it can give us this this destination so we can easily create any constant so for example here easily we can create this by using the object so we are going to create outside here the object and this object we are going to call it navigation root and inside here we are going to create three destinations the first destination is for screen is for screen a and it's just a normal string so for example here you can define any string which you want but for us we are going to go with the screen a so we can define here three other screens and here it's going to be screen b and here it's going to be screen c now we can create our navigation host and we can do that by creating outs down here so we can create a new composable and we can call this my navigation host and this navigation host here must get the navigation host controller so that it can easily navigate between these fragments so now in order to create that we have to create the the navigation we can use the navigation host so the navigation host composable so this navigation host here takes this navigation controller and the starting destination so this applies the principles of navigation that we should have fixed this effects the starting point so we can define here the start destination and here we can build our navigation graph so if you print ctrl q here you can see that provide in places in the composable hierarchy for self-contained navigation to occur so right now here we can provide the navigation host controller and now here we can define the starting destination so for us we are going to use this nav host the navigation route which we have defined above so that we can use it and this builder we are going to define this inside the the lambda function so we can use this trailing lambda syntax now inside here we have this navigation builder which we can use to build our navigation graph and in order to do that we can use this composable function which is going which is going to take up the route so as you can see this is going to add the composable it's going to add decomposable to the navigation graph builder so that we can create a navigation it takes up a route which is the string the arguments which we want to as a list of these named arguments and also we can pass in deep links and the decomposables so inside here for example now we can create our composable so we have to define first our root and here our root we can use the navigation the navigation root and define our root for example here we want to navigate it to screen to screen a now right now we are not going to pass in arguments so we are going to see this later so now we can pass in the content so inside here now we can call the composables and for example for our case here we have created the screen composables so we are going to pass in here screen a now in order to navigate we have to use this navigation controller in order to link up the button so that when we press the button we are going to navigate to screen b and right now we have not created that implementation and it is suggested that we use this navigation host controller and not creating here multiple instances of this controller in every composable so we can create this by using the callbacks so we can go here and specify the event for example here inside the screen we can provide here a a callback on navigation and this navigation is going to the type is going to be and return a unit so right now when this button is clicked we want to navigate so we can call this on on navigation so that we can navigate now we can try to change all of these screens here so now after refactoring these codes here we can try now to navigate to other screens now inside this here we can pass in here this the navigation host so we can use the trailing lambda syntax because we have only the lambda the lambda function as our parameter now inside here we can call the we can use the navigation controller to navigate to another to another composable and this is just easily so when we use this navigation host controller and we can navigate now to the to the second to the second screen and inside here now we can define we can define the root and we can use that nav root which we have defined above there to to navigate to a screen b so right now here we can easily navigate to this second screen so now let's create also other composables so we can try to duplicate this three times so we're going to navigate this one is going to be screen b so we have defined that the navigation root and here we can navigate this to screen c and this screen c we can try to navigate to screen a so now as you have seen here we are creating this composable which is going to add this composable to the navigation graph and after adding this route now we can navigate using this navigation controller here to navigate as you can see here if you press ctrl q this one is going to navigate to a root in the current navigation graph now inside here we can call this my navigation host my navigation host and pass that nav nerve controller so now we can try to launch our application and see how we are going to to move between these screens so now our app is launched but when we click this navigate we just get the same screen and this is because we have not changed we have used this screen a throughout here so we have to use here the screen b so we have forgot just to change this and here we have to use the screen c and let's rerun our application and see all again so now our app is launched and as we click here navigate it's going to take us to other screens now if we press this back button here we're going to navigate back but when we reach a here we are not going to quit and this is just going through and through because we have added multiple multiple items inside this back stack so these composables have been arranged in this backstack so we have to fix this by using the navigation options so if we jump inside here we can try to fix this by using this navigation options and this navigate controller has a function that is going to to provide us with navigation options builders which we can use to build these options in order to specify and if you know you have been used that the xml style we have a pop-up to function which is going to remove all of those composables which have been added inside this back stack so for example if we have a login ui that the user has logged in from the login flow inside to the dashboard flow now so we don't want that if a user clicks that the dashboard flow to lo to go back to that to that login flow and because the user has already been logged in and we can use that by using the pop up too and this one is going to limit us so it's going to pop off all of those composables which have been added inside the back stack as you can see here it's going to pop to a given destination before navigating so it's going to pop all non-matching destination from the back stack until this destination is found so inside here now we can provide the id if we are using fragments also with composables but right now we are just using composables we can specify a root and as a here our root we don't want that to navigate from screen a back to screen c and we can do that by using the the by providing here the navigation route we don't want here and also by default this one is going to include this screen a so we don't want to include also this so we want that if a user is at screen a and press a back stack it's going to to go back and quit the application and inside here now we can specify another variable which is called the inclusive and this inclusive is is a boolean function so we can specify for example by default it is first so it's going to include also so we are setting this to true and now let's try and rely on our application and see the output so now let's press this navigate button here multiple times and let's press this back button as you can see here we are navigating between these screens and if we reach this screen a and press the back button we are going to quit the application and because we have removed all of those composable inside the back stack now in order to pass in arguments we have been navigating without arguments and in most time in most cases we are going to need to pass in arguments so let's see how we can pass argument from one composable to another composable now in order to navigate from one composer to another composable the argument we have to specify the the argument inside the root and this works similar to just how deep links works so if you understand deep links in the xml style it's just similar so for demonstration purpose we're going to create here another variable which we are going to call this root with argument and now inside here we can use a string template to access our navigation route so we're going to use a screen b so we have to specify here a placeholder and this placeholder here is going to contain our key so this key we are going to call this argument so we are going to replace this argument here with those strings which we want to pass it and we have to modify that the navigation graph to understand that we have another navigation route so we are going to call this root with arguments so right now the the navigation graph understand that there is a a root which contains this argument here and now in order to navigate right now here we can just create the root and place in the the argument which you want to pass and now inside here now we can place our text which you want to pass so for now we can just specify hakuna matata and now in order to access this argument which we have passed inside here now if we come to this composer here and press ctrl q you can see we have this argument parameter here which contains a list and this list takes in the the named the named enough arguments so we can just specify here so as you can see here this is going to take up the arguments so let's pass in here arguments and this one is going to take a list of arguments so we're going to create here list off so we can define here multiple arguments which we can define inside here so we are going to use a list of arguments so inside here we are going to call the nav arguments function which contains which takes up the string and the navigation the navigation argument builder so this string which is called the name is like a key so which we have specified inside here we are going to specify it inside here so we have to pass in here argument and now we have this string builder now in order to access this variable here we have to use this navigation box stack entry and we can try to rename this and call it nav entry so now we can modify this screen b in order to take up that parameter so we are going to provide here a string and this string can be null so we are going to press here and i'll check and we are coming here inside and we're getting an error so we can use this screen inside here so now we can use that nav entry in order to retrieve that string which we have been creating and right now we're going to use this argument and we can use this get string and we can specify now the key which we have been defining there which is argument and now that screen can be used inside this screen b here so you can see now we can use that screen now let's try and rely on our application and see the output so let's press here navigate as now you can see we have passed this argument here hakuna matata and now we want to also pass in other variables now we have been creating just a string and there is just a way for example you can pass in a boolean so let's create here another text that can be displayed if this is going to be true so now let's jump inside here this screen c here so that we can create another variable so we are just going to call this visible and this is going to be of type boolean and we are adding a sf call because this object can be null and we are going to add here if statement that if this one is going to be visible we want to show this text as we are going to show another text and now we are done with this screen see let's jump inside main activity here in this screen screenc now we want to create another route with that argument so we can come here where we have specified this another route and create another variable and this one variable is going to be screen c and now we have to change this also to include that that's green c and we can change this argument name here to be visible and now inside here we want to navigate that from this screen b we want to navigate to green c with a certain argument so now we can just copy this here and inside this we can use a string template and paste in here our navigation route and also we can specify now that we want this to be false and now inside here our screen also we have to modify to use that root which we have specified here so we are going to use this root with argument c and inside here now we have to access that navigation back stack entry so we are just going to use this heat reference and we are going to get argument and right now we can use get boolean and then we are going to specify here which is going to be to be visible the key and also inside here we have to specify that this is going to have arguments and now this one is going to take up a list of arguments and inside here we can specify the key which is going to be visible and now inside here we have this navigation builder this nav argument builder so inside here we have a parameter which is called type so here we now we can specify the type which is going to be to be converted to to this and we have a boolean type and for the list of data types which are accepted here you can just go to the documentation and see so right now here we are passing this argument let's try and run our application and see the output now let's press this navigate button here as you can see now it's displaying this hakuna matata so guys this was the way which you can use to pass argument inside these composables so if you find this video helpful please don't forget to provide the like and subscribe for more videos you can check these other videos here see you there thank you

Channel: HoodLab

Views: 638

Rating: 5 out of 5

Keywords: jetpack compose, jetpack compose tutorial, android developers, jetpack compose android, android jetpack compose, jetpack compose navigation, jetpack compose navigation graph

Id: lkGPQjzTYuU

Length: 20min 22sec (1222 seconds)

Published: Sun Sep 12 2021