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?
@@nuralijakipov3585 try to use datastore and a viewmodel for the rootnavgraph to determine the start destinations. then you can flag the datastore such as logged in or not, and it will change your screen. the only downside is the change is not immediate, im still trying to find a better way to handle this
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 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!!
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 ?
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 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 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?
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.
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
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.
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.
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.
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?
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!
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
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?
@@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...
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!
Thanks!
Thanks Andrew!
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!
Hvala brate, baš mi je ovo trebalo, imaš odlične videe o Jetpacku, samo tako nastavi!
Thank you so much , I've been stuck in this part for over a week and finally I found your video .
This was a problem for me, but now it is easy. Thank you
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
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
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?
@@nuralijakipov3585 try to use datastore and a viewmodel for the rootnavgraph to determine the start destinations. then you can flag the datastore such as logged in or not, and it will change your screen. the only downside is the change is not immediate, im still trying to find a better way to handle this
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
I've been one of the "many messages asked me for". Thank you very much for this nice feedback :)
Glad to help buddy 👍
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!
Really awesome 🎉
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 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!!
How can we achive same behaviour by using xml ? I couldn't find any example. Should I use multiple NavHost Fragments ?
such a perfect playlist for understanding jetpack compose navigation. Thank You
Was just looking for this, thanks!
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)
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.
Once you logged in, how can you delete the main NavGraph backstack so you can't go back to the LoginScreen?
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
Nested NavHost cause visual bugs in compose 1.7.
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 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?
This is very helpful, but i have a question how to go from Home to Auth again incase of Logout ?
what if we want to navigate from HOME nav graph back to the Auth ?
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 Fxxk nice I love you Stevdza-san !!!
I really need this viedo thanks!!
Приятно слушать! Спасибо за видео
Hi thanks for guide. I faced with problem: how I can pass argument to details navgraph
hello! how to have a android as phone in the screen? i only have as a window on android studio...
that was very useful, thank you!
Great explanation
Bravo imenjace :) Podrska
how can i go from home screen to login screen????
scenario: User logout from setting screen and now i want to open login screen.
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
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! 🙌
How to handle case if I don't need to hide bottom bar and want to save tab icon selected?
Hi, Stev, How to call a interface method implemented in main activity from composable function.
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?
can anyone help me with the thing that bottom bar start destination works but onboarding screen doesnt work due to that
Well explained. Thanks for the tutorial.
Glad to help 👊
what should do if i want to log out and go back to login screen?
Thanks, it was very useful
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?
What if i want to open the login screen from the home screen again? Imagine that i logout.
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!
Why is slower my app in compose than in xml?
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.
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
Amazing video! keep it up
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?
Awesome, this was helpful
Glad to hear that buddy 💪
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
Hey Stev, you really need to create a video about a nested navigation drawer!
Just Superb...
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. 😎
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.
Best Great Job brother
Great video for navigation. Can you make videos on how to scope viewmodels to composable in jetpack compose projects?
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.
its very important thanks
you could achieve such functionality much easier with scaffold and tabrow. The question is how to do it on xml? nice video btw
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.
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.
Great, thank you
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!
Thank you kind soul.
is it clean code or not?
1 Doubt :
What is difference between `navigation` & `NavHost` ?
Excellent, but I can not seem to navigate again from Home screen to AuthGraph
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
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.
Super nice and well explained. #top
Thanks buddy 🙌
Very nice thank you
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..
Nice brother
Could you create another video demonstrating how to navigate to a specific compose screen when clicking a notification in a nested graph?
Thank you so much!!!!
You're welcome! 💜
thank you
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
You are bless.....
Thanks 💜
Just implemented it.. it works like magic. Thanks
@@olukayodepaul7070 Good job buddy 👏
Best
Thanks
184th...I am a subscriber of your Udemy courses and nice to see your YT videos here.
This is really hacky. This is a 2 year old video, I don't know if there's a better approach in 2024.
Thanks!