BottomNavigationView with Navigation Component - Android Studio Tutorial

hello there and welcome back to my new video so in this video I want to show you how you can integrate bottom navigation bar with navigation component so we're going to start a new project and as you can see we're going to remove this default text view and we are going to add the bottom navigation view okay so Android studio will prompt us to add the dependents for that so click yes and the wait until Gradle finish building your project so next we want to add the constraints to our bottom navigation view left right and bottom okay so now for the layout width we're going to say match parent and for the layout height we're going to wrap content okay so for the background we're going to use white color instead of this default black color so now let's first okay so now go here on the resource manager and let's add the navigation graph so the name for our navigation graph should be for example my nav ok and now Android studio will prompt us to add all the dependencies for an irrigation opponent just click OK and after that we're going to start by adding destinations so let's create the first destination in this project we're going to have a three different destinations so the first destination will be named the first fragment ok so let's create another one and the second destination should be named second fragment ok just do not include those effective methods and let's create the last one third fragment or click finish ok so we are not going to connect those three destinations because all of those three destinations will be top destinations so we will have three top destinations and our Start screen will be our first fragment ok so now let's add the navigation host fragment or can choose select this navigation graph which we created and let's connect those constraints left right top and bottom ok set them to 0 all right and the next thing what we're going to do we're going to customize those three layouts for our fragments so fragment first layout frame and second layout in fragment third layout so I'm going to speed up this a little bit so basically we're going to have a one textview on the center of the screen on each of those three layouts so I'm going to do the same I'm going to just change the text to first fragment second fragment and the third fragment of course so we can distinguish those three designations okay let's just set the text text size and fragment third layout as well do the same thing okay change the text and text size and that's it okay so now that we have created our layouts for our three destinations we can go to menu and create a menu for our navigation bottom navigation view so our menu resource file will be named a bottom menu and here we're going to have a three items three menu items so don't worry about this preview on the right side because we're going to this menu for our bottom navigation and not for this one okay so before we continue editing our menu let's first add the three vector icons so the first icon will be for our first destination which will be home okay so the second let's choose another one we're going to choose a icon for our profile so the profile will be for our will be for our second fragment and the third one will be settings metal fragment okay just click Next and finish and now in our menu we are going to link those vector assets so the first home item will have a Home icon the second one will have a person or profile icon and the third one settings icon so just let's change the titles home profile and settings okay and now we need to add the IDs for those three items and basically let's first open up navigation graph and here we're going to select our first destination first fragment and copy di D so basically those items of ours will link to our items from our navigation graph to our destinations so our menu items will have the same ID as our destinations so first fragment second fragment and third fragment okay all right so now we have created our menu successfully and in our main activity layout we want to add our menu to our bottom navigation view so just use this menu attribute and past the bottom menu as you can see now those three icons appeared so we can run the application to see how that how will that look okay and as you can see we can see them but when we click on them nothing happens so what we need to do we need to initialize our bottom navigation view and our navigation controller and merge them so let's first create bottle navigation view object and let's find the idea of of our view so the idea is bottle navigation view and next let's create a navigation controller object and let's find that ID of our navigation controller and the ID is a fragment so basically navigation control is our nav host fragment okay and just below that we're going to use bottom navigation view object and it's method set up with nav controller and we're going to pass never controller here so now let's try navigating here and as you can see it works perfectly fine but there is a few more things which we want to change and when we switch from home to a person and from person to Settings we want to change the action bar title so to do that we need to create a bar configuration object okay and here we need to pass a set of three destinations set of three top destinations so the first one is the first fragment and the second second fragment a third the third fragment so we have warning here so we need to change a compile option so open up a Gradle build file and here if you have these compile options where it says 1.6 you need to delete that and you need to pass these compile options with a very with the version of 1.8 and down below our coding options as well if you're using costing of course okay so now that we have that sinker project and go back to our main activity and here down below we're going to use a method set a set up action bar with nap controller and we're going to pass nap controller and AB bar configuration and now let's run our application again to see how will that work and now as you can see we have fragment first fragment second and fragment third titles whenever we switch to our destinations but if you want to customize those names you can that you can do that easily also go ahead and head over to a navigation graph and here just changed the label attribute here so home profile and settings okay and now let's run our application once more and everything should work fine okay so we have a home here or file and the settings so now it works perfectly fine and also it looks very well so that'll be all thanks for watching please like this video find it helpful and of course seen the next one

Channel: Stevdza-San

Views: 102,120

Rating: 4.8677249 out of 5

Keywords: bottom, nav, navigation, bar, bottomnavigationview, view, component, fragment, fragments, slide, switch, destinations, destination, how to, guide, tutorial, top, level, menu, onclick, listener, item, items, navigate, nav graph, navhost, host, navhostfragment

Id: Chso6xrJ6aU

Length: 7min 52sec (472 seconds)

Published: Thu Apr 16 2020