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!
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?
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?
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
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?
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
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!
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.
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 ?
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 ?
@@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!!
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?
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
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?
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?
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!
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 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?
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.
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.
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 ?
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 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
@@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.
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
@@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?
@@andikitta9480 Well if you pop the Authentication graph of the backstack, you can just explicitly navigate to that same graph again with navigate function.
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...
![Lp. Сердце Вселенной #30 ДВА В ОДНОМ [Один человек]• Майнкрафт](http://i.ytimg.com/vi/nrXy15orKhY/mqdefault.jpg)
Omygod, You really explain my number 1 problem for the last 2 months. You really are great
Thanks buddy
@@StevdzaSansame for me, great video man
Pa ti si nas! Auu jebote, najaci smo. Hvala ti na ovome tutorijalu. Samo napred!
Thank you so much , I've been stuck in this part for over a week and finally I found your video .
Hvala brate, baš mi je ovo trebalo, imaš odlične videe o Jetpacku, samo tako nastavi!
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
This was a problem for me, but now it is easy. Thank you
such a perfect playlist for understanding jetpack compose navigation. Thank You
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!
I've been one of the "many messages asked me for". Thank you very much for this nice feedback :)
Glad to help buddy 👍
Was just looking for this, thanks!
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?
Really awesome 🎉
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?
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
@@Sadiqueeeeeeee This also fixed my issue with the dark theme icons not showing. Thank you!
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
Same here
How can we achive same behaviour by using xml ? I couldn't find any example. Should I use multiple NavHost Fragments ?
This is very helpful, but i have a question how to go from Home to Auth again incase of Logout ?
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 )
I'm counting on that! 🙌
Really Fxxk nice I love you Stevdza-san !!!
I really need this viedo thanks!!
Приятно слушать! Спасибо за видео
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?
same question..found anything???
@@mauliktogadiya2500 ??
solutions is use a lamdda , from HomeScreen to RootNavGraph, works perfect
@@mauliktogadiya2500 did you fing the answer to this question?
that was very useful, thank you!
Great explanation
Since HomeNavGraph is a nested navigation, it could be implemented with navigation extension function. May I know the reasoning to use NavHost?
I'm thinking the same, let me try it. If I fail, I will tell you the reason.
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
how would you then navigate back to the auth graph, say for a logout button that was pressed in the home graph?
did find the solution ?
@@soheiboz522 solutions is use a lamdda , from HomeScreen to RootNavGraph, works perfect
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!
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.
Hello thats what Im trying to solve now. So you mean is from RootNavGraph you will pass the NavController to the HomeScreen?
Well explained. Thanks for the tutorial.
Glad to help 👊
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 ?
one problem show
pass mainNavController in detail page after that mainNavController .navigate(AuthScreen.Login.route)
Bravo imenjace :) Podrska
Once you logged in, how can you delete the main NavGraph backstack so you can't go back to the LoginScreen?
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 ?
Have you found the solution of this?
@@ankitkhyalia3194 yes just call the auth graph roote using the app navigation and popup the stack
@@chadisfeir3809 please friend share your code
@@chadisfeir3809 will this work even after relaunching the app?
@@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!!
Hey Stev, you really need to create a video about a nested navigation drawer!
Great video for navigation. Can you make videos on how to scope viewmodels to composable in jetpack compose projects?
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?
you could achieve such functionality much easier with scaffold and tabrow. The question is how to do it on xml? nice video btw
Thanks, it was very useful
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
Thanks a lot. Great explanation of the theme!
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?
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.
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?
what if we want to navigate from HOME nav graph back to the Auth ?
Great, thank you
How to handle duplicate navigation when the user clicks on the same NavigationBarItem twice?
Have you found the solution for that?
nope. this is really frustrating
@@N-fo4nq
Thanks!
Thanks Andrew!
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!
A great tutorial as always! Whaiting for your new course, can you give a clue when will it be?)
Thanks 👊
Hmm I will do my best to complete it at the beginning of July 🤔 More information about it, when it's done. 😎
how can i go from home screen to login screen????
scenario: User logout from setting screen and now i want to open login screen.
Can you please do something like that with XML method without jetpack?
This doesn't work anymore. only a single NavHost per NavController is allowed. So, how do I achieve this?
Hi, Stev, How to call a interface method implemented in main activity from composable function.
its very important thanks
Thank you kind soul.
Nested NavHost cause visual bugs in compose 1.7.
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?
I suppose you should place it in another nested graph like you have seen in this video
@@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?
Haven't done that kind of logic yet, so would have to experiment in order to find the best possible solution.
@@StevdzaSan the bell already on, waiting for your next video. Keep it up!
@@StevdzaSan Are you planning on making a video on this? I haven't found any resources on how to achieve this behaviour so far.
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.
Amazing video! keep it up
Awesome, this was helpful
Glad to hear that buddy 💪
Just Superb...
Hi thanks for guide. I faced with problem: how I can pass argument to details navgraph
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.
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.
@GeishaTheSerpantClan jetpack compose sir
Best Great Job brother
Nice brother
Could you create another video demonstrating how to navigate to a specific compose screen when clicking a notification in a nested graph?
how to go back to root nav graph from home nav graph
Did yo find solution ? What if we have logout like feature and want to clear current graph and navigate to auth graph?
How to handle case if I don't need to hide bottom bar and want to save tab icon selected?
is it clean code or not?
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 ?
1 Doubt :
What is difference between `navigation` & `NavHost` ?
what should do if i want to log out and go back to login screen?
can anyone help me with the thing that bottom bar start destination works but onboarding screen doesnt work due to that
What if i want to open the login screen from the home screen again? Imagine that i logout.
great video. thanks. what about to send custom parcelable arguments from one screen to another?
I've already made a video about passing a whole object, check my videos.
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
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?
@@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
omg i'm having this problemmmmm
@@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.
@@yossimaskin1393 can u please share the details am facing that same problem
Very nice thank you
thank you
Thank you so much!!!!
You're welcome! 💜
Excellent, but I can not seem to navigate again from Home screen to AuthGraph
Super nice and well explained. #top
Thanks buddy 🙌
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..
Why is slower my app in compose than in xml?
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
Best
Thanks
How can I change the background color of a bottom navigation screen?
pass backgroundColor to the BottomNavigation()
@@zakariajawas I meant the screen not the bottom navigation itself. It can be changed using background color attribute in scaffold.
You are bless.....
Thanks 💜
Just implemented it.. it works like magic. Thanks
@@olukayodepaul7070 Good job buddy 👏
184th...I am a subscriber of your Udemy courses and nice to see your YT videos here.
how to logout?
Logout what? 🤔
@@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?
@@andikitta9480 Well if you pop the Authentication graph of the backstack, you can just explicitly navigate to that same graph again with navigate function.
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...
@@StevdzaSan there are multiple ways, could you please elaborate one? neither of what you said above will work, thank you
Thanks!