Full Guide to Nested Navigation Graphs in Jetpack Compose

In this video you'll learn everything you need about nested navigation graphs in Jetpack Compose.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/...
Get my FREE PDF about 20 things you should never do in Jetpack Compose:
pl-coding.com/...
💻 Let me be your mentor and become an industry-ready Android developer in 10 weeks:
pl-coding.com/...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/...
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/phi...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/phi...
You like my free content? Here you can buy me a coffee:
www.buymeacoff...

[@raghavaggarwal8644]

Hi Philipp, though I understood the whole video and it's context but I just think it would have been a little better if you could have added some pictorial demonstration of the navigation which you are taking as an example. Great content as usual!

[@ChrisAthanas]

I added the example you have asked for, I put a PR for the code in Phillip's repo for this video

[@abhilashpatel6852]

@@ChrisAthanas could not find. could you please share your link here?

[@fredericoamigo]

Hey man! Thank you so much for making these brilliant hands on tutorial vids for Jetpack Compose. They are really high quality and help me out a lot. Keep up the good work! You are truly one of the best code-KZbinrs out there!

[@duongvu6029]

One downside to call out for this approach is that you won't be able to wrap, say, the calendar nested graph inside a Scaffold for things like tab navigation. You either have to wrap the whole NavHost inside one Scaffold and optionally show/hide the app nav bars or use a single composable() as a container for multiple tabs.

[@learningCodingWithMe]

Exactly the problem im facing. I want to wrap a nested graph inside a modal drawer (a side menu) for tab navigation. Im trying to search for a way to nest navhosts

[@n2749]

Damn I finally understand, thank you. I couldn’t figure out how to move from one screen to another. Each time, for some reason, I got the controller out again through the remember. Now it’s clear, thank you again

[@SanjarSuvonov]

Hi Philipp, please show us navigation with bottombar(bottom navigation view). It has two navGraph. Managing these is a problem. Make a video about it.

[@kinggeorges625]

Looking also for it

[@Narazgul]

Wie gewohnt toller Content der mir direkt wieder weiter hilft! Noch ein kleiner Verbesserungsvorschlag: Eine Grafik, die den gesamten Prozess schematisch darstellt kann hier wohlmöglich noch für weitere Klarheit sorgen. Ich persönlich würde vermutlich auch jedem Nested Graph seine eigene file geben, da es in größeren Programmen für mich schnell unübersichtlich wird. Dann kann man schon in der Ordnerstruktur ablesen, welche Graphs es gibt. Wohlmöglich korrelieren die dann sogar mit Feature Modulen und helfen bei der Übersicht über das Projekt ✌

[@user-qq3kq3hc4e]

Thank you for this video. Sharing the view model between the screens in the nested graph was EXACTLY what I was trying to figure out.

[@ChrisAthanas]

I fixed this example and added UI elements, the PR is available in Philitps' Repo for this video

[@stoyan_vuchev]

Just on time for another great guide! I was not aware that it is possible to pop the whole navigation graph using the graph route. I've been using the start destination route for poping the back stack the whole time. 😅

[@ahmrh]

i searched everywhere for this and your videos always helped me, thank you!

[@ericwathome783]

I was really thinking of implemetning this in a project I'm working on. Thanks for this man

[@norayrmovsisyan]

Hi Philipp. Thank you for great video. Hope we will see such a videos too long time.

[@RichardMaidenCG]

The solution I was looking for, thanks a lot, Philipp! I love your videos

[@codelabs.99]

Thanks for the video. Keep up the good work!

[@ngomdecadetkamdaou3464]

Right at the best moment. Thanks, Philipp, you are amazing!

[@neerajverma9226]

We need more detailed video on this topic such as how to navigate between nested graphs and pass data between

[@xavierrispal9605]

Quite interesting video !! Thanks for that. Does it mean you don't use anymore this dependency (raamcosta/compose-destinations) in your projects ?

[@umairnazim3565]

Nice explanation

[@SuperBodet]

It would be great if it was illustrated with a sample demo

[@DAVIDOZERSKY]

HI Phillip, as always this was an excellent video! I have a usecase that requires possibly infinite nested navigation. How would one accomplish this? Ideally we could reuse a screen or route and continually add new instances of the screen onto the backstack. Is this possible? The data is in a tree structure which we is returned in a single API call; so we know the depth of the screens we need in the first element. Interacting with the different screens is really just navigating up and down the tree; and on each screen the user is required to make selections. Some of those selections may have customizations which require selections (or sub-selections); and in order to make the selections for the customization requirements the user needs to navigate into a new screen with a lazylist that renders the customization options for that selection. So in order to determine whether a screen is in a valid state you need to have the validation state of the nested screens. This seems a bit awkward for composables. I'd prefer to use one data structure/object for the whole thing to enable screens to not have to figure out what is going on with the next level of nesting. The UI state of a screen would be managed by remember/mutable states for itself (ie the screen selections & are the requirements for that screen met) so the user can interact with a screen and the UI will recompose; but those mutable states would vary depending on the number of requirements of any given screen. I hope that this answers other peoples questions as well :)

[@USS_Daedalus]

Phillip is probably one of the biggest Android Influencers of the World? At least no other KZbinrs comes in my mind. I like his Germany efficiency that i am very familiar with 😂

[@mustafaozturk8569]

,İ love You Man !!!!!!!!.Thank u So much !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@4ytonly]

How about a video where you show us how to properly update all dependencies in gradle!? :)

Srsly? 😂

[@4ytonly]

@ ?

[@purplehazer417]

What about navigation between screens with topbar + bottomNavBar and full-size screens? Full size screens might be located in another NavHost which is 'above' the NavHost with screens with top-bottom bars. But then, how would it be possible to navigate from parent NavHost to child NavHost?

[@bohdanzaichenko]

yo I face the same problem, have you found any solution for this?

[@anaibrahim4361]

I'm about to ask the same thing. This approach (demonstrated in the video) is for when all of the screens have the same screen theme (top bar, bottom nav bar), but -as an example- if the authentication feature doesn't have a bottom nav bar or a top bar and the main feature screen has a top bar or bottom nav bar, it would be difficult to control it using this approach. According to my experience, one possible solution is to consider the main activity as a shell, and make the navbar visible state a global state that can be controlled each time the user navigates to a specific screen, so that whenever the user navigates to a screen that doesn't require the bottom nav bar, the visibility state is changed to false. We'd appreciate it if you could emphasize the best practices for handling such case.

[@frankyjunior6005]

Please make video nested nav with compose destinations libs. Thank you

[@petrtrac3285]

Hi, I cannot find any nice example how to pass nav arguments into nested nav graph down to start destination.

[@alonshlider4881]

Didn't you say your going to use the destinations library going forward instead of the awful accompanist one?

[@Landofcoding]

Very informative and helpful tutorial

[@robchr]

Thanks a lot. This saved my bacon from having to do a huge refactor!

[@luciendurand-hardy5197]

Thanks for the video, you rock. Very efficient. I didn't find a good practive to navigate from the view model. For example, on the login screen, when you click on the login button, it will trigger a flow that emit loadings ui state then a success state at the end, how to navigate then? - sol 1 : pass a nivagateTo...() lambda function to the @composable screen and check the state in the @composable screen (when uistate is Success, navigateTo...()) - sol 2 : pass a lambda function to the view model and call it from there - sol 3 : the third and best solution Any idea to achieve that properly?

[@taslimfi]

Hi Philipp, could you share how to go to specific screen in other nested graph from another nested graph?

[@producedbysimon3660]

Pretty simple, just add two navigate calls, one to the nested navgraph routes, then the second is to the screen route in the nested navgraph

[@mark-147]

Why do we pass around navController rather than defining a CompositionLocal like LocalNavigator?

[@ngapps]

I wonder how it gonna be in larger project, where you have signin/signup feature and 5 screens under Navigation Rail / Bottom Navigation. Should it be like Main NavHost, Nested navigation graph for login, Nested navigation graph for main app, with 5 nested graphs inside?

[@sanketgawande3667]

I was doing exactly same thing, different route group for auth and root app. But ended up embedding another nav host into one of route screen and it was crashing app on visiting the page. This could help me understand nested routing.

[@johanofcourse]

Why would you need the helper function if you use dependency injection and already have a instance of the viewmodel created?

[@ВолодимирФедючко]

Nice, thanks!

[@umardev500]

how about with bottom tab and nested

[@negindelfani]

Hi philipp,Thank you for good videos,I had a question.I cant speak english very well,sory.Im making an app that have an screen where 3 cards are define with LazyVerticalGrid ,each card navigates to a diffrent screen.now I dont know how can I define the code for clickable that the user will go to his own screen by clicking on each card?🙄

[@harwinderbenipal5332]

Do you have any jetpack compose course very beginner (noob) to pro. Including everything viewmodels, architecure , depemdy injection , accesing files, modfying, database, repositrys, online offloine etc?? if yes please share the link

[@umardev500]

do have a video about screen transition?

[@ravikumarmohan1415]

How do you actually navigate from one navHost to another in this case... Could anyone please explain?

[@MenaSamer]

what about if I want to navigate to a screen from a nested graph to another but this screen is not the default destination ... in the video, if I want to navigate from the login to calendar_entry not calendar_overview

[@vickedvuljo]

How would you handle the case when start destination of the graph accepts optional arguments, since you are navigating to "auth" and not, lets say, login?email={email}

[@sebastianseno9285]

Nice video as always,

[@corneliubejan226]

Hi Philipp! How to prevent involuntary recomposition ? 1) Same "fragment" on the screen many recomposition 2) When i navigate to other screen all prev screens recompose . Is this ok ? Can you please provide any fix usign states (HomeState like in your videos ) ? Thanks

[@TheMikkelet]

Why havent the compose team implemented shared-viewmodels already? A year later and this janky solution (no offense) is still the best option....

[@chummy4422]

You can popUpTo(0) or other id or route that your app doesn’t have to remove all the backStack

[@jpromero9391]

We need another video for nested navigation

[@lorenzosuarez1126]

Nice video! 🚀

[@aryaadikusuma5933]

so how integrates this with bottom nav, since that must contains own nav host and having nested nav host can cause the app to crash. Very confusing in here 🤯

[@vinaykumarpatel649]

I wonder is there any changes on how we use Hilt on Jetpack?

[@jayeshkumar9848]

I was using 2.5.3 version, now when I want to update to 2.7.2 am facing some issues, is there any major changes need to be done?

[@geraldjaylagarto6839]

How do you address the deeplinking on this nested graphs?

[@gurustudioyoutube]

Hi, Is there any library or sdk that can help to measure a distance from object. not asking for measure a object. for example: how do i know how far i am from a particular object if you have any suggestion let me know

[@fazalulabid8483]

Great as always

[@ryokuman1916]

I don't know why, all of your videos which is adding some new implements like lifecycle or something like this video and calculator I can't build anything really it always has an error for duplicated implements I think there is a prob with your impllements, can you check them?

[@tousifjaved3485]

Update all the playlists Add your recent videos to the corresponding playlist I will be helpful for beginners like me to understand all the topics

[@FreedivingTrainer]

btw standard jetpack navigation for Compose just is pain

[@lutfiikbalmajid]

Sorry, i have followed you for a while since i learn jetpack compose. Maybe you can give the view result everytime you make the tutorial hehe

[@dikenmhrz3902]

How does this work with deeplink?

[@BaBaKRaufi]

Good

[@adamfatyga7977]

I write Your code from video: App crash without errors I copy app from Git: App crash without errors Win10, AS Giraffe, Pixel XP API 33 emulator.

[@PhilippLackner]

An app never crashes without an error

[@adamfatyga7977]

@@PhilippLackner So, i dont know where to find it. 'Run', 'Debug' and 'Problems' show nothing.

[@adamfatyga7977]

@@PhilippLackner FATAL EXCEPTION: main Process: com.plcoding.nestednavigationgraphsguide, PID: 4926 java.lang.IllegalArgumentException: navigation destination home is not a direct child of this NavGraph

[@PhilippLackner]

@@adamfatyga7977 logcat

[@adamfatyga7977]

@@PhilippLackner Can You help me?

[@raja_uma1r]

I use a different approach when I want to use a shared view model and have no more than two screens. 1. Create an enum class and a compose mutableState variable using that enum. Dont forget to wrap it in remember block. 2. Declare a when condition passing in that variable and calling your screen composables based on the changing value of the state variable. 3. Change the state in callback lambdas on however you want to navigate through screens. Edit:- 4. You can use BackHandler composable to redirect system Back button callback to your Composables callback lambdas.

[@PhilippLackner]

There's a reason why we have a backstack on Android 😅

[@raja_uma1r]

I know about that situation very well, I'm just saying that it's a simple approach when you've no more than two related screens that need a shared view model. BackHandler can be used to redirect system back button callback to navigate using system back button.

[@brigadut]

Very weird syntax

[@andrewdunbar828]

Only A few do it right.

[@dleonardo3238]

Damm Compose navigation sucks badly

[@LEEJIHUN]

The video is good, but it's a bit of a shame not to check the results

[@mortitotti]

Thanks Philip for another wonderful video. I have a question, what if I want to share a Koin view model instead of normal view model. How the sharedViewModel function should look like? I tried to solve it with scopes, but couldn't find the soultion: ` @Composable inline fun NavBackStackEntry.sharedViewModel( navController: NavController ): T { val navGraphRoute = destination.parent?.route ?: return koinViewModel() val parentEntry = remember(this) { navController.getBackStackEntry(navGraphRoute) } val scope = rememberUpdatedState(KoinJavaComponent.getKoin().getScope(parentEntry.id)) return scope.value.get() } `

[@drideonng1828]

Need your with an android studio project but can't find your email in the about section. Please

[@CodePursuit]

is there more better way than this? @PhilippLackner