Navigation Drawer using Kotlin in Android Studio || Slidable Menu with Navigation Drawer || Kotlin

hey there everyone welcome to another video fox Android so in this video we're gonna learn how to implement a navigation drawer into our Android application using cartoon as the backend language right so let me just uh demonstrate what we're gonna get by the end of this video so if you can see on my mobile screen if I just uh press this hamburger sign right on the top left corner you can see a navigation drawer comes up to the screen from the left side right so here we have various options at the top we have a user profile with the photograph name and the email address and then we have certain options if I click on any of the options you can see we can listen to all the clicks here and if I just swipe up to the left left side the navigation drawer closes and if I again tap on it it opens up right so this is what you'll be getting by the end of this video if you want to implement the same to your Android application make sure you watch this video till the end so without Much Ado let's get started [Music] so guys if you're new to this channel make sure to hit that subscribe button and press the Bell notification icon for saving notification of the upcoming videos and by the end of the video if you like the video make sure to hit that Thumbs Up Button as well so first thing first uh to show that circular picture as I've demonstrated earlier the circular picture we are going to use an external Library so for that I have this Library here I'll put the link in the description as well so I'll just copy it will go to applevelbuild.gradle I'll put it here and sync the project right so I'll come back once the sync is completed so okay guys this library has been successfully implemented to our project now we'll go to the activity the XML file where we want to implement the store layout so we'll just go to this plate window so in which activity you want to implement this drawer layout the root layout for that should be the drawer layout right so let me change this constraint layout to draw layout and we'll give it ID as well now inside this parent raw layout we can have another layouts right so let me Implement a constraint layout I'll set the height and the width as match parent and we can have a text view inside this now below this constraint layout right we need to implement this inside the parent door layout we are going to implement a navigation View and we'll set the width as wrap content and the high test match parent right let me just close this and give it ID will give gift idea of nav View now we'll set the layout gravity as start and first system Windows as true so now inside a drawed layout We have basically it is divided into two parts the top in which we had the user's profile picture the name and the email address that is called the nav header and below it we had certain options like home menu and profile those were the menu items so first we'll create a layout for the nav header so we'll just go here right click layout resource file name it as nav header change it to linear layout let me just quickly design this right so guys we have designed this header nav header so we have implemented a image view this circular image view a text View for the username the user email address the text view for that and we have this line right so uh just to show you guys the in what the image looks like so I have the image for the user the sample image I'll just copy it so for example let me just copy this image and put it to the drawable folder now if I just set the source to this image so this is how our image would look like right and to implement this line I'll set the background color to the underline so if I just show you the color code this is the color code the grayish one if you want to implement you can use this color code right So eventually this is how our header would look like now we have to design the menu items that would lie below this so for that we have this menu resource directory here right so if you do not have this directory just right click on this resource folder new Android Source directory from here you select menu then click OK this directory will be created so we'll just right click on this menu source file and we'll name it as nav menu so inside the snap menu we have to write down all the items that we need so let me just quickly do that and we need icons for all these items as you must have seen that along with every menu item we had the symbol icon for that so for that we'll just right click on drawable new go to Vector assets right and for example I want to search for the home one so just type in home so select the required one okay next and finish so we got the home icon here so now I'm gonna add all the icons right all the required icons here okay guys I have added all the vector assets here as you can see delete home login message and all of those required here now I'll set these icons and items to our menu resource file right so let me just quickly do that so guys we have implemented all the menu items right so the thing to worth note is if you want to create a category for example all of these will lie under one category and under the profile category we have this single menu item that is login so for that you have to create an item and under this we have to create a menu and keep the items right so in that way if if you can see here so let me just uh visualize it in the same manner that we are going to see in actual so for that I'll just Implement tools here so this is how our navigation bar would look like so you can see I have created two categories the profile one and the communicate so for that we have to create a item inside that we have to create a menu and then we have to be put the items inside it right so that is how we are going to create these categories right so we have created the menu and the nav header so now we'll just go to this navigation View and we'll set the header layout as the nav header and the menu as the nav menu right so that is all we need to do in the front end part so let us quickly go to the backend code right so here let us create a variable and let us name it as toggle so basically this will be that hamburger sign that will open our drawer right navigation drawer so we'll refer to the drawer cloud and will refer to the nav view as well so toggle is equal to action bar toggle and we'll pass the context of the activity the drawer layout and here we need to create two strings so let me just pass r dot string dot open and r dot string Dot close right so I have these strings here so you can see please create these two string sources open and close and put open and close inside this we need this here and draw layout Dot add or listener and we'll pass this toggle right so support action bar dot set display home up as enabled and we'll set it to true and now we are going to set the on click listener on the menu item so for that nav view dot save navigation item selected listener so we'll use when it dot Item ID and here we'll refer to all the menu items that we have created here right we'll use the resource ID so basically it is similar to the switch case that we use in Java so let me just quickly do this okay guys we have basically raised the toast on every click right so if the user clicks on this share button right share menu item then we will just raise click to share right so the last thing we need to do is we are going to over I don't method that is on options item selected right so if toggle dot on options menu items selected will pass the item and here we'll just return true so that is all we need to do to implement the drawer layout inside our application right Android application so let me just quickly install this app to my cell phone and check if it is working fine or not right okay AC app has been installed to my cell phone as you can see on my mobile screen if I just tap on this hamburger sign you can see this particular navigation drawer opens up right so if I just click on any item so we get the toast for the same if I just swipe it left it closes so I guess we have successfully implemented this navigation draw to our Android application and I also hope that you guys have understood the code if you want me to implement fragments along with this navigation draw do let me know in the comment section so if I if I just get like 20 comments for asking for that fragment thing I'll definitely make a tutorial on this and I hope that you guys have understood the code in case of any route you can always ask me in the comment section or you can DM me on Instagram the Instagram username will be the only screen right now and in case you like the video make sure to hit that thumbs up button and if you are new to this channel make sure to hit that subscribe button and press the Bell notification icon for saving the notification of the upcoming videos so that is it for today's video see another video bye [Music] thank you [Music]

Channel: Foxandroid

Views: 12,004

Keywords: navigation drawer kotlin, navigation drawer, navigation drawer android studio, android navigation drawer tutorial, kotlin, navigation drawer fragments, kotlin naviation drawer, kotlin navigation drawer fragments, android kotlin navigation drawer, navigation drawer with kotlin, navigation drawer tutorial, slidable menu with navigation drawer kotlin, how to implement navigation drawer in android studio, implement navigation drawer kotlin, foxandroid, fox android, 2023

Id: FbULaP71hXU

Length: 17min 31sec (1051 seconds)

Published: Sun Jul 09 2023