Navigation Drawer - UX With Material3

hey guys and welcome back to a new material 3 video in this video you will learn about the navigation drawer in material 3 so a navigation draw is in the and Justice sheet that slides in from the left like this one here where you can navigate to different destinations and what this navigation door we've also finally finished the navigation related components of material 3 so these include on the one hand the bottom navigation bar and then we talked about the navigation rail for tablets in the last video and in this video there is the navigation drawer which you can also use for navigation so you are quite free in choosing what fits your app the best so in this video I will talk about the ux relevant aspects of implementing a navigation door as well as yeah how you can just Implement that in code in Jetpack compose this time I have already included these standard navigation items this wrapper class which I've used in the previous two videos as well so for the navigation Rail and bottom app bar um I mean the bottom navigation bar um so if this is new to you then you can just copy the code from GitHub below if this is not new to you you can also just copy it from GitHub or from your previous project because it's really just a rapid class for each item and this rubber class contains the information we need to display such an item here so the text the unselected icon the selected icon and a potential batch count so there are 45 urgent messages under this tab for example then we can also display that with a navigation drawer okay normally we use the scaffold to show these typical components from Material 3 with a navigation draw however we have that draw itself as a wrapper a round or a scaffold so we have a so-called modal navigation draw and we can then configure it here and then we can put a scaffold as the content of that navigation drawer so you will see how that works let's see what else we can configure here we can also set um the draw state that is something I want to do so we can get the draw State like this draw state is equal to remember I think it's model of remember drawer State yes the initial value so whether it's closed or open is in this case just closed Alt Enter um to and this experimental API annotation and we then assign this raw state so this is just a state we can use to also manually open and close our navigation draw for example when we click on a button or actually just on the icon up here so I will also show you how you can set up such a very basic top app bar I have a video about that specifically so if you want to fully understand that in all detail watch the video about top app bars in this video I will just focus on this little menu icon so we can open our navigation draw and there are actually three different types of navigation drawers we have in material three on the one hand it's this modal navigation drawer so that will open a modal as you can see here um it will come with this scrim color so that it yeah just darkens the rest of your app a little bit to indicate um or to really put the focus on the content of the draw if we then tap outside it gets hidden but for tablets it's also very common that you have a permanently open navigation draw so that is also possible I think it's called volts on permanent navigation drawer yes or you could have a dismissable navigation drawer that is basically a permanent navigation drawer but you can dismiss it so it's just like the model what the difference that the navigation draw will push the content to the right when it gets opened while the model will display above the content I will show you all these different variants later when we've implemented the most important stuff here so um let's have a modal navigation drawer again the drawer content is what gets shown on the drawer so our draw items this content here is the content of our actual screen so what gets shown right here behind the draw in this case we want to have a normal scaffold here and this scaffold will have a top bar which we use to show the navigation draw so we can have a top a bar and again if you want to learn about top abouts then watch the separate video in this material 3 playlist about that this top above will have a title of let's say to do app or so or whatever you're building we then want to have a navigation icon which is our menu icon so we want to have an icon button here the content of that icon button is a normal icon um image Vector icons default menu that is the icon to use content description could be menu as well and when we click on this icon button we want to open our navigation draw so for that one to use our draw State a DOT open that is how easy we can open the navigation drawer you see we get an error here because this open function is a suspend function therefore we need to call that from a suspend function from a CO routine and to do that we can just get a reference to correcting scope remember core routine scope scroll down to our icon button sculpted launch and we put this open open call inside so this will simply suspend as long as the animation is playing let's next talk about how we can add some drawer content here so our actual draw items for that we have our list so I'm going to Loop over that and for each item in this list we want to have a navigation draw item the way this works is we want to have a so-called modal draw sheet here and here we really can't configure that much so we can just leave it at the default um so we could change the shape we could change the container color content color um the tonal elevation but we just want to leave this at the default so we automatically stick to the guidelines of material 3. but in here we do get this column scope so we can just Loop over our items and create a navigation draw items here so I'm going to have our items for each indexed this one here called item and we can construct a navigation draw item with navigation draw item the label is just the text so we can have a text here item.title selected well you want to check a force index is equal to the selected item index which is a state we can create that is exactly the same as what we also did for bottom navigation bars and the navigation rail so um selected item index buy remember savable mutable State off zero initially we want to import this for some reason it sometimes it just doesn't show that we can import this in this case we can scroll up to our Imports and duplicate this beautiful state off I'm import here twice change it to set value once and get value once and then that the error should be done and we can now make use of the selected item index to highlight the specific item when it is selected when we click on a navigation draw item and we obviously want to change the selected item index to the current index of that item but we also want to close our navigation row so we again launch a cartoon in our curtain scope and we use our draw state to close this um this drawer sheet other than that we can also add an icon here and this icon Lambda we can just have an icon the image Vector will be dependent on whether this is selected or not so if the index is our selected item index if the current item is selected we want to have the item selected icon and else item unselected icon and the corner description is just the title of our item next to the icon we can also have the batch which for navigation draw is really just a text so um this here would be the badge so it doesn't show with this little red bubble as for the navigation rail in the Navigator bottom navigation bar so here we just have a text and the text is item dot batch count dot tostring but only if that's actually not knocked so if there is a batch count we display it otherwise we ignore it and this should be our very first version of our navigation draw so if we launch this take a look here there we go and here we can now click on our menu icon to open our navigation drawer you are noticing that there is no padding at all which I find a little bit weird because in all other cases the material 3 composables just make sure that the proper padding is applied in this case for some reason it's not so we need to do that manually by just going in here so our navigation drawer item and we need to manually add that padding oops like this here we have a modifier modifier and we say the padding and the padding is navigation draw ER item defaults dot item padding so those are just the default padding values we should apply for each item other than that I would also like to add a little spacer at the very top so spacer with a height of 16 DP Alt Enter import DP and then this will already look much better if we take a look in here there we go open this you can see now we have a little bit of spacing up here we have proper padding on each side and we can select different options here and in the AV we would then navigate so obviously if you would have a real navigation here after you've clicked here or when you click here then you would use your nav controller dot navigate to the corresponding route so you could of course also store the route for each navigation item and then just say you navigate to item not route or so but for that of course you need enough of those you need enough controller you need to set up your navigation arguments maybe um so that's quite a lot of work I have a separate video about that so if you want to learn about navigation definitely search for that on my channel you will find it very quickly I assume but to finish this off let's also go through the different types of navigation draw we have here on the one hand we have a motor navigation row which I've just shown you but we also have the permanent navigation drawer which comes with a permanent draw sheet peridas don't change just for the permanent navigation drawer we don't have a drawer State because we can't toggle it on or off because it always shows if we launch this take a look here then you will see how this will look like as you can see um now there is no point of this button anymore so in this case it wouldn't show the menu button but the drawers always showing obviously for phones this is absolutely garbage don't do that um this is meant to be for a larger screen so especially tablets and desktop screen so this draw is always showing you can switch between these different destinations and the content is pushed to the right here if we uncomment this again scroll up and we change this to a dismissable and navigation draw and a dismissable navigation draw sheet now this is basically the mix between a modal and a permanent draw so if we take a look this time you can see it pushes the content to the right but it is actually dismissible so we can toggle it off again not with this button in this case but um by swiping so you could of course also make it toggle off if you click this button by just using your draw State again but this is now a mix but again just apply this for a screen size of at least tablet other than that if you've enjoyed this video then you probably also enjoy hadap compose as much as I do but with Japan composed you can make a lot of mistakes and I have summarized 20 of the most deadly mistakes you can make with Japan compose in a completely free PDF for you if that sounds good to you check the link down below you can just download it for free and you have a checklist for your future project with mistakes you should definitely not make other than that thanks for watching this video I will see you back in the next one have an amazing rest of your week bye bye [Music] foreign

Channel: Philipp Lackner

Views: 21,279

Keywords:

Id: aYSarwALlpI

Length: 13min 10sec (790 seconds)

Published: Wed Aug 16 2023