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

[@Gtry-pc1bg]

Omygod, You really explain my number 1 problem for the last 2 months. You really are great

[@StevdzaSan]

Thanks buddy

[@maciejjaremowicz2646]

@@StevdzaSansame for me, great video man

[@milanglisic7663]

Pa ti si nas! Auu jebote, najaci smo. Hvala ti na ovome tutorijalu. Samo napred!

[@AiGirlzzandBoyzz]

Thank you so much , I've been stuck in this part for over a week and finally I found your video .

[@AliAhmad-dev]

This was a problem for me, but now it is easy. Thank you

[@dusanperic]

Hvala brate, baš mi je ovo trebalo, imaš odlične videe o Jetpacku, samo tako nastavi!

[@shubhanshusharma5372]

I dont comment usuallly but this video help me in my many projects i always watch this video and your code . Thanks for this video

[@rahulchandrabhan]

such a perfect playlist for understanding jetpack compose navigation. Thank You

[@wuguo755]

Great Job! Thank you very much! I am your student for learning jetpack compose from the beginning! Obvious and beneficial explanation. Expect more videos in the future!

[@akpapps5988]

How to implement a logout from the profile in the bottom nav screen? It has a different controller. And auth in other controller. Then how to navigate?

[@mauliktogadiya2500]

same question..found anything???

[@fi8er1]

@@mauliktogadiya2500 ??

[@ArturoDevA]

solutions is use a lamdda , from HomeScreen to RootNavGraph, works perfect

[@nuralijakipov3585]

@@mauliktogadiya2500 did you fing the answer to this question?

[@caniggiasyabil470]

you could achieve such functionality much easier with scaffold and tabrow. The question is how to do it on xml? nice video btw

[@mraja6654]

Really awesome 🎉

[@maqcoders8148]

Thanks for making this video, it means a lot to us. I was looking for the same scenario but found no solution in XML. can you please make a video for the same using XML? it will be very helpful for us. BTW You did a great job and I appreciate this. Thank You!

[@zakariajawas]

This is very helpful, but i have a question how to go from Home to Auth again incase of Logout ?

[@mungai7534]

Was just looking for this, thanks!

[@satnamsingh-qh2si]

Great video for navigation. Can you make videos on how to scope viewmodels to composable in jetpack compose projects?

[@thatcrazymf7658]

Hey Stev, you really need to create a video about a nested navigation drawer!

[@frax84]

I've been one of the "many messages asked me for". Thank you very much for this nice feedback :)

[@StevdzaSan]

Glad to help buddy 👍

[@vitalijuskolinko9011]

Thanks a lot! I am gonna try to implement such navigation for my project in the near future. Your video gonna help me a lot )

[@StevdzaSan]

I'm counting on that! 🙌

[@AndrewDChristie]

Thanks!

[@StevdzaSan]

Thanks Andrew!

[@albertomunoz4469]

Thanks a lot for all the series on Compose navigation! I have a question, if i want to navigate back from the nested NavHost / NavController with the Bottom Bar to the previous (back to the NavHost / NavController for the Login) , but not using the back hard button but with a clickable in the "HOME" Text for example, how would it be the code inside this clickable { ... } ? I still wasn't able to make it work. Great work and thanks again!

[@albertomunoz4469]

I'm passing the parent NavHostController to the nested one and used it to navigate + popUp back. That made the trick. Then passed a "onNavigateBack" lambda and that feels more clean now.

[@gtry-in8kc]

Hello thats what Im trying to solve now. So you mean is from RootNavGraph you will pass the NavController to the HomeScreen?

[@DavidBrunk-l9i]

how would you then navigate back to the auth graph, say for a logout button that was pressed in the home graph?

[@soheiboz522]

did find the solution ?

[@ArturoDevA]

@@soheiboz522 solutions is use a lamdda , from HomeScreen to RootNavGraph, works perfect

[@trekimpossible2850]

Since HomeNavGraph is a nested navigation, it could be implemented with navigation extension function. May I know the reasoning to use NavHost?

[@clementjoymasinamela4244]

I'm thinking the same, let me try it. If I fail, I will tell you the reason.

[@cajoncollection3826]

So well explained thanks for putting it up! And I guess the jetpack navigation component will handle the back stack for you? And no need to handle it ourselves if we want to remember the screen navigation?

[@StevdzaSan]

Well it's a stable library now, but you'll have to think of how many screens you want to keep in the back stack.

[@tunahanbozkurt9516]

How can we achive same behaviour by using xml ? I couldn't find any example. Should I use multiple NavHost Fragments ?

[@adjimaingame]

Thank you for the tutorial! I've implement this navigation bottom bar with nested navigation on my project. But I'm having trouble. While on the Home Screen, the bottom bar keeps recomposing. I noticed it when elevation kept blacking out and logcat kept showing the message "The application may be doing too much work on its main thread.". My application also became very heavy. Do you have a solution regarding this?

[@andrewbeechey7246]

Hi, great video, it has inspired me to investigate jetpack compose navigation in my current app using BackdropScaffold, sadly i cannot work out how to make the backdrop and toolbar disappear when the user navigates to my sub graph. I cannot see how to use your approach of conditionally displaying the bottom nav and applying that to hiding the entire backdrop. please help me if you have time :D

[@mattiapavese4465]

that was very useful, thank you!

[@daniilvladimirov2457]

A great tutorial as always! Whaiting for your new course, can you give a clue when will it be?)

[@StevdzaSan]

Thanks 👊 Hmm I will do my best to complete it at the beginning of July 🤔 More information about it, when it's done. 😎

[@druom69]

Приятно слушать! Спасибо за видео

[@hohoday2664]

Really Fxxk nice I love you Stevdza-san !!! I really need this viedo thanks!!

[@ahamedrizwan2053]

Nice brother Could you create another video demonstrating how to navigate to a specific compose screen when clicking a notification in a nested graph?

[@chil1t0]

Hi, Stevdza, now that jetpack compose has a different way to handle the BottomNavigation with a rename and refactor of the composable as BottomBar, the function extension RowScope.AddItem doesn't work properly because the class BottomNavigationItem doesn't exist anymore, is there a fix to that?

[@Sadiqueeeeeeee]

I agree. In his last video on bottom navigation, I was encountering the same problem. Better use NavigationBar and NavigationBarItem from material3 in place of BottomNavigation and BottomNavigationItem

[@cufflink919]

@@Sadiqueeeeeeee This also fixed my issue with the dark theme icons not showing. Thank you!

[@vladimirpopov8151]

Thanks a lot. Great explanation of the theme!

[@bedresamarth]

I had a question. How do you go back to the authNavGraph if I log out from the homeNavGraph?? Kindly give me advice on this as I am stuck

[@rakibhasan_]

Same here

[@rakibhasan_]

What if I need to navigate from HomeGraph to AuthGraph? Specifically, if I want to log out from the HomeGraph, clear the entire HomeGraph, and then navigate to the AuthGraph, how can I handle this if the NavController used in the HomeGraph doesn't know about the AuthGraph?

[@johanngeisser6109]

Thanks, it was very useful

[@mamhesam]

Thank you so much for your great tutorial. Here, if I want the bottom navigation to be shown in the graph detail and navigate to the profile item in the bottom navigation and navigate to the home item in the profile , how can I still be on the information page. Like the bottom navigation of the Instagram app. that each bottom navigation item displays the last page. Thank you for your answer

[@vikashparajuli]

Well explained. Thanks for the tutorial.

[@StevdzaSan]

Glad to help 👊

[@Anolcera]

what if we want to navigate from HOME nav graph back to the Auth ?

[@yossimaskin1393]

The problem with this approach is that as you mentioned, you have to use separate navControllers and in this case you cannot navigate from the inner graph to the auth graph in cause you need to logout for example. I didn't find a solution to it

[@BinuJasim]

Can't you do a two step routing? First go to the root of the inner graph & then go to the authentication. Does that work?

[@yossimaskin1393]

@@BinuJasim I solved this by passing 2 nav controllers to the inner graph, the root one and the other of the bottom navigation but it's a kind of dirty workaround

[@swiszcz93]

omg i'm having this problemmmmm

[@BinuJasim]

@@yossimaskin1393 Fine that works. Another solution is to use a single navcontroller only and define the homescreen graph as an extension function of NavGraphBuilder just like how the authentication graph is defined. This way there is only a single NavHost, so all the navigation information will be available in the navcontroller backstack. You can navigate to any route as well.

[@krishnankv7894]

​@@yossimaskin1393 can u please share the details am facing that same problem

[@_AG8]

Once you logged in, how can you delete the main NavGraph backstack so you can't go back to the LoginScreen?

[@chadisfeir3809]

thank you for this tutorial! question: if we have logout button in profile screen where we should navigate to auth graph, don't we need to pass the root navcontroller to main graph in this case ?

[@ankitkhyalia3194]

Have you found the solution of this?

[@chadisfeir3809]

@@ankitkhyalia3194 yes just call the auth graph roote using the app navigation and popup the stack

[@ArturoDevA]

@@chadisfeir3809 please friend share your code

[@justmeagain9302]

@@chadisfeir3809 will this work even after relaunching the app?

[@dabdelkarim]

@@chadisfeir3809 do you mean something like the following fun HomeNavGraph(rootNavController: NavHostController, homeNavController: NavHostController) { ...... ...... composable(route = BottomBarScreen.Profile.route) { ScreenContent( name = BottomBarScreen.Profile.route, onClick = { rootNavController.popBackStack() rootNavController.navigate(Graph.AUTHENTICATION) } ) } I also tried to use homeNavController.popBackStack() instead of rootNavController.popBackStack() but it did not pop the stack!!

[@moammarqaddafi4858]

Can you please do something like that with XML method without jetpack?

[@mouzamali2940]

Great explanation

[@MonichGPT]

Nested NavHost cause visual bugs in compose 1.7.

[@Fighterkampfer]

Thank you very much! Just one question, what happens if you want to navigate from the Details screen back to the root graph ? For example, like a "logout" option that must show GRAPH.Authentication again. Will you use the navController at RootNavigationGraph ? And how would you provide it to the details screen ?

[@meetb26]

one problem show

[@meetb26]

pass mainNavController in detail page after that mainNavController .navigate(AuthScreen.Login.route)

[@AbdallahMehiz]

having multiple navigation graphs results in a lot more boiler plate and more points of failure, current compose navigation is by all means, not ready for production

[@sinancode]

its very important thanks

[@StevanMedic]

Bravo imenjace :) Podrska

[@maxose]

Hi thanks for guide. I faced with problem: how I can pass argument to details navgraph

[@davidavalishvili2768]

great video. thanks. what about to send custom parcelable arguments from one screen to another?

[@StevdzaSan]

I've already made a video about passing a whole object, check my videos.

[@gamigforgamers]

Amazing video! keep it up

[@vrindavankiras]

sir what about inner-padding value in scaffold for home , profile and setting screen or what i can do so that not need to pass this innerpadding value to all top label screen?

[@bakersbinary]

Great, thank you

[@emmanouilboursalis3912]

Hello sir and thank you for the video. May you show as how to pass arguments on nested navigation? I am trying to do it on my own but i can't.

[@ngomdecadetkamdaou3464]

Awesome, this was helpful

[@StevdzaSan]

Glad to hear that buddy 💪

[@420Sumanta]

How to handle duplicate navigation when the user clicks on the same NavigationBarItem twice?

[@N-fo4nq]

Have you found the solution for that?

[@420Sumanta]

nope. this is really frustrating @@N-fo4nq

[@ApratimArora]

How can i achieve this without jetpack Compose? I still build apps using XML layout and kotlin. Kindly suggest me some article or youtube video..

[@marta_na_moto]

Thank you kind soul.

[@kannanramakrishnan3052]

thank you

[@JohannGeisser-d9m]

Excellent, but I can not seem to navigate again from Home screen to AuthGraph

[@HendrawanDev]

Clear and well explained tutorial! Btw, i have a case in my android app that similar to the example in this video. So, in my case, the information screen has BottomAppBar component. How i can implement that? Do i need to place the BottomAppBar in parent scaffold? or place it on InformationScreen?

[@StevdzaSan]

I suppose you should place it in another nested graph like you have seen in this video

[@HendrawanDev]

@@StevdzaSan So i have to create another BottomAppBar inside InformationScreen and hide the BottomAppBar from parent? If so, i believe it will works, but the structure of composition will be like this Scaffold --Content ----Scaffold ------bottomBar is Scaffold inside Scaffold normal?

[@StevdzaSan]

Haven't done that kind of logic yet, so would have to experiment in order to find the best possible solution.

[@HendrawanDev]

@@StevdzaSan the bell already on, waiting for your next video. Keep it up!

[@thomasgohringer5538]

@@StevdzaSan Are you planning on making a video on this? I haven't found any resources on how to achieve this behaviour so far.

[@onahchristian2684]

Just Superb...

[@nipunshah1373]

1 Doubt : What is difference between `navigation` & `NavHost` ?

[@francoisrochefort5759]

Very nice thank you

[@HariKrishnan-es6po]

Hi, Stev, How to call a interface method implemented in main activity from composable function.

[@saeedzia5579]

how can i go from home screen to login screen???? scenario: User logout from setting screen and now i want to open login screen.

[@yahussainmazloom1]

Best Great Job brother

[@tripabroad8918]

How to handle case if I don't need to hide bottom bar and want to save tab icon selected?

[@vickramodero6971]

This doesn't work anymore. only a single NavHost per NavController is allowed. So, how do I achieve this?

[@eiorajlf]

how to go back to root nav graph from home nav graph

[@mauliktogadiya2500]

Did yo find solution ? What if we have logout like feature and want to clear current graph and navigate to auth graph?

[@manuelfernandezgarcia2908]

What if i want to open the login screen from the home screen again? Imagine that i logout.

[@ovedgustavorinconmachado506]

Why is slower my app in compose than in xml?

[@khumokwezimashapa2245]

Hello. Do you have a video on how to dowload images using glide? I managed to use glide to show my Firebase images in recyclerview, but now I want to download those images into device internal storage.

[@cuiteleo]

Best

[@StevdzaSan]

Thanks

[@mubashirpa]

what should do if i want to log out and go back to login screen?

[@javasync]

Thank you so much!!!!

[@StevdzaSan]

You're welcome! 💜

[@nuralijakipov3585]

is it clean code or not?

[@progdeelite]

Super nice and well explained. #top

[@StevdzaSan]

Thanks buddy 🙌

[@TriNguyen-ym3hf]

I have a question, when i navigate from bottomNavRoute to other Route, callback "OnDestroy" from lifecycle doesn't triggered (only call onStop), and when I navigate back using popBackStack, bottomNav triggers onCreate instead of onStart. That rlly weird, can you tell me what is the problem here, thank.

[@TriNguyen-ym3hf]

@GeishaTheSerpantClan jetpack compose sir

[@digvijayshelar8609]

can anyone help me with the thing that bottom bar start destination works but onboarding screen doesnt work due to that

[@jopadjr]

184th...I am a subscriber of your Udemy courses and nice to see your YT videos here.

[@roonyshekho8067]

How can I change the background color of a bottom navigation screen?

[@zakariajawas]

pass backgroundColor to the BottomNavigation()

[@roonyshekho8067]

@@zakariajawas I meant the screen not the bottom navigation itself. It can be changed using background color attribute in scaffold.

[@olukayodepaul7070]

You are bless.....

[@StevdzaSan]

Thanks 💜

[@olukayodepaul7070]

Just implemented it.. it works like magic. Thanks

[@StevdzaSan]

@@olukayodepaul7070 Good job buddy 👏

[@andikitta9480]

how to logout?

[@StevdzaSan]

Logout what? 🤔

[@andikitta9480]

@@StevdzaSan after press login button, we enter to the mainscreen, so my question is, how to logout back to the authentication screen from the mainscreen?

[@StevdzaSan]

@@andikitta9480 Well if you pop the Authentication graph of the backstack, you can just explicitly navigate to that same graph again with navigate function.

[@StevdzaSan]

And you can create the logic to dynamically calculate whether to show Home graph or Auth graph as a start destination based on the value saved in the app preferences for example. Bottom line, there are multiple ways...

[@renanboni7636]

@@StevdzaSan there are multiple ways, could you please elaborate one? neither of what you said above will work, thank you

[@hasanbestbits]

Great video !!!, How did you solve the problem where when you navigate to the details screen and even if you hide the bottom navigation bar it's still visible without the icons and occupies space in the screen ?

[@AndrewDChristie]

Thanks!