Nested Navigation with Bottom Bar and Jetpack Compose | Android Studio Tutorial

hello there and welcome back to my new video so in this video i am going to show you how to implement a bottom bar with a nested navigation in your application using a jetpack compose now i have received many messages regarding these topics so that's why i have decided to create this video anyway at the moment of recording this video in the official android developers documentation there is no any specific documentation that describes how to achieve this specific scenario and i suppose that there are actually multiple ways of achieving this anyhow i have already prepared the one project that i want to share with you now before i get into that i want to open up this um sketch which i have prepared so you can see how our navigation graph or the actual navigation in this project will actually work so we're going to have a one roof navigation graph and this root navigation graph will actually contain three different navigation graphs now the first two graphs are authentication and the whole navigation graph now each one of those contain three different screens and this second home navigation graph will actually contain a bottom navigation so each one of those screens will represent an item in a bottom bar and this third nested navigation is called the details it contains only two screens and we will be able to access this nest navigation only from our home screen for example okay so that's how i have prepared this example project now let me show you the actual project itself so let's run this application one more time so for the demonstration purposes i have a simplified this project so don't worry about the actual ui so when we launch our application the first graph navigation graph which we're going to see will be this authentication graph so this first screen is of course a login screen and we also have those two text elements which will lead us to each one of those screens from our authentication graph for example a signup screen and this forgot password screen as well now this is a one navigation graph inside our root navigation graph and once i click on this login text then we're going to open up our home navigation graph so let's do that and as you can see in our home navigation graph we can see the actual bottom bar so our bottom bar contains three different screens for now there we go and from our home screen we will be able to access our nested navigation graph called the details graph so let's click on that and there we go so now we have our details navigation graph which contains this information screen and this overview screen as well okay so there you go now we can access this nested navigation graph and all other navigation graphs very easily okay so now that you have seen the actual navigation graph a sketch and our application now i'm going to go through this project itself and explain you how this actually works so the first thing let's start with our main activity so our main activity contains this root navigation graph in which we have passed the nav controller okay so this is our route navigation graph it contains one nav host in which we have specified that a nav controller which we have passed from our main activity the star destination of this route navigation graph is our authentication graph and of course here we have authentication navigation graph and the one screen a home screen now this is our graph object it basically contains the roots of each and every navigation graph which we have in our application now you can see that here i have passed this a nav controller only to our authentication navigation graph because our home screen or home route contains a different navigation graph so let's first open up this authentication navigation graph so there you go this navigation graph contains this navigation function which will basically construct a nested navigation graph this is actually an extension function on a nav graph builder which is the actual scope of our nav host there you go it of course accepts the one f controller uh the route is uh the graph authentication the star destination in our authentication graph is a authentication screen login so as you can see here we have a three different screens or three different composables so a login screen then a sign up screen and um forgot password screen as well down below we have also won a seal class which represents our authentication screen graph so our login sign up and forgot there we go um let me just go back here and the second screen here which we have in our root navigation is our home screen so this home screen represents our home graph and let's open up that home screen so here we are using a scaffold and inside the scaffold in the content lamp of this scaffold i have specified a home navigation graph as you can see here our home screen contains a separate navigation controller which we are passing to our home nav graph and our home nav graph actually contains another a nav host okay so for each nav host we need a separate nav controller and if you check the official developer's documentation then you're going to see that each nav controller must be associated with a single nav host composable so that's why our home navigation graph contains a whole separate navigation controller which we are passing to our home nav graph and as you can see our nav host contains a route which is a graph home route the star destination is our home screen from our bottom bar and here we have a three different composables for each and every screen okay now our home screen actually contains that bottom bar so down below i have also implemented this bottom bar so you can see i have created a list of three different bottom bar screens so each and every bottom bar screen basically contains uh a unique route the title and the icon so there you go simple as that and down below for each one of those items from this list i'm creating a new item for our bottom navigation so there you go so don't worry the source code of this project will be available for you to check it out in the video description as you can see our home navigation graph contains those three screens but also it contains a nested navigation graph called the details nav graph and that nested navigation graph contains two different screens information and the overview okay so there you go that's how it works and one more important thing here to note so whenever we navigate from our home screen to our details uh nasa navigation then we are programmatically hiding our bottom bar okay because this bottom bar is inside our home screen and inside our home screen we also have that details navigation graph so that's why we need to create the logic to actually hide our bottom bar whenever we navigate to our details screen i have created here the logic so so here we are displaying our bottom navigation only if our current destinations are a bottom bar destinations which are actually those three home profile and settings so only if we are currently at those three destinations only then we are going to show and display this bottom navigation otherwise that the bottom bar will be hidden and that's basically how we have managed to implement our bottom bar with a nest navigation i hope that this video will help a lot of developers and also once again the source code of this project will be available down below in the video description so nowhere is there and also one more important thing so be sure to comment down below and like this video if you find it helpful of course and see you next one [Music]

Channel: Stevdza-San

Views: 35,964

Keywords: nested, navigation, bottom, bar, bottom bar, jetpack, compose, composable, fun, how to, guide, tutorial, android, studio, app, kotlin, nav graph, destination, nav host, nav controller, single, multiple, hide, display, show, remove, root, route, graph

Id: gNzPGI9goU0

Length: 8min 10sec (490 seconds)

Published: Sun Jun 12 2022