Navigation Drawer + Bottom Navigation in Android Studio | All in One App | Explanation

foreign welcome back to my channel in this video we will create bottom navigation and navigation drawer together here is the quick little preview this is how navigation drawer will look and this is how bottom navigation will look you can switch from one fragment to another fragment also when you 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 also previously I have already created a video on navigation drawer bottom navigation and bottom sheet dialog together but that was only a user interface video so it was not fully functional hence I am recreating this project which is fully functional with that said let's begin creating our project so I am using the latest version of Android Studio that is flamingo so you might see a little different interface okay so this is Jetpack compose activity but we'll be using empty views activity then click on next name the activity as navigation bottom and keep the languages Java then click on finish first go to colors.xml under the resource directory here we already have black and white color present so we will duplicate the line and add our color as red and the hex value as ff000 perfect next go to strings.xml first change the app name to YouTube now we require two strings to toggle between open and close of navigation draw 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 change the parent theme to no action bar because we'll be using our custom toolbar for which action bar is not required also the latest version of Android Studio does not provide any theme attribute so I only have to write it so the first one is color primary as black then color primary variant White both of them are the basic color of your app then text color primary is the color of your navigation text color and then status bar color as red okay now the same color primary won't work for navigation drawer because bottom navigation and navigation drawer are in contrast with each other hence color will differ so for that we need to create a separate theme for navigation draw give it a style name and color primary as White 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 asset as well they said 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 menus that is bottom navigation menu and navigation drawer menu hence we will require a menu directory so right click on resource folder then new then Android resource directory name the directory as menu and keep the resource type as menu then click ok right click on menu directory then new and then menu resource file write the file name as bottom underscore navigation 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 ID title and icon same way we will create it for shots 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 subscription item and then the same way we will do it for Video library as well also none of them are visible here because of the theme colors but don't worry they will be visible in activity main now let's move on to create navigation drawer write the file name as navigation underscore drawer underscore menu and then click ok so we will have six item under navigation drawer add necessary attributes tools show in will create a user interface of navigation drawer all the six items will be inside a group 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 our first item as trending with ID con and title similarly we'll create all other categories as well so let me quickly create them foreign so navigation drawer items are ready and now it's time to create navigation draw header so right click on layout folder then new and then layout resource file write the file name as navigation underscore header and keep the root element as linear layout and then click ok here keep the height as 176 DP then gravity has stopped adding a 16 DP then background as white and then theme as app compact dark I'll be using only 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 the activity main.xml so instead of constraint layout we'll be using drawer layout as our parent because we are creating navigation dot hence we will require drawer layout then give it an ID as drawer layout and then remove the text view because we won't need it okay instead create a relative layout with the height and width as match parent and keep the background color as black then inside the relative layout we will be creating a custom toolbar I'll keep the background as red and give it an elevation as 4 DB and then give the theme accordingly then we will create a frame layout with height and width as match parent and ideas 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 only the fragments will keep replacing each other in that particular frame layout okay now we are creating a floating effect for the bottom navigation for that we require bottom Empire and to create that bottom member we'll require coordinator layout so keep the height and width as match parent only now inside the coordinator layout we'll create a bottom Empire keep the layout gravity as bottom and background tint as red as I said we'll be using water mapper to give that floating effect to The Floating Action button so we'll add Fab credit margin as 10 DB and Fab trade and rounded Corner radius as 58 DP then inside the Bottom bar we'll be creating a bottom navigation View here we will set the label visibility mode as labeled and add the respective menu that we created before as we are using bottom Empire color so we'll keep the background as transparent then we will add The Floating Action button in the middle so give it a background tint and icon then anchor or attach it with the bottom Empire increase the icon size to 40 DP and done lastly create a navigation drawer outside the relative layout okay keep the layout gravity as start and give the background color as black now give icon color as white also the text color is white lastly add the hidden in the hidden layout and its respective menu which we created before okay of course it is not going to be visible here but we will see it at the time of runtime now close all the tabs so we need to create seven fragments for each items so four fragments will be for the bottom navigation and as navigation drawer has six item inhale so three will be fragments and three will be toast okay so right click on package name then click on new then fragment and choose blank fragment name it as home fragment and then click on finish similarly we'll 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 now we will redesign all the fragments giving them their respective names so here we will write the text as gaming and give it a gravity as Center and text color as white I know it's not visible here but if you remember we have kept the relative layout background as black right so white text color will be visible on the blank background similarly let me quickly do it for all the other fragments as well and we are done now close all the tabs finally we will add all the functionality in the main activity as we are using navigation drawer hence we are required to implement navigation items 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 which we'll be using in the code and it's done now let's implement the method so select on navigation item selected and click ok see the error is gone and we also have a method which we will do later for now we will Implement another method so right at the rate and you will see option override slash Implement method click on it search on back pressed and click ok so this method handles the back button with navigation draw so if says if the navigation drawer is open and we click on the back button then the navigation drawer should be closed else if the draw is already closed and then we press the back button then it should exit the app but it now let's move to our next method that is open fragment so instead of writing the same code again and again we will reuse this method as I previously said fragments replace each other that's what this method is for okay so we will use fragment transaction and fragment manager that will help to replace the fragments in the fragment container which was our frame layout right then lastly committed now back to our on navigation item selected method this is where we will assign all the items to the respective fragments so first let me create an invariable as Item ID that will take the ID of each item that are present in the navigation drawer so if you remember we have given the IDS to all the items present in the navigation drawer menu XML file correct so if the item ID is equal to the navigation trending Item ID that is our first item in the navigation draw then we will use open fragment which will open trending fragment then go to else if similarly we will do it for other item IDs as well as I previously said we'll be redirecting three items to fragment and other three items will be as a toast so let me quickly create a toast for each item and we are done also after selecting the particular item the navigation drawer should close itself hence skipping it as true now initialize all the required items otherwise you will face null pointer errors I think I have not added ID for toolbar so let me quickly do that and now we can access it perfect then we don't have action bar right so we will set a custom toolbar as our action bar now we will use action bar drawer tool where we will set the first parameter as this which means main activity itself then second parameter is draw and layout itself which means our entire activity made the next parameter we will set it as toolbar that will act as an action bar and lastly we will add both the string value which we created at the start right finally we will add toggle as the draw listener and synchronize the state then we will initialize the navigation View and remember we implemented on the navigation item selected listener at the top right so now we will set it on the navigation View and we are done with all the navigation drawn code now let's initialize bottom navigation View as we are using a transparent background in the bottom navigation hence we have set the background as null then set on item selected listener and it will generate a ready-made code for you so again the logic will be the same that we will get the item ID and if the item id matches with the bottom navigation item id then it will open the respective fragment simple right also in previous video people were facing errors as constant expression required in switch statement hence this time I'm going for if else statement so you won't face that error again so let me quickly write code for all the four bottom navigation items foreign and we are done we will also add our opening fragment so when you open the app the very first fragment will be the home fragment got it lastly we will set on click listener on The Floating Action button so you can open a bottom sheet dialog or maybe open a new activity it is totally up to you but for now I'll be creating a toast only and we are done with the coding also if you face unnecessary error line then go to build click on clean project and see the island is gone now let's run the app it looks perfect as I previously said the opening fragment will be our home fragment then we have shorts Floating Action button toast then subscription and video library all of them are working perfectly now let's see the navigation drawer let me click on trending and see a trending fragment is opened see how smoothly fragments are replacing each other in the frame layout without disturbing navigation drawer or bottom navigation both of them will be in the same place only fragments will change so yeah that is it for the video and if you are new to this Channel please consider subscribing to my channel and I'll see you in the next video [Music] thank you

Channel: Android Knowledge

Views: 19,081

Keywords: navigation drawer activity android studio, navigation drawer android studio, custom navigation drawer android studio, navigation drawer android studio in hindi, navigation drawer android studio firebase, bottom navigation bar android, navigation bar android studio, navigation drawer android tutorial, navigation drawer in android, android navigation drawer material design, bottom navigation bar, android navigation drawer tutorial, android bottom navigation, dialog bottom, java, ui

Id: HIBO5lgsKU8

Length: 28min 27sec (1707 seconds)

Published: Wed May 17 2023