How to Create a Navigation Drawer With Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to a new video today we're going to cover navigation drawer in jetpack compose what is a navigation drawer well that is a typical slide-in section in your app i'm sure you've seen that in terms of apps already typically that is represented by such an icon here this i think it's hamburger menu icon and if we click on that then nothing happens then our draw opens and that is the navigation draw so typically we have some kind of header which could be an image or so here just a placeholder and then you have a list of menu items so you could use that for example for navigation you could use that to yeah display some user data for example to have a little log out button or whatever become creative here i'll of course only give you the template here so you're ready to kind of transform that into whatever you want to actually implement so let's actually just just jump into android studio here without further ado and start to implement our navigation drawing compose how does that work well to implement a navigation drawer we need something called a scaffold a scaffold is kind of a container for specific ui items that we commonly use in apps just like a navigation drawer for example but not only for navigation drawers it's also used for example for our top bar for app bar which we essentially also do here in this tutorial which is um this little toolbar here because we need that to actually toggle the navigation drawer or that's at least the common way to toggle a navigation door and i will of course show you that here in this video and i will split this up into some smaller composables one for the header and one for the actual body of our navigation drawer which will represent our menu items so let's go to our root package create a new cortland file called in navigation and draw there will be a file and we'll just put all the composables in there that we will actually use here for our draw i will start with the most simple part which is the header we can type comp here to have that abbreviation for the composable function and i'll call this navigation or let's call it draw header just like that and i won't give it any parameters since i will just use a static header here that will be in form of a box and the modifier will be modifier fill max width and we want to make sure to give it some vertical padding so we say padding vertical is let's say 60 40p and we want to import dp pressing out plus enter so far so good let's also say content alignment centers so that the text we will now put into this box is actually centered so text here and that just says header and we can also increase the font size a bit to 60 dp or sp rather just like that i think that's nothing too special here let's actually get to the more exciting part and that is creating our body our menu items which i'll do right below here so again composable and that will be called drawer body so well how do we now pass in our menu items here into this navigation door if we think about one item then what does it actually mean what kind of data does it need to be represented on the one hand of course we would like to pass an individual icon for each item and on the other hand we would like to pass a title so just a text that gets to that gets displayed as the item and something we also would like to have for some kind of id maybe that if we click on an item we can later easily detect on which one we actually clicked so we don't need to deal with comparing titles or so that's usually not a very good way to check if you clicked on an item instead we only we want a unique identifier for each item we can then easily use to find the item we clicked on so for that i will create a wrapper class in our root package which i will call let's call it nav drawer item or we can call it menu item rather because it could also reflect some other menu item that is somewhere else in your app it doesn't need to be linked to a navigation drawer let's say that is a data class and on the one hand it will have an id which i will set to string here it will have a title of course which is also string and it will have an icon and the icon will be of type image vector which is the compose class or the composed representation of an image of of an icon then we can go back to our navigation drawer file and we can pass in such a list of menu items then we want to be able to pass a modifier just in case we want to modify and change the appearance of our draw body we want to have an optional item text style so in case we would actually imported the wrong text style there make sure to import the compose one so in case we want to change how the text of our items look like and i will default this here to text style where i'll set the font size to 18 sp and that's it and something i want is an on item click function which just gives us that callback when we click on an item so we can actually do something outside of this draw body composable and that will give us the menu item we actually clicked on the way i will implement this is using a lazy column since we could have a large number of menu items we'll only have three here for this example but in case you have a lot and you want to scroll then i recommend using a lazy column like this and we can also attach the modifier here to that lazy column and all we want to do here for this laser column is we want to specify an item's block to tell it hey these are the items you actually want to show make sure to import this version of items that has a list of type t and then we can pass our items open a block of code and we get a reference to each item now that we have in our items list so if we have three menu items this block will be called three times and we now need to take this item and the data it represents and kind of show that in corresponding ui so in our case we want to now have a row here with an icon on the one hand and with a text on the other hand for the title of our item so on the one hand we will pass a modifier to that row because i would like it to fill the whole width of our screen we want it to be clickable because when we click on this row we essentially trigger our own item click function and well on which item did we click in this case well on the item that is currently that we got here and i like to add a little bit of padding oops not another click little block i want to add padding of 16dp and inside of this row we can actually just put in our icon which as you can see takes an image vector which is exactly what we can get from our icon from our item and the content description i will just set it to now you could also pass this of course in the menu item which i would let's just do it because i want to tell you normally i would do that but not in this tutorial let's just pass in the content description uh what is the advantage of passing a quantum description well it's accessibility so let's say someone is blind then they might have that setting enabled on their phone that that they can just click on something and the phone will speak out to them what they just clicked on and yeah that is what a content description is for example useful for it's also useful if you do ui testing and you actually want to find a specific composable on your screen and you can say okay i actually want the composable with this specific content description and i want to simulate a click on it or so so especially on things like menu items you want to do that because that is a that's a thing that is commonly clicked on so in here we're going to pass item dot content description let's put that on separate lines and i'll put in a spacer in between so we have a little bit of extra width of 160p here and then after that we have our text that occupies the rest of the width and the text will be item.title and i'll also add a modifier to this text which is modified at weight one f um the weight modifier here will just do that the text will occupy the rest of the width that it gets in this row so the icon will get its width then the spacer will get its width and the rest of the width of the column of the row will be given to this text composable and we also want to assign our text style so style is equal to item text style so that is it for our navigation drawer content however what is still missing is of course our app bar so the way that we can easily toggle the navigation drawer so let's put that in a separate composable file we go to a root package create another carbon file called app bar file call that app bar and all that will give us here is an on navigation icon click lambda so when we click on this toggle icon we want a callback so we can easily toggle our navigation drawer in the end so for that we will use the top app bar composable here which we need to configure a little bit i want to get rid of this block and i want to specify a title block so the title will obviously just be the title of our app bar which i will use text composable for and that will be my cool app or whatever your app name is you could also say you use your string resources and say are the string app name then it will just take the name of your app so um apart from that what do we want here we want to specify the background color as material theme colors background no actually primary for the toolbar which is typically the background color for the toolbar and we want to specify the content color as material theme colors on primary so that will be the color for the text which of course should be the color whatever we want to have on our primary color since that's our background color and we use the material theme here just to be able to also um easily support dark mode so we don't hard cut our colors here to let's say violet and white which actually are the colors here but if we would then switch to dark mode and we would have like another type of violet or so and we would actually need a black text color on that because it's just yeah a better contrast then yeah if we hard code this it would just be it would just look bad and if we don't then it will be flexible by just having two types of color sets and one last thing we need here is of course to specify or to tell our top app bar that we'd like to have a navigation icon and we can easily do that using navigation icon and in here we're going to specify an icon button the onclick function will just be equal to our on navigation i can click and as a content for this icon button we will specify an icon the image vector will be icons default menu for this which is the hamburger menu icon and the corner description should can just be toggle draw also just like that and we can put these arguments on separate lines and that's it for top app bar now we can actually set up our scaffold as i said where we can simply take this app bar put it in the placeholder for the app bar composable and the same for the navigation drawer so we're going to have a scaffold here and as i said the scaffold is used to easily pass these typical ui components we use with material design like navigation drawer like top app bars like bottom sheets and all that stuff and here we want to specify the draw content you can see a bunch of drawer parameters you could manipulate the shape you could tell it whether you want to you want to be able to swipe it away or so with this gestures enabled and you can specify a color for that an elevation so how much shadow you would like to have we're just going to use the draw content and specify our draw header and then our draw a body and here we of course need to specify a list of menu items which will just be a new list here now let's create that here menu item id is equal to yeah let's say that one settings or let's start with whom the title will be home content description can be go to home screen and the icon can be icons default home i can then copy this and paste it like two more times or so just as many menu items as you would like to have this could be settings settings and go to settings screen and what could this be for example help help and content description could be yeah get help and the icon could be info for this actually here i didn't change it as well which i want settings cool so we now specified three menu items that is very easily extendable now by just adding more here in this list and here on item click well what happens if we click on our menu item that i just want to print a line clicked on it dot title so just that you see that it works to click on these menu items and in a real app you could just perform your navigation here for example to get to the home screen to the settings screen or whatever you actually want to do when the user clicks on your menu item and for that it might actually be really helpful to have ids here so you could easily say when it dot id is for example settings or so because you know this id won't change it's unique and then you can easily say okay when i clicked on settings i want to navigate to settings screen or so whatever you want to do there that is how i would do it here in this case so now we specified our navigation drawer here for our scaffold but we still need to specify our top bar our top app bar that we also created here and which i'll just put in our app bar and that gives us a call back when we click on the navigation icon which i like to use with a name parameter since now we know what this callback is for and in there we what do we want to do well we actually want to toggle our navigation drawer how do we do that how can we programmatically toggle our navigation drawer now well for that we need a navigation drawer state and that navigation drawer state is contained in the scaffold state which you can easily get by saying that scaffold state is remember scaffold state if we then pass this and assign it to our scaffold like this then we can now use this instance of the scaffold state in our navigation click callback to toggle our navigation draw so we can say scaffold state a dot draw state dot open and that is how we would simply open a navigation drawing compose programmatically we still get an error here because we would need to execute this inside of a curtain which i won't go further into here where the curtain is um i have a full playlist about that so you can simply find that in my playlist section on the channel it's basically just a way to um do asynchronous programming since it of course takes a little bit of time to perform that animation that the navigation drawer opens and as long as that's the case this function will simply block the creatine we will run it in to do that we need to have a scope here which you can get with remember remember curtin scope we can then launch it scope that launch and we put this inside of the scope and the error will be gone and if we then launch this app and i will take a look here on my device let's open this that's still my prepared version of this app that's the new one you can see our app name displays and if we click here then the navigation drawer displays you can of course change the background just as either in the prepared one or you just replace it with an image or whatever and if we click home settings help home or so we should be able to see that in the logs that we clicked on these items so let's say um clicked yeah clicked on home clicked on settings help home so that is working perfectly fine something i don't like here in the compose version of the navigation drawer is um we can of course swipe it away which is great but um that's buggy when i use a visor here let's let me use my fingers um wherever we actually start the drag it will open our navigation drawer so even if i even if i start the drag here um you can see i can open it and in xml that actually wasn't possible you would really need to start the drag right at the edge here of the screen to open it and because i don't like this i will show you how you can kind of bypass this or disable dragging here at least when the navigation door is closed and we can do this using drawer gestures enabled and here we need to specify a boolean whether we want this dragging to be possible or not and we can simply set this to scaffold state draw state is open so only if it's open we want to be able to drag it away if we now relaunch this take a look here then now we can open it here with dragging wherever we try it but if it's open then we can't close it because dragging is actually enabled if the drawer is open unless it's closed yeah and that's just buggy because of visor here because i mirror my screen and if you want to jump to the next important jabra compose ui concept then you should really click here and watch the next video in this playlist you

Channel: Philipp Lackner

Views: 36,556

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, jetpack, compose, drawer, navigation, menu items, menu, slide, drag, swipe

Id: JLICaBEiJS0

Length: 19min 44sec (1184 seconds)

Published: Wed Jun 01 2022