Navigation Drawer in Android Studio using Kotlin | Explanation

foreign welcome back to my channel in this video we will create navigation drawer you already know how navigation drawer looks right it opens at the right side of the screen consisting of multiple fragments I have already explained fragments in detail you can click on the I button to watch so in this video we will create navigation drawer with four fragments and one toast got it so let's create it see now we do have a predefined template of navigation draw it's already created so it is going to be a little confusing for business hence we will create it from scratch so choose empty Wheels activity and click next name it as navigation drawer and click finish let's first do the prerequisite so go to colors.xml press Ctrl D to duplicate the line name the color as blue and hex code AS 1890 F1 then go to strings.xml over here we need to add two strings which will act as a command for navigation drawer so first is open navigation drawer and second is close navigation drawer and that's it next go to themes.xml make sure parent theme is set to no action bar because we will be using a custom toolbar instead of action bar okay then uncomment it and write the color as blue then duplicate the line and write the item name as color primary variant then again duplicate the line and write the item name as Android status bar color and that's it next I will require a logo image that will be present in the navigation header so let me quickly copy paste it and then you can download the image from the link in the description box now we also need to add five Vector asset basically the icons you can search as home settings Share info and exit icons okay so let me quickly add all of them I'm done now all the prerequisites are done let me close all the depths now listen to me carefully as we are creating navigation draw so first we will create a menu then we will create a header and then combine both of them in the activity main got it so let's first create menu right click on the resource folder then new and then Android resource directory choose resource type as menu and click ok now once the directory is created let's create the menu inside it so right click on it then new and then menu resource file name it as nav underscore menu and click ok now inside it we will create file items home setting share about and log out out of which four of them will be fragments and one will be a toast we will see that in main activity okay now first keep the tools show in as navigation underscore View then we will create a group and in that group we will have four items in it okay so first keep the checkable behavior as single which means you can click one at a time like radio but it's like you can't click two fragments at the same time right then as I said we will have four items in it so write item and inside that keep the ideas underscore home and icon as home then give it a title as home similarly we will create other three item as well so let me quickly do that and it's done see we have home settings share and about now I need a separation line and log out item so to create that write item and inside that right title but keep it as blank that will act as a separation line then inside the item we will create a menu and then inside that menu we will create a logout item so write item give it an idea snap underscore logout then I can exit and lastly title as log out and that's it this is how it looks as I said this is just the menu now we need to create navigation header so right click on layout folder then new and then layout resource file name it as nav underscore header choose the root element as linear layout and click ok now inside the header we will have one image that will be our logo and two text that will be an aim and email got it so let's create it as it's a header so I'll keep the height as 170 sub 3p then I will give the background color as blue you can keep a background image as well if you want to then add all the necessary attributes now inside the linear layout as I said I will add one image View and two text View so first let's create the image View keep the width and height as wrap content and srcsr logo then create a text View keep the width and height adjust track content and all the necessary attributes then again create a text view add all the necessary attributes [Music] and that's it our header is created now as I said previously we will combine the menu and header in activity main so let's do it clear draw a layer then give it an ID keep fit system Windows as true which means it sets the padding of the view to ensure that the content does not overlap the system Windows okay then keep the Open Drawer as start means it will be at the right hand side of the screen got it now we have to create three things first if the custom toolbar second is frame layout and third is navigation view where we will combine menu and header so first let's create custom toolbar but we will create it inside the linear layout so let me quickly create the linear layout and then inside it I create the toolbar as I said we are not using action bar instead of that we will be using toolbar so keep the width and match parent and height will be as same as action Bar's height that is 56 DB give it an idea toolbar and add all the necessary attribute and then then we will create frame layout so I guess you guys are aware how fragments work right so basically they replace each other in a fragment container and that fragment container will be a frame layout so keep the width and height as match parent and IDs fragment underscore container now outside the linear layout we will create navigation view so let me quickly create navigation View and then see I have kept the layout gravity as start means it will be on the right hand side of the screen then in Hidden layout I have attached the name underscore header which we created and similarly I have attached nav underscore menu in menu then with the help of item I content and item text color I have kept the icon in text colorless glue simple right and that's it now as I said previously we will have four fragments so let me quickly create it and it's done now just for the show purpose let me quickly customize all the fragment layouts and it's done next let me quickly remove all the unnecessary code from the fragments and it's done now let's go to mainactivity.kt so I have divided any eighth step let me give you a quick overview so in first step we will declare an initial install layout then in second step we will initialize the toolbar and in the third step we will initialize the navigation view next in the first step we will set the navigation drawer menu on the action bar toggle then in fifth step we will create a replace fragment method then in the sixth step we will create on back press method next we will set the default fragment and lastly the eighth step we will create on navigation item selected and that's it now let's create it step by step so step number one that is to declare and initialize store layout so let me quickly do that and it's done Next Step number two initialize the toolbar then using set support action bar I'll set the toolbar then step number three is to extend on navigation item selected listener so write comma navigation view Dot on navigation item selected listener and then over here initialize the navigation View then using navigation item selected listener set it as this means set navigation item selected listener on this that is our main activity right it will sit on the navigation View then step number four here we will create a toggle so the action bar drawer toggle class is responsible for handling the interaction between the navigation drawer and the app's action bar that is basically a toolbar so let me quickly write it and then I'll explain you see this refers to as main activity then comes the draw now that contains navigation drawer then try this toolbar that we created and lastly the string that represents the accessibility description for opening and closing of the navigation door then add toggle on the drawer layout using add drawer listener and lastly sync the state now step number five is to create a replace fragment method using fragment transaction so let me quickly write it and then I'll explain you now see we have declared fragment transaction and initialize it as support fragment manager which basically is responsible for managing the fragments within an activity then it begins the transaction then transaction dot replace specify the replacement of current fragment with the new fragment remember we created frame layout whose ID was fragment underscore container that is what we are using over here then transaction dot commit basically applies the changes to the fragment container and that's it we will be using this method in on navigation item selected for replacing the fragment with each other but before that let's move to step number three that is to handle on back press so let me quickly write the code and then I'll explain you now see on back press means if the navigation drawer is open and we click on the back button then in that case what will happen we will handle that okay so if the drawing is open and we click on the back button then it will close the door got it else means if the draw is not open and we click on the back button then in that case it will exit the app got it right now step number seven here we will set the default fragment so whenever we open the app first fragment should always be our home fragment so to do that the first we will write if saved instance state is equal to equal to null means that is now previous data is saved means the app is killed then in that case it will replace the fragment using a replaced fragment method which we created before right also set the checked item as navrome that is basically our menu item right set checked item means it should point at it now step number eight and and last step that is to create on navigation item selected so write override fun basically function tools on navigation item selected then inside it I'll use when if you want you can use if else as well so right when and inside it I'll write item dot item id which means it will take the item ID from the menu which we created before right so we have five menu items right home settings share about and log out so inside that me write r dot ID as name home and give it an arrow operator so basically Arrow separates the condition from the execution part like in this case nav home is the condition and replace fragment with home fragment is the execution part got it similarly let me do it for other three items as well and done last item is nav log out in this case I have not created any fragment instead I will throw a toast so write those dot make text and so basically when you click on the logout item it will throw a toast as log out simple right then lastly I'll close the navigation drawer means once the user clicked on the fragment it will automatically going to close the navigation door and then return through that's it we are done with the coding now let's run the app initial fragment is set to comb fragment then I click on menu and see how beautiful it looks we have header with image and two text then we have four fragments let me click on it and see we are in setting fragments perfect let me try other as well and all of them works perfectly fine then let me click on logout and see there is a toast as logout great so yeah that is it for the video if you are new to this Channel please consider subscribing to my channel and I'll see you in the next video [Music] foreign

Channel: Android Knowledge

Views: 6,996

Keywords: navigation drawer android studio, navigation drawer tutorial, navigation drawer, android navigation drawer fragment tutorial, android navigation drawer tutorial, android navigation drawer fragment, android studio, android navigation drawer, navigation menu, side menu android studio, android navigation drawer material design, android navigation drawer material design example, android studio tutorial, android tutorial, drawerlayout, android, android development, beginners, kotlin, ui

Id: zBETkYi9Z4E

Length: 21min 21sec (1281 seconds)

Published: Tue Jun 27 2023