Full Guide to Multiple Back Stacks in Jetpack Compose - Android Studio Tutorial

hey guys welcome back to a new video in this video I want to show you how you can achieve multiple back Stacks in a jetpack compose app and first of all we of course need to understand what multiple back Stacks actually mean and in which scenario it makes a lot of sense to have such multiple back Stacks so let's take a look at this little app that we will build in this video here I have a simple bottom navigation bar and each of these tabs has 10 screens which we can visit when being on that tab so for example on this Home tab we can click next and we can go up to home 10 so each new screen has its own number and normally if we would now switch to a different tab here and do some navigation here for example and then go back to home normally what we would expect is that it starts at home one again because we visited the Home Road which then results in always the same screen however here this does not happen so it says home 6 which was the most recent Home tab or home screen that we actually visited and that is what multiple back Stags mean so each of these tabs we have in our Bottom bar has its own back stack and if we click next here go to home 7 then go to settings click three times on this button and then go back and for example go back on this page here so click the back button or slide back then normally we would get back to the previously visit destination which was the setting screen but since we have our very own back here in home we get back to home 6 and you will find this pattern in most big apps out there which have such a bottom navigation bar or which have maybe some kind of tap layout with multiple categories of screens for example you will notice that in the YouTube app you will notice that in Instagram which all have such a bottom bar and that is of course very good user experience if you have some kind of video list here for example in the YouTube app and you click on a specific post or so but then go to the settings then you also expect that you get back to the post by clicking on home because that is where you left it at and in order to build this let's dive into an empty jetpack compos Android Studio project and start right away on the one hand we first of all need some kind of wrapper which uh describes a bottom navigation item I won't go into the details of implementing a bottom navigation view here because I have a separate video about that on my channel already but in the end when it is about implementing a bottom navigation bar then we need something like a bottom uh navigation item which on the one hand has a title so the text of that item then we want to have an unselected icon which is an image Vector in compose and a selected icon so that is typically just a filled icon variant of the unselected icon which is just the outline and then we could just create some kind of list I'll leave that up to you how you want to or what kind of tabs you want to have in the bottom bar I paste this items list here which just consists of these three items that I had before so we have three bottom navigation items home chat and settings and for the icons I just used yeah the the default icons from the material design Library so on the one hand home but the filed one for the selected icon variant and the same icon but in outline for the unselected icon feel free to just write this off or copy paste it from my giab down below but let's now go on with implementing the bottom navigation bar so typically when implementing a bottom navigation bar we put that in a scaffold because it already reserves the spot for that bar so let's have a scaffold as a root element and then here in the scaffold parameter list we can have a bottom bar which will place the Bottom bar exactly where we want it a bottom bar in material 3 is called navigation bar here we get a row scope in which we need to initialize or in which we need to create and Define how such a bottom navigation item looks like for that we just want to Loop over our items list we described down below so for each for each item and for each of these items want to have a bottom uh navigation bar item it's called here we need to say whether that's selected or not so it is selected if we obviously are on that Tab and it's not selected if we aren't how do we now know whether that's selected or not well for that we need to have our very initial navigation setup so we can actually check if the route which we're currently on is the same as the items title so we'll just call our routes home chat and settings and then we can check if the current items title is the same as our route and for that we need to add the navigation Library so let's go to our grad app file scroll down and here have an implementation function which will add the navigation what is it navigation compos something like that navigation compose oh that's the hilt variant this one here Android X navigation navigation compost synchronize now and then want to go back to main activity because on the one hand we now need a nav controller that that is what we always need when we Implement composed navigation with the um traditional way of the normal compos navigation library and here in this case we won't just have a normal nav controller but rather a rude nav controller because when we want to have multiple back Stacks then we also need to have multiple nav controllers because we need to kind of control each back stack individually and for that each backstack obviously needs its own nav host and nav controller that is associated to it and the job of this rootnav controller is just to navigate between our different categories between our different Bottom bar tabs this rootnav controller does not have the job to navigate within a tab here so from home 6 to home 7 for example but it does have the job to navigate to chat for example and in order to check which tab is now selected we can use this root nav controller to observe its nav backstack entry by root nav controller. get back or current backstack entry it's called current backstack entry as state so that is just a compos state which updates as soon as we navigate and then we can just check the route of the newly visited screen and compare it with the title of this item so here in our navigation bar we can have a Val is selected that's equal to item. tile. lowercase if that is the same as our nav back entry do um destination. route so if the destination's route is the same as our title in lowercase then we know that the item is selected and we can pass this value here to the selected Boolean of this navigation bar item then we also need some kind of label which is the text for each item here we can just say the text is equal to the title of each item we need some kind of Icon which you to show for each navigation bar item here this is dependent on whether the item is selected or not so let's just have a normal icon with an image vector and the image Vector depends on whether the item is selected or not if it's selected we want to use the item selected icon selected icon and otherwise item unselected it icon for the content description of that icon we can just say null or just the title of each item and last but not least we obviously need some kind of behavior when we click on this navigation bar item and that is really where the magic happens because when we click on an item here then we need to perform the navigation to the other nav graph to the other not only nav gra but to the other nav host and what's also very important when doing this is that we typically don't want to keep a very large back stack because if we navigate 10 times within this home Tab 10 times within this chat Tab and settings tab then we really larg backstack which gets saved and which is all in memory but we rather only want to keep the backstack we're currently at active and restore the other ones when we get back to them but luckily this logic can be very easily implemented with uh an F controller reference and this is exactly what we want to do in this on click so as soon as we click on a navigation item we want to use our root nav controller I want to navigate to that item. tile. lowercase which is just the same name as the route we will choose and then here by opening this block of code we get this nav options builder in which we can just kind of configure our navigation action a little bit and again these navigation actions are really only corresponding to navigating between tabs so from settings to chat or to home or back to chat but not within a tab and therefore for the reason I said that we don't want to keep the whole back stack in memory we want to pop it so when we switch the tab we want to pop up to the root nav controller. graph. start uh find start destination actually which obviously finds the start destination and refer to its ID with the difference that we want to save the state here so we set Save State equal to true in this extra block of code so this will pop the previous um graph the previous screen so if we have um chat 5 here and we go to settings then it will actually pop the previous um the previous five chat screens from the backstack but it will still save the state so if we go back to chat it will restore that so we still have the old um screen history and we can also go back here um and then actually get to chat 4 chat three and so on then what we would also like to have is launch single top set that to true that will make sure that we can't um just navigate to the same item where we're currently at so if we are on chat and click on chat we just want to stay there we don't want to just push another chat destination on top of this back stack that is what we achieve with a launch single top so if the um if we if we're trying to push a screen on the back stack which is already at the top of the back stack we don't do anything and last but not least when we go back to a previous destination where we've saved the state then we also want to restore it so we set restore state to true and this block of code is really the whole Magic behind multiple back Stacks the um next part will be to actually have content here right now we don't have any navf host where we also assign our root NF controller that is what belongs inside of the scaffold block but as I said when we have multiple back Stacks each single tap each single bottom navigation destination should also have its own nav host so let's actually create that in separate composes so for example the home nav host here and down here Let's ignore that we have a nav host and this nav host obviously needs a nav controller and since we have our very own navigation logic just within our Home tab we also want to have our very own home nav controller which is um responsible for only that so remember nav controller just like we also initialized our root nav controller and then we pass that here and use the start destination home one so we'll just have a loop here to initialize 10 screens just to have a little demo here four I in 1 to 10 we will then add 10 of these composable destinations the route is home and I so starting at one it will be home one home two and so on and in here we will then have um the option to actually create a composer for that I just want to have a very generic screen composer which you can reuse for all these screens so comp generic screen I don't know why Andro studio is always way having issues here um here we want to have the text so whether that's home one home 2 and so on and we actually also want to have a Lambda when we click on the next button so on next click like this all we really put into this generic screen is a column which centers a text and a button so modifier modifier. filmax size and we want to have horizontal alignment alignment. center horizontally and the vertical Arrangement is arrangement. Center instead of this column we are going to have a text as I set which is just the text that we passed let's have a little bit of spacer modifier height 16 DP Alt Enter to import DP and last but not least um let's have a button when we click that button we call and trigger eror on next click Lambda and the text just says next okay we can then use the generic screen composable here in our home nav host and the composable generic screen the text is just home and our value of I so home one home two and so on and on next click if we are actually if I is actually less than 10 so if we're not at the last screen then we want to take the home nav controller and navigate to the next page so to home and then i+ one so just to the next page and this is how our Home tab would look like of course in real app you wouldn't have a loop to create these screens I'd rather have different of these composable blocks with actual screens um where the user can navigate to but this should be totally sufficient for our needs to understand what an asset what a what a multiple back Stags actually mean let's copy this paste it down below for the chat chat nav host chat nav host um we can also just select all that hit command in R to rename home to chat replace all and also this one here which is in uppercase and then we can do the same with our final settings nav host settings nav host and also select that here we want to rename chat to settings like this replace all rename this to settings and we are good for some reason Android Studio complains but this is just a bug in Android studio um it doesn't realize we actually renamed this I don't know let's just go up here in our scaffold so inside of the block of our scaffold and here what we will have is another nav host you guessed it this nav host will now take in our root nav controller so this will coordinate the navigation between all of our individual nav hosts which just coordinate the navigation within a tab and here start destination can be home so our Home tab is showing up at first and we're going to have a composable block for home and all this will contain is our home nav host that is really how this works we then copy paste this two more times once for the chat chat nav host and for settings oops settings we have our settings nav host so so each individual page of our root nav host now has its own single nav host with its own nav controller which you can use to just navigate within the back stack of a single tab on Yeah in our app and I don't know why it complains here probably because I didn't use this pading value which is quite stupid padding if we give it a name yes then the eror at least goes away and goes to this padding variable Let's ignore that for this case and I think we are ready to launch this and try out if it now shows the same as I showed you previously and now it seems like there is a compile time error scaffold okay probably because it wants us to add this experimental API which is super stupid why does it fail at compile time because of that should be a warning but shouldn't prevent building right let's try this again yes now the app is launching home one let's try this out and let's go to home three that is working fine if we now go to chat that is working we have chat one let's go to chat five maybe if we now go back to home we should see Home Three and not home one and that is exactly what's happening very cool if we now go back we should get back to home one so home two home one go back then the app is closed because the previous backstack was also popped from the back stack very cool so that is how you implement multiple back Stacks with composed navigation if we go back here then everything is working perfectly fine here we get back to chat 4 and so on so if you have some kind of bottom navigation view bottom navigation bar in your compose app and you want this Behavior it's very likely you want this Behavior if you have that in your app then yeah now you know how to do that and if you like these videos but you feel a little bit unsure about the code you write and you don't really know if the way your code is right or not you're just a little bit afraid of whether you're making major mistakes you just don't know about or if everything is absolutely cool then my 10we mentorship program might be something for you in these 10 weeks we will be working together very closely we're going to build an app you will get code reviews and you can always ask me any questions that come up when building that app so if that sounds good to you check the first link in this description to apply for this 10e program and other than that thanks for watching this video I wish you an amazing rest of your week and see you back in the next one [Music] bye-bye

Channel: Philipp Lackner

Views: 16,096

Keywords:

Id: fp1-YSmdzh8

Length: 18min 20sec (1100 seconds)

Published: Sun Dec 10 2023