Android Bottom Navigation Example with Fragments

hello guys welcome back to another android application development tutorial in this video we are going to learn about how to implement bottom navigation view in your android application by using bottom navigation view you can easily switch between primary destinations of your application here is an example so here we place a bottom navigation view we have three menu items on it by using these menu items you can easily switch between primary destinations of your app so we can start with a new android studio project the bottom navigation view is part of android material design support library so first up we need to add the dependency for using the material design support library go to creative files open module level gradient file so here i place the dependency for using material design support library now sync project so now here the processing finished successfully now we can set up the layout for the application go to the activity main.xml so this text view is no longer needed so now currently the root element is a constraint layout for my convenience so i'm going to change root element into a relative layout so here i'm going to use fragment for switch between primary destinations of the application so i'm going to add a container for the fragment so here i'm going to use frame layout as a container for the fragment specify with this much parent i don't so much parent specify id for it fragment container now i'm going to add the bottom navigation view specify within do much parent height into wrap content specify an id for it now we can apply some background color for the bottom navigation view for that you can use the attribute background so i'm going to use this color primary default color primary so by using the background attribute you can change background color for the bottom navigation view so now here i'm going to use a white color for the bottom navigation view you can add more attributes later so now we can align this one at the bottom of parent we align parent bottom into true okay so now we can place the frame layout above the bottom navigation view and throw it layout cable bottom navigation view okay so now the layout is ready now we need to add some icons for the menu items on the bottom navigation view so right click the app folder and create a new image asset select image asset so change this one into action bar and tab icons now select clipboard i am going to add three items first select home icon change name of the icon into i see action hall so here the icon color is a black color click next click finish now add another icon and then select image asset this time i'm going to add a dashboard item dashboard select that one change i can name into i see action dashboard add one more item select image asset so this time i'm going to search for a notification icon select this one so here the name change into i see action notifications so now the icons are ready now i am going to create a menu menu resource file so right click the app folder and select and show it resource file name the file as bottom navigation menu select the source type into menu and the first menu icon first specify an id attribute now specify title for this one now we need to specify icon for the menu item so use the attribute and fluid icon select from drivable folder i see action hop yes now we can create the second item second item id into dashboards navigation dashboard change title of the item now change the icon i see action dashboard and this is the last item change id into navigation notifications notifications change title notifications change the icon notifications okay now we can add these icons menu items to the bottom navigation view so go to the activity main.xml file so now we are going to add the menu for the bottom navigation so use the xml link space app and select menu attribute select the menu resource file okay so now we can test it i run the project [Music] yes now the application available on this virtual device so here we have three menu items home dashboard and notification okay so here i will show you one more attribute here you can use this one called title i think that one is label yeah this one label visibility mode so now here both icon and labels are visible so you can switch between selected labeled and labeled and auto so now i am going to use this one as selectors that means label visible only on selected items i run the project again so in this case label is visible only on selected items that is the use of level visibility mode so i am going to use one as selected level this in this case all labels are visible okay so now we are going to learn about how to handle the break events of these menu items so you can use these menu items to switch between primary destinations in your application so for create primary destinations here i am going to use fragments so create first fragment select blank fragment this is home fragment finish the home fragment is created go to the layout for home fragment yes we have a xtv is available with height much parent return height into much parallel this is i change the text into home fragment from fragment and so if the gravity is gravity into center and change the text to size text size into 20 22 sp now change the text style into gold okay so now i'm going to create one more fragment select blank fragment so this time it is dashboard fragment and finish go to home fragment copy this to the layout of the newly created fragment so this is dashboard fragment now i am going to add one more fragment fragment blank so this time it is notification fragment put to the layout for notification fragment change title into notifications fragment okay so we create three fragments home fragment dashboard fragment and notifications fragment so now we are going to switch between these fragments when user click the menu items on the bottom navigation view so go to main activity create variables for bottom navigation view initialize this variable bottom navigation view equal to find v pi i t bottom navigation view okay so first here i'm going to implement some interface on navigation item selected listener now implement method and method on navigation item selector yes now we can register the bottom navigation view with this listener so but bottom navigation you don't set or navigation item selected listener into this okay so for switch between fragments here i'm going to create a separate method boolean lot fragments so this method need one parameter that is an object of fragment fragment equal to null in that case we are going to work on false from this method otherwise so get support fragment manager begin transaction and call the replace method i don't id fragment container second parameter is the fragment object fragment and call the commit method so after after replace the fragment we are going to return true from this method okay so now within the on navigation item selected method create some variables for fragment equal to null to identify which item is selected by the user we are going to use a switch case statement item dot get item id so this is the first case our note id node navigation hall in that case fragment is equal to new home fragment break now we need to add other cases second case is navigation dashboard so new dashboard fragment and here is the last case navigation last one is notifications here it is notifications fragment now we need to return some boolean from this method so here we are going to return the return type of the load fragment from this method so return alert fragment and pass the fragment okay now from the oncreate method i'm going to call the method load fragment and pass the home fragment yes now we can test it so i run the project [Music] so now this is the home fragment so home item on the bottom navigation is selected now now i am switch into dashboard fragment now switch into notification so now i will show you how to change the default color of icon and title on the bottom navigation view so here this is the default icon color and here when you select an item this is the accent color of the application now i will show you how to change the default selected and non-selected icon and title color of the bottom navigation view for that here i am going to create a drawable file viable resource file bottom navigation selector so here i have two selector two item first one if the item is selected we apply some pink color if the item is not selected that is the default color we apply some black color okay now we need to apply the selector for the bottom navigation view so go to main activity here you need to add another two attributes item i contained and item text color so for change the icon color you have to use the attribute item i continued and for change the text color you have to use the attribute item text color now we can test it i run it again so now here we change the non-selected item into black color and when you select this one we change the icon and label color into a pink color so this is how we use a bottom navigation bar or bottom navigation view in our android application i hope you understand the concept for getting more android tutorial updates please subscribe this channel now thank you for watching see you in the next episode

Channel: PRABEESH R K

Views: 1,324

Keywords: Bottom Navigation, BottomNavigation, android bottom navigation example, android bottom menu, BottomNavigationView, Bottom Navigation View, android bottom navigation bar, BottomNavigationBar, android tutorial

Id: WQYhz2GK6t0

Length: 20min 17sec (1217 seconds)

Published: Wed Nov 11 2020