Navigation Drawer and Bottom Navigation View in Android Studio | Kotlin

foreign welcome back to my channel in this video we will create navigation drawer and bottom navigation together it's easy to create both of them separately but it's kind of tricky to create them together I have already created a video on it previously but it was in Java so this time we will cover it in codeine here is a quick little preview this is how bottom navigation will look and this is how navigation drawer will look you can switch from one fragment to another fragment also you can click on the middle Floating Action button it will throw a toast then when you click on navigation drawer item it will open the respective fragment for the remaining items I have put a toast on it so this is what we are going to create in this video the code and modding is quite simple so let's create it choose mdbo's activity then click on next write the name as navigation and bottom and then click on finish let's do the prerequisite first so go to colors.xml press Ctrl D to duplicate the line write the color name and screen and hex code AS 4fa 853 and done now go to strings.xml first change the app name to Amazon now we require two strings to toggle between open and close of navigation drawer so let me quickly write both the strings we will be using both the string value in main activity and it's done next move to themes.xml make sure the parent is set to no action bar because we will be using our custom toolbar for which action bar is not required uncomment this line and write color primary screen then duplicate the line and right color primary variant also a screen again duplicate the line and write Android status bar color and done now go to build.gradle app here we will write build features and inside that I'll write view binding as true then click on sync now and then now close all the tabs so we need to add 11 Vector assets and one image okay so let me copy paste the image then right click on drawable new and then Vector asset now select home icon similarly you have to add all the other Vector assets as well let me quickly do it and done these are all the names of Icon you can search them accordingly and add them in the drawable folder now we are done with all the prerequisite as we are creating two manual status bottom navigation menu and navigation drawer menu hence we will require a menu directory with its respective menus so right click on resource folder then new and then Android resource directory and keep the resource type as menu as well then click ok right click on menu directory then new then menu resource file write the fine name and bottom underscore menu and then click ok first we will create a bottom navigation so as you saw it will have four items and one Floating Action button in the middle so the first item is home we will have three attributes as ID Titan and icon same way we will create it for profile as well then we will leave a space for floating action button and keep enabled as true which means it is clickable now copy the previous item and paste it we will use it for creating card item and then the same way we'll do it for menu item as well and that's it bottom menu is created now next let's create navigation drawer write the file name as nav underscore menu and then click ok so we will have six item under navigation draw add necessary attributes tools show in will create a user interface of navigation drawer all the six items will be inside a group whose checkable behavior is single which means it will act as a radio button that only one at a time can be clicked okay inside the group we will create a first item as Prime with ID icon and title similarly we will create other items as well so let me quickly create them and it's done so we have Prime fashion Electronics fresh Beauty and furniture so navigation draw items are ready and now it's time to create navigation drawer header so right click on layout folder then new and then layout resource file write the file name as name underscore header and keep the root element as linear layout and then click ok here keep the height as 176 DB then gravity has stopped padding as 16 DP then background as green and then theme as app compare top I'll be using one image in the header but you can create a profile image with a text view as per your requirement so I'll keep the layout gravity as Center and add a respective header image and that's it now it's time to assemble everything in activity main.xml so instead of constraint layout we will be using drawer layout as are parallel okay because we are creating navigation draw hence we will require drawer layout then give it an ID as draw on layout and then remove the text view because we won't need it okay instead create a relative layout with height and width as match parent then inside the relative layout we will be creating a custom toolbar I'll keep the background as green and give it an elevation as 4 DP and then give the theme accordingly then we will create a frame layout with height and width as match parent and IDs fragment container so basically we will be using fragments hence we will require frame layout here the bottom navigation will be as it is in the same place only the fragments will keep replacing each other in that particular frame layout okay now we are creating a floating effect bottom navigation for that we require bottom app bar and to create and bottom Empire we will require coordinator layout so keep the width and height as match parent now inside the coordinator layout we will create a bottom Amper keep the layout gravity as bottom and background tint as green as I said we will be using bottom member to give that floating effect to Floating Action button so we will add Fab credit margin as 10 DP and Fab Gradle rounded Corner radius as 50 DB then inside the bottom member we will create a bottom navigation View give it width and height as wrap content and IDs bottom underscore navigation then set the label visibility mode as labeled and add the respective menu that we created before else we are using bottom map bar color so we will keep the background here as transparent then we will add The Floating Action button outside the bottom member give it a background tint as green and add icon then anchor or attach it with bottom and Bar increase the icon size to 40 DP and give it an IDs Fab and that's it lastly create navigation drawer outside the relative layout okay give the ideas navigation underscore drawer then keep the layout gravity as start now give icon color as green also the text color and screen lastly add the header in the header layout and add it respective menu which we created before okay and that's it of course it's not going to be visible here but we will see it at the run time now close all the tabs so we need to create seven fragments for each items so four fragments will be for bottom navigation and navigation drawer will have six items in it so three will be fragments and three will be toast okay so right click on package then new then fragment and choose blank fragment name it as home fragment and then click on finish similarly we will be creating other fragments as well to save your time I have created them already so you can see the name and create them accordingly okay let me quickly remove all the unnecessary code from all the fragments and done also we will redesign all the fragments giving them their respective names so here we will write a text as home and give it a gravity of Center and text colorance green similarly let me quickly do it for other fragments as well and done now close all the tabs finally let's go to main activity as we are using navigation drawer hence we are required to implement on navigation item selected listener so write navigation View dot on navigation item selected listener it shows an error to implement methods which we will do it in a while okay before that let me quickly add all the necessary variables so write private late in it where fragment manager as fragment manager because obviously we are going to deal with fragments hence we will require fragment manager then private lady knitwear binding as activity main binding and that's it now let's set up binding so initialize binding as activity main binding dot inflate as layout inflator then set content view as binding dot root and that's it now let's implement the members so select on navigation item selected and click ok see the error is gone and we also have our method which we will do later for now we will Implement another method so write override fun that is function on Mac pressed so this method handles the back button with navigation door so let me quickly write it and done see if says if the navigation drawer is open and we click on the back button then the navigation drawer will be closed else if the drawer is already closed and then when we press the back button then it should exit tab got it now let's move to our next method that is open fragment method let me quickly write it and done so instead of writing the same code again and again we will reuse this method so we will use fragment transaction and fragment manager that will help to replace the fragments in the fragment container which is a frame layout right in fragment transaction we have several methods like adding the fragments removing the fragments or replacing the fragment out of which I have used replace fragment method then lastly committed men's finalized changes now back to our on navigation item selected method this is where we will assign all the items to their respective fragments so first let me create a win that will act as a switch case so item dot Item ID and that will take the IDS of the item that are present in the navigation drawer so if you remember we have given the ideas to all the items present in nav underscore menu XML file right so if the item ID is nav Prime that is our first item in the navigation drawer then we will use open fragment method which will open the prime fragment similarly we will do it for other item IDs as well and then we have Prime fragment fashion fragment and electronics fragment as I previously said we will be redirecting three items to fragment and three items to toast so let me quickly create a toast for each item [Music] and done now we have fresh Beauty and furniture also after selecting the particular item that navigation doll should close automatically hence draw a layout dot closed drawer and lastly written through now come inside the oncreate method here we don't have action bar right so we will set our custom toolbar as our action bar using set support action Bar Method now we will use action bar draw toggle where we will set the first parameter as this which means main activity then second parameter as draw one layout itself which means our entire activity main the next parameter we will set it as toolbar that will act as our action bar and lastly we will add both the string value which we created at the start right finally we will add draw listener as the toggle which we just created and synchronize the state of it then we will set navigation item selected listener as this so if you remember we have implemented on navigation item selected listener at the top so basically we are setting it on navigation drawer and we are done with all the navigation door code now let's move to bottom navigation code as we are using a transparent background in bottom navigation hence we have to set background as null then we need to set on item selected listener on bottom navigation just like the way we did for navigation door so I'll write binding dot bottom navigation dot set on item selected listener then item as when now again the logic will be same that we will get the item dot it and if the item ID is bottom home then it will open the home fragment simple right similarly let me quickly write for other item id as well enter see if the user will click on bottom profile then it will open profile fragment and same goes for cart and menu as well lastly return true then we will also add our opening fragment so when you open the app the very first fragment should be home fragment got it so to do that initialize fragment manager as support fragment manager an open fragment as home fragment okay lastly we will set on click listener on Floating Action button so let me quickly write it and done if you want you can open a bottom sheet dialog or maybe uh open a new fragment it's totally up to you but for now I have created a simple toast that says text as categories and that's it we are done with the coding now let's run the app it looks perfect as I previously said the opening fragment will be our home fragment then we have profile Floating Action button toss then cut and then lastly menu all of them are working perfectly now let's see the navigation drawer I'll click on Prime and see Prime fragment is opened let me try other items as well and they are also working perfectly fine now I'll click on fresh and see there is a toast then back to home fragment as you saw navigation drawer and bottom navigation both of them are in the same place only fragments are replacing each other got it 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: 22,917

Keywords: navigation drawer activity android studio, navigation drawer android studio, custom navigation drawer android studio, navigation drawer in android, navigation drawer android studio in hindi, navigation drawer android studio firebase, navigation drawer android tutorial, navigation bar android studio, bottom navigation bar android, bottom navigation bar, android bottom navigation, android bottom navigation bar with fragment, bottom navigation view, kotlin., together, android knowledge

Id: 3VIzc_uhUCQ

Length: 27min 36sec (1656 seconds)

Published: Wed Jul 26 2023