Nested Navigation in Jetpack Compose

so before we start here to look at Nest navigation I have here a simple implementation of normal navigation which we usually use when we create application so you can get this inside the link the description box below so you can just long the project and get started so when you look around here we have our navigation and also we have different screens so inside here our screen we have the first uh package that is for authentication and also we have the home so inside here our navigation we can navigate from one screen to another screen as you can see we have created here composable by using the navigation host so if this code is confusing to you please check the video about navigation inside my Jaa compose playlist so here we have our composable that we can navigate from different screens and we use this destination here as our route path which we can use here as you can see we have our composes now we can use this route to navigate from one screen to another screen and basically inside here our out we have different types of screens which you can use to navigate but this is just for demonstration purposes you can have a complex screen which we can use okay so when you run the application you're going to get a layout like this one here which is just really simple so that we can understand how we can make Nest navigation so we have here three buttons that are going to navigate us to different types of uh places so for example here we can click sign up and this one is going to navigate us to sign up page and basically we can click here to log in directly to our home screen we can click back here to navigate back to our login screen we can click this forgot password and we can navigate to a place where we have forgotten our password now let's just click here to login and basically we are navigated to our home screen now there are major problems with this type of architecture so you can see here now we have to navigate back to our to our login screen as we have navigated back from the home screen so we are going to f fix this also and see how we can implement this also then when we click here you can see we have multiple items inside the back stack that we are not quitting our application so until we reach here we can quit our application so we're going to see how we can fix this and how to make the next navigation okay so for this case let's create here inside our navigation let's create a new file and let's call this navigation let's call this instead navigation now here let's create a composable similar what we have here you can see inside here our navigation we have this uh navigation composable so we're going to create something similar like that okay so the first parameter which we want here is the nav controller so we can call this nav controller and here we want to get the nav host controller and we can check here is logged in which is just the bullion so similar to what we had before okay so the next case here is to create our navigation host so we can call here our enough host now let's pass in here our enough controller and also pass in here pass destination and pass in here our composable okay so in order to create a nested navigation we have to create something called navigation graphs so this graph point to different type of navigations which we have so we can have multiple navigation in one graph for example our authentication and also we have our home so we have two diff separate navigation path is which we can follow so for this case let's come below here and create simple extension function let's call this navigation graph Builder and for example we can call this out this is just for authentication one parameters which which we can pass here is the navigation uh controller so we can call here na controller okay so here we have one composable that is called navigation so this navigation here takes in the start destination for this particular type of destination and also here we can pass in the route how do we want to name this whenever we want to navigate to this particular so for case for example we can call this out graph in order to navigate here now here we have the navigation graph Builder we can pass in the composable now to pass in here the start destination we have to call so you can see inside our navigation we have these destinations which we have been defining here so you can see when you use normally we can start here with our start destination like a login screen for example or we can start from our home screen so for our case let's just create here our destination and called here our home screen name so this is just the start uh sorry so the start destination here is supposed to be the login screen that is going to be the login screen. name and because we are inside here our authentication graph now similarly when we come here to our navigation now we can just copy this you can see we have here our login screen we have our forgot password and our sign up now we can just clean up our code and press crl X or let's just press contrl C and paste it here so you can see nothing has changed here however we have just navigated to this function here by using our authentication so when you define this navigation here basically you are constructing a navigation graph so you can see a nested navigation graph so we have here our login that is just our authentication and whenever we enter this graph here we want to start to our login screen first so that we can navigate get so if you have a different type of a screen to show first then you can do that okay so one thing here you can see we are navigating to this destination here to our home screen directly from here but we're going to fix this because we're going to create the second navigation graph so let's create here let's use our navigation graph Builder now we can just call this our home and basically also we want to pass in here on na controller now we can create our nav ation and pass in similarly here the start destination and for this case we can call here destination name so we want to start from this and give it a route now for our route we can just call this home R okay so similarly here let's go below because inside our home screen we have this three screens here let's press contrl C and go here inside our navigation and past this screens here so you can see we have here our screens now everything is looking perfectly and well organized now one thing you can see whenever we did this we navigated from our for example inside here we navigated from our signup page directly to our home screen and we passed in here our home screen because our home screen is available here so you can see it has a route here and we can navigate it here so similarly here we can just leave as it is now and it will work work fine but this is going to be confusing so we want to not navigate from the authentication directly here to this screen for example the home screen now is in a different graph so what we want to do is we navigate to our graph so our graph is going to figure out hey this is my start destination so I can come here because we can change our start destination to be for example here screen one so for our case is St here of navigate to home screen directly we can just call here change this and now we have a route and you can see we have here the home graph has the route now we can change this to home graph let's press contrl C and change this so here similarly we are passing here our sign up page so we can just pass in here to be the route home graph also here inside our login screen we are navigating to the home screen so we can change this also there out to be home graph so now we can just navigate directly there now you can see we are going to TD up so here we have our navigation host now now we want to pass in here the start destination so what is our start destination or our case here we don't want to pass in a single composable directly but our start destination is going to be a graph so for example we have specified this route here and also we have specified this route here so for a case we can pass in here for example home graph be our start destination and now we can just call here our navigation controller sorry we can call here our authentication and we want to pass in here the na controller for the authentication and the next case here we can pass in the authentication the second navigation graph that is just for home screen so we can call here home screen and pass in here our navigation controller directly okay so one thing we use here is logged in so we can check here if our application our user is actually logged in and then we can just navigate them directly to home screen so we had here a simple logic that is going to check for this case so we can press here contrl C so you can have a different type of logic here but for Simplicity just I have checked this so here we are using a l the effect to check if this user is going to be logged in by using this because this is going to be a side effect and we don't want to be recomposed every time we navigate from one screen to another screen because this is going to be navigating us back to our authentication screen so we don't want this to be executed multiple times during composition but we want this to be executed only a single time whenever we okay so for this case instead of navigating directly to the login screen so here we we can specify our destination so for example here we can just call our out graph so the out graph is going to figure out hey my destination is loging screen so I'm going to show this first you can see as simple as that you have organized your code you can just go directly to our main activity you can see inside here main activity we call this navigation here so instead let's call here nested navigation and everything is looking perfectly let's try to run application and see the changes we have made it's changed visually but we have changed our code structure for us so you can see we have here login screen loaded because we have passed here for directly so we have to first start from our login screen now when you click here login screen we are directly going to our home screen and everything is working perfectly now let's click here to navigate to our home screen you can see that we are navigating to screen one here now whenever we click here back and we to go back to our login screen then to show this because we don't want to add this for example a user has already logged in so why do you send them back to our login screen so we want whenever we log in and reach to a home screen here whenever we click this back button we want to quit our application and not go back to our our login screen for this case so we have to navigate back and quit our application so we can fix this with a simple extension function here our nested navigation and here let's create a simple extension function below so we can call here our navigation controller and here we want to call this navigate I want to navigate to a single top and here we can pass in a route and this is just going to be of type of string okay so we can call the Navigator as normal which we used and pass in here the route which we are going to have now we want to do one thing we want to pop up our back stack with everything until the start destination so here we can use here now our call our graph and what we want to do is to call find the start destination and basically for this case we are going to get the destination for our start so as you can see our destination is not our start destination here directly when you go to our navigation is actually not a composable but it's actually a navigation graph so by using this logic here we can easily find the start destination and we can call here do ID to get the ID now for this case we can pop up to H this start destination now we can call here save a state and we can make this to be true and save the state of a certain composable if you have and call here launch single top make it true so that we cannot create multiple instance of that particular screen inside our back stack so when we call launch single top then we going to only have one instance of this also here we can call here our restore State and make it to be true so now instead of calling navigate directly here we can call our navigate to single top so basically here we can do one thing you can press control shift and ALT all together down and click in order to create multiple cures here or let's just click all of the places where we have used this okay so we have multiple cures and we can easily now CH our Cod so we can call here our navigate to single top because this is just an extension function and we can easily just change it press Escape here you have now your single curer now you can see we have changed everything to our single top also here we can just change this navigate to single top and as that you have our your code well organized and well managed now okay now let's see if this makes any difference let's try to run our application and see the changes okay now here we are inside our login screen and you can see now we are just navigating also similarly now let's click here navigate back now we are inside our home screen and when we click here now we are just quitting our application Direct directly so let's click here and you can see now we can click here for get password navigating back to our home screen now let's just click here navigate to screen to and let's click back and we are inside our home screen and we are quitting application so everything is working as a CH so guys let's leave it in this video so if you find any value to this video please don't forget to provide a like And subscribe for more videos so if you want to learn more about jaac on pose and Android in general you can check out the courses in UD so the link are provided in the description box below so for now let's leave it here see you in the next video

Channel: HoodLab

Views: 975

Keywords: nested navigation in jetpack compose, nested navigation, navigation, how to do nested navigation in jetpack compose;, jetpack compose, kotlin

Id: M0qQ8-_EVLY

Length: 15min 38sec (938 seconds)

Published: Sun Nov 26 2023