SLIDABLE MENU WITH NAVIGATION DRAWER - Android Fundamentals

[Music] hey guys welcome back to new video this video will be about navigation drawer which is kind of a slider menu which is used in very many apps so you can either click on a toggle button to open it up or close it or you can simply swipe from the left to the right to open it up first we want to make sure that we included the Google material design dependency so we open up our built at Gradle module app file and then make sure that you have this line in here in your dependencies block if not then just write it off and click on sync now and then we are good to go so then we go back into our activity main dot XML file and we will start by creating our layout and as you can see my root layout here is a constraint layout but for a navigation rod this won't work because every time we want to use a navigation drawer we have to use a draw layout as our route layout so let's replace this constraint layout with a drawer layout and I will give it an ID of draw layout and this drawer layout should only contain two different views one for the activity of fragment and one for the navigation view so let's start by quitting constraint layout here for the activity views and I will set the width to match parent and the high two and then we can simply open that tag up and I will just paste attacks view here just for simplicity that we that I show you how to actually insert views into that activity and still have that navigation drawer I will set the width of that textview to add content and the height to I will set the text to activity the text size to 40 SP then we can close the tag off go into our activity layout take our textview and constrain it horizontally in parent and vertically in parent then we go back to the XML code and now we need to go below our constraint layout and here we want to create a navigation view so that navigation view is just the view that slides in our activity when we click on that toggle button or when we swipe from the left to the right I will set the width to Rev content and the high to match parent then we want to have a header layout for that navigation view so every navigation view or not every navigation view but we can use a header for our navigation view which is just a space on top of our navigation view and we can fill it with other views we will create that header layout in a sec so after we finished that activity layout here and we do that by writing header layout and here we have to provide a layout file for our header which we don't have yet so I will just write add layout nav header so of course this doesn't exist but this is how I want to call it next is we want to set the menu for our navigation view so we write menu these are the menu items that we are able to select later on so our menu doesn't exist either so let's right add menu nav header menu which we will also create afterwards then we need to set the layout gravity of our navigation view to start because if we wouldn't do that our navigation view would just overlap our whole activity and we want it to be outside of the activity by default so let's wide layout gravity and I think yeah I had that problem before it the suggestion doesn't work here but we can just write Android layout gravity even though Android studio doesn't know it we can still use it and set it to star it will work and finally once you set fit system windows to true which just means that the navigation drawer will leave space for system windows such as the status bar and finally we can close that navigation view off and that's it for our activity layout next we want to actually create that nav header layout file so the layout file that has all the views in it that we want to have in our navigation view header to do that lets go into our layout folder right click new or Croesus file and name it exactly like we did it in our XML code nav header leave as root element the constraint layout that's fine click OK and actually I don't want to put any viewers in this in it in this tutorial I just want to change its background color to color primary just to recognize later on which part of our navigation drawer is the header and I also want to change the layout height of it to 150 DP and that's actually it for our nav header we can remove this closing tag here and replace it with this short attack and then we can go to our res folder again right click new Android resource file and this time make sure that you select menu as resource type and call it nav draw menu I think let's see how I call it an activity main or I call it nav header menu that's actually not how I wanted to call it let's call it a natural menu here and then we are fine to go go back into our and after our and from menu and here we can create our menu items that we want to have in our navigation drawer so we open the tag right item I'll give it an ID of m-i item one and set the title to item one close that tag off you could also give it an icon but I won't do this here just copy this item face two times below just for demonstration we name the ID 2mi item two and item two item three and MI item three so that actually it for our navigation drawer menu the rest needs to be done in our main activity so let's open that up and here we need to create what is called an action bar draw a toggle and that is simply used to have that toggle button in the tool bar to be able to open and close the drawer by simply clicking and we still we will still be able to open the drawer by swiping from the left to the right but that toggle button is very useful to open it up by clicking so for that I want to create a late init bar juggle and this is an action bar draw a total and if you don't know what this late in it var means that is just basically a promise that we will initialize this variable later on so we don't have to give it a value right here because we need this toggle variable to be global we don't want to define this in oncreate because we will need it in another function later on so we just tell Kotlin that we will initialize this one later and we still don't want to have a nullable type here so we could also be we could also use var toggle is an action or draw trouble that is not able and set it to null initially but then we always have to do with these null checks and we don't want that we know that we will initialize it so we can just use a light in it bar then we go into our own create and the first thing we do here is to actually initialize this toggle so we write juggle is equal to action bar draw juggle and this action modrart all it takes as a first parameter our activity which is just this the second parameter is our drawer layout which we also called draw layout and then we need to provide two string resources for opening and closing the the navigation drawer and these screen resources are just used for example if blind people use your app then the string that we provide here will be read out loud when they open or close the draw so we just have to create two string resources here and we'll just call these artists string dot open and our dots green dot close and of course we have to create them so we go into our res folder values strings dot XML and create a string here open which just say it's open press ctrl D to duplicate that line name it close and right close here and we can go back into our activity and here we need to add that juggle to our drawer layout so let's write draw layout drawer layout dot add draw listener and here we can just pass our toggle and after we have basically connected this toggle with our draw out we have to tell our toggle that it should sink its state so if we do that by trouble dot sync state so that just means that we tell our trouble that it's now ready to be used then we need to do one more thing which is overriding on options items selected and we need to do that to respond correctly to clicks on our toggle button and to respond to clicks on the menu items in our navigation drawer if we don't do this then nothing nothing will work we won't be able to open our drawer by clicking on the toggle button so you actually always have to write the same code here when you use a navigation drawer so let's write EF toggle and that is actually where we need this toggle to be global to access it in our own create function and in our own options item selected function so if toggle the add-on options items selected and then pass this menu item here so this item if that is the case then we simply want to return true in this function so then we know that the user clicked on that toggle button and then we need to return true in this on options item selected function so now we want to go back into our own create function and call support action bar make sure to make that mul check here and we want to call set display home as up enabled to true so what that means is that we just that we're just able to open our trouble and when it's opened that toggle button we moves to a back arrow and we can click on that back arrow and the navigation drawer will close again so that actually is enough to be able to open and close our draw but I also want to show you how to respond to menu item clicks so let's quickly do that for that we need to add a navigation item select a listener to our navigation view and I think I forgot to give it an ID so let's go back into our activity main.xml file to our navigation view and give it an ID of nav you and go back to our main activity right nav view dot set navigation items selected listener and here we can use a rein expression so when it got item ID it is just the current menu item that was clicked on and we want to respond to the idea of that item because we gave it IDs in our menu resource file so in case we clicked on our ID dat mi item one and we just want to show toast here toast or make text you can just pass application context as text clicked item one choice dot length short and call that show on it and I will move it to two lines then we can copy that line paste it two times below for our other items make sure to rename this to mi item to mi item and three this one - oops and make sure to go below of your one expression and write true so that just means that we return out of this lambda expression and between true means we handled the click and that's it we can just start our app now and let's see what happens so as you can see here's our text view that says activity so we just have a normal activity layout here and we have that toggle button in the top left corner here if we click on it then our navigation drawer will open here you can see is our navigation header so you could also put any views in it and make it even higher so set the height to more DP and we have our three menu items which you can also extend to more menu items of course and if we click on them it says click item to click item and click item one click item two and click item three and we can just slide this draw in and we can slide it out again which is kind of difficult in the emulator but yeah as you can see the icon in the top left turn to an arrow to go back and if we click on it it will switch to that hamburger icon again so yeah that's it for this tutorial I hope it was helpful for you if so please leave a like and comment below also if there is anything I can improve on please tell me in the comments that would be really helpful for me see you next video have a good day bye bye

Channel: Philipp Lackner

Views: 46,121

Rating: 4.8634148 out of 5

Keywords: navgiation, android, tutorial, programming, kotlin, 2020, navigation drawer, android studio, coding, development

Id: do4vb0MdLFY

Length: 15min 0sec (900 seconds)

Published: Sun Mar 15 2020