Android Bottom Navigation and Drawer Navigation(with Fragment) - jetpack navigation tutorial

hello welcome back to my channel today our topic is Android bottom navigation and dry and navigation using navigation jetpack component I had videos on Android navigation component and since then I got requests from some of my viewers to do a video on bottom navigation so I am doing that this video for them in this tutorial I will show not only the bottom navigation but also navigation through Dreyer layout so before starting and encoding I would like to show you what we are going to build today so this is our app this is really simple app and there is no special UI actually we have three fragments and you we can let me get through these three programs with the help of the bottom navigation you see click here you go to the news and profile and we can go back to our home by pressing back button or pressing the UP button in addition our button and we also have the drawer layout and having the same animation facilities in the navigation bar so and you can go anywhere so this is our app and this app we are going to build today from scratch [Music] let's open the Android studio and create a new project select an empty activity and give a name of this project navigation finish well as I have told that we will use three fragment in our project and before doing anything we will add dependencies in our Gradle build on credit so go to our builder cradle and I will just copy/paste I have already written this and I will also put this dependencies in description box so you can also simply copy and paste in your project this is the dependencies and another dependency for the navigation and the drawer layout ok wastage here and just simply sync or project the next thing I would like to do I will create three XML files for three fragments actually this 3 u ey files for this fragments and we create and this layout design is very simple just a text box inside so layout resource file and name it fragment home fragment and just go home there's a constant layout and I will just copy and paste it here and say taste view monitor enter only you see the design let's make it little bigger so you can see it easily so this is our fragment home fragment we will do the same copy/paste oh ok one thing we will add data binding here so so go to our code and select the constant layout and and press alter enter and convert to data binding me out okay just click it I will select all the inter layout file and the next thing I will going to do I will create another two fragments and all those contents of this XML layout are same just the I will make change on the text field and the ID field maybe and rest of this those are same so I will go real fast [Music] all right we have we now have nice three little fragments and fragment layout actually now we will create the real fragments and navigations and connect those fragment through the navigation [Music] let's create our fragments go to our package hit me here and right click and select quarterly so the fragment here fragment blank and name it first home fragment and we do not need any layout you know to creating a layout XML or anything like that so as we have already created the layout so we just skipping it and finish now another thing is we created variable late in it late in a default name is binding and this type will be the name of this type the fragment home okay so fragment home as we have already created up data binding so it will be fragment home binding and here we just just delete these and right and right binding equals fragment binding dot inflate and it will be inflated okay and lastly we will return binding doors root winding route okay fine so we have created the home fragment and we just simply copy these two those two lights and we use it reuse it in those other two fragments also so it will quickly create those two fragments fragments like simply do not need them and it will be news fragment created variable the same thing Paulo plate code late in each binding and it will be type of fragment news binding fragment news finally and in this two line we will just ASOS land we previously copied and it will be no more fragment home binding it will be fragment news binded okay news binary and another fragment when he made profile fragment Aleut in it okay let it move more a little prettier so waiting it more binding and it will be frog name profile binding and it will be fragment profile binding okay that's it so we have created our fragments now what we will do we create a navigation graph for the fragment okay so we go to the resource folder and we will create another directory the name of the total will be the navigation so right click here and create android research dilatory and we may need their training is navigation you can give any name and the values will be navigation ok and ok and we select the navigation and right-click and say new navigation resource file I really give the name as app underscore navigation now we go I will go to a design section and we can simply add those all our newly created fragments here ok this fragment has appeared the home fragment news fragment and profile fragment we firstly the home fragment at home fragment will be the starting point for our app and we will add another two fragment news fragment and profile fragment ok at the sisters we I will not create any action between those fragment I will just simply add those fragment here no action is required right now actually for our bottom maybe addition or droid maybe we do not need any action unless otherwise we create any button in the any up our fragment so we left it here like this the next thing we will do we will create a nav host fragment we need a fragment host fragment to all those fragments inside the activity so we go to our main activity dot XAML file and here go to the text and we do not need the text view rather than I will make it a fragment fragments fragment and I'll make it the we'd match parent much parent I do not need any text here rather I will get an ID the ID will be ID host fragment and I need to select a name that a so it will be name name will be Android X and X dot navigation dot fragment dot nav host fragment and we also need to say the compiler that it is our default neighborhood fragments also at default now host default I host it will be true true and here we also need to introduce our network innovation graph so it will be app now graph it will be new app navigation we just created that abnegation this file and that's it we can entice estates we can run our project and see what we can see in our budget app so run our project however I have well made a little mistake that is it will be default never host the in will be in capital letter so I give run again and in your emulator we can see the default or starting fragment is here because we have selected the home fragment as our starting from you see the starting fragment as is our home fragment so it is here but we have as we have not defined any bottom navigation or drawer navigation yet so we cannot go to there is no way to go other navigations like news fragment or profile fragment which we will create in couple of minute but in this stage we can see yes our fragments and activities all are working fine [Music] for dryer navigation or bottom innovation whatever in use we need a main to basically tell the SDK to draw a draught some means in our bottom navigation or to our navigation and for this reason we will create a menu item and that name will be navigation menu and we will go to the race folder and create a territory so to tweak which type will be main and the name will be Meno and replace okay and inside slate our menu directory and create a menu resource file and the name of the file will be navigation under school menu and we click OK but I have forgotten one thing as we have icons with with our we will have icon with a lot of bottom navigation and draw a navigation so I already have created some icon which we will just copy paste in our drawable folder okay so go to our file and these are the icons and paste it here okay we got everything now we go back to an evolution menu and we are going to create some items there are three items so it will be item and every item has ID title and icon so the ID will be Android ID and please give your attention that the ID we need to give some attention so the ID will be same as the IDS we have used in the navigation graph okay this is the AB make navigation graph and we have IDs for these three fragments home fragment news fragment and profile fragment we should have the same ID in that menu or maybe under stone and so it will be ID home fragment the title will be home and icon will be I think this icon like I see home okay we I see home and we will simply copy and paste it two times and do some modifications it will be news fragment name will the title will be news and it will be IC news this one will be profile fragment will be profile and I convinced IC 4 5 so our menu has been created we can also have a look from our design view and this is the menu and this same thing it will be the same menu will be used in the bottom medication as well as in the dryer navigation okay [Music] now we will create a navigation bottom navigation in our main activity so the activity will have been XML and here at the very bottom before the constant layout end we will create a tag it's name will be bottom navigation so and about two minutes on this one bottom navigation and it's layout width will be match parent and height will be web content so wrap content okay and we give it a ID ID will be bottom navigation and as it it is inside our constantly out it will be constraint to the constant to the bottom of our our layout so we simply copy it right left and bottom and paste it underneath here also we can give it any color so the color may be I think I guess it's a background color okay okay background so background will be with anything like I given any arbitrary thing c1 d1 maybe II 1 okay this is the background color and what else and most important thing we have to declare the app menu so it will be menu and the menu will be will just created the navigation menu this one this navigation menu okay this will be that menu moving toward overt or activity me so it will mean and we simply close it okay now we have to do some work in our Kotlin fight also to to actually set up the our bottom irrigation so we go back to our main activity and inside the oncreateview we create a variable so a variable would be enough controller control and it will be fine of controller to BR dot I did or host fragment by the way this first problem is that host fragment in the main activity inside the main it's a activity I recommend this is the fragment okay so this is the idea the host program this one we are referring okay now we will simply say photo navigation by this bottom navigation is the ID of the of this our our bottom irrigation so it will be bottom navigation dot sit now controller setup setup with knife controller this is this is the function and instead we give it as a parameter and I think we have done so I will run this app hopefully we find it we will get our nice bottom navigation okay let's open our emulator and we are now and we see there is a bottom navigation and when I click the news it goes to the news fragment when I click it profile click profile it goes to the profile anything and when I click the back button it will go to the our home fragment our starting fragment and then and when we inside the home fragment if we click the back button once more it will leave the application so everything is working fine so how our bottom navigation part is done so I think you have enjoyed the bottom navigation but later on this tutorial I will also do some modifications on bottom navigation and also create dryer navigation Aviation Drive [Music] up until now our app is working fine but we have a little problem problem number one is so far the only navigation only back button we are using is the physical back button but according to material design we have to use a arrow button in on the action bar which is also called navigation app button and number problem number two is when we click in the news or any bottom navigation yes the fragment is changing but we also want to see the fragment name on the action bar so we will address this kind of will solve this kind of issues in this section using the navigation app button so let's add a navigation up in our action bar okay so for this we will create a legend it fur it will be up for configuration app bar configuration this is the ampère configuration and ok these two line will work for bottom navigation so I just give a comment to understand better both on education and in this section we are we will create navigation up button sewn aviation and button ok ok now we will simply up maybe just instantiate it so it will be app bar configuration and it will be Neph controller dot graph okay so now controller dot graph it will just return the graph ok I think we need to modify this one also just create a latent variable it laughs controller with the type of nav controller and we need we will delete the valve okay okay great now our app configuration has been created but we will add this a little arrow so for the little arrow we have a we have a class named navigation UI and thought it has a function name set up action bar with nail nav controller and we'll simply this this is the our activity this and it will be nav controller okay so this line will this line will create a create a nice little arrow button here and the next thing we need to do if we click the arrow button way to go to the exact fragment so we have a we need to override a function which name is on support navigation up maybe get up we will override it outside our outside our unclean field so on create so it will be outside on support may be get up and we have a prebuilt class name navigation UI which will help us to help us to navigate to the exact fragment so it will be negative y dot what may be hit up and it will be nav controls our nav controller and this upper configuration so AB bar configuration so hopefully our both our app will run fine okay oh I forgot the and write the return from return keywords so it's written and we run whatever so I open your damn elated and when I go to the any new fragment any fragment we can see the nice little arrow button here this is the navigation of a button so when I click here we go to the home fragment and we we we also noticed that the word the name of the fragment is shown on in the action bar which was so our both of the our problems has been solved but the second problem brings us a little issue that we showing the idea of the fragment known to the name of the fragment and when I use the news fragment when users see see it it it makes no sense to him the news fragment what the hell is the fragment so I we will create a custom title for our fragment this can be done very easily we go to our navigation graph navigation graph this is our navigation graph and here the home fragment we did label here we just change the label and fragment labeled is home profile fragment a level will be the profile and the news fragment profile will be the news and we ran our app once again so from our emulator now we can see this is our home just showing home instead of home fragment which was little weird and the news and profile so everything is working fine so we have created an epic it up and also add a custom level on the fragment [Music] so the last part of our video to this video tutorial is adding draw navigation for adding the to our navigation we will go to the activity main.xml file and here we will create a drawer layout at the top of the day's XML and as and it will be done that word layout will be the main view group the parent view group of this XML layout so we just collapse the constant out and give a tab here and here we create that drawer layout okay so layout and it will be give your ID the ID will okay okay okay the first thing we do we just copy these three lines here actually cut these two lines and add these two lines here so and we give it a name ID yet ID ID will be ID to our layout and wheat and height width and height will be match parent and height also will be the best parent okay and we got this line and add to the very end of this and to give it a little tap okay and we also need to add another another view which will be a navigation view the name of the navigation view just before closing of the drug layout so it will be navigation view and the navigation view has the width of wrap content and height of mash parent the the ID will be ID will be navigation view and and this new patient view by the way is a part of our drug level okay and the layout gravity I think it will be so it will be Android you know sometimes I might just just this solution doesn't work I don't know why this is happening so layout gravity we start and the most important thing is we need to just like we use in the bottom navigation here the navigation menu we also need to add this medication menu by the way we are using the same navigation menu in your real life project maybe this will be different so it will be main will be mini mini this that's it so so we created to our layout at the very top and before just closing the drug lord we add an eviction view which is also a part of draw a layout the next thing we need to do some work in the Quadling file so go back to our main activity and here we see the Neff controller and okay well we see the upper configuration and inside the upper configuration when we use the NAB grab nav controller that graph we add another parameter which will be intra a layout underscore layout by the way to our layout is the ID of our onto our layout okay and we also add another parameter to our layout here with the setup action bar with nav controller so it will be way out and for and the final finishing touch is okay let me give a comment here so it will be drawer layout and the final thing so a layout and final thing nation and final thing we will attach the navigation view by the way this is the navigation view the navigation view and set the drawer layout we attach the Novation view with our navigation ey class so it will be navigation you I dot set nav controller it will be navigation view dot animation you and sorry not common app controller okay and we build a wrap hopefully our app will work so you know what I mean emulator finally we got a navigation drawer draw an evolution and when I click the navigation drawer we got the navigation menu here and if I click the profile it go to the profile go back and if I click to the news it go to the news and everything is working fine okay and while maybe our an eviction tour is working really great but one thing is missing something is missing like most of the you see in real life most of the navigation drawer has a nice little picture and title here which is also called a navigation hitter why not we have an immigration hitter we are going to apply it to real life so let's create a navigation header for our navigation drive create a navigation droid droid header is relatively very simple we go to our race and layout and create a layout resource file and name will be where hitter [Music] and here the it okay so the height will be the weight will be match parented wrap content so wrap content and the height will be I think 192 TP if you want to a larger or larger header you can use any number so and we give a background color so the color background will be I will use color accent and okay there's it and I think we need a padding some padding here so padding will be say 30 DB in each direction and inside it I will create a image view though it will be and I want to set the image view inside the constant inside the constant loud at the middle so it will be 0 TP and 0 DP and so the source will be distinct I think I think we have trouble this foreground ok Oh ground for ground and ok we we need to attach to the constraint also I'll just do one thing we just go to here and from the fragment we just copy paste this line these four lines there so copy here and paste it there and hopefully let me show how it will look like I think it will be better to have match parent much fun then it will look better ok and let's add it to our navigation view so inside our drawer layout we go to the navigation view and here we will create header it header layout the header layout we will draw we just created drawer let's go header and we run our app once again let's open our emulator and see when you pin our that we see the header with an image you can make you may add any title here or subtitle here there's your choice but the main thing is our drawer layout is full functional our bottom navigation is pushed functional and we have successfully created bottom navigation and draw and navigation so there's all about this tutorial let me know if you have liked this tutorial or not and if you have find any problem please let me know in the comment box and also tell me you can suggest me or ask me from you know what type of what type of Tyrael I will make the make in the next video and if you like the video is splash the like button and subscribe if you not subscribe yet and hope you enjoyed the video and till to the next video thank you for watching

Channel: Munir Hoque

Views: 9,444

Rating: 4.9205298 out of 5

Keywords: android bottomnavigation, android bottomnavigationview, android bottomnavigationview fragment, android bottomnavigationview tutorial, android bottomnavigationview example, android bottom navigation bar, android jetpack navigation component, android bottom navigation bar with fragment, android bottom navigation, android drawer navigation, android drawer menu, android drawerlayout example

Id: vH-V-RF0Jds

Length: 39min 35sec (2375 seconds)

Published: Sun May 03 2020