Bottom Navigation Bar in Android Studio [Kotlin 2020]

what is going on guys welcome back to a new video on how to create a custom navigation bar in this video you and i is going to build something similar like this where you have a bottom navigation bar where you can navigate between the panels and obviously you can put whatever you want here and once you click on one of these you get a message as well and if you do not like the style do not worry i will be showing you how to change these colors and how to change these icons or vector assets so without further ado let's get started so first you need to create a new project go to file and then new and then click on new project and then click on empty activity click next and name your project and then click on kotlin and then click on finish so first you need to add your google material design dependency go to gradle script and then click on build gradle and just add your google dependency just like that and click on sync now if you run your app you're going to see that you have an action bar and i will be showing you how to remove this action bar and how to change these colors so you need to go to resources and then values and then click on style.xml here you need to change this to no action bar and you can change your colors here so click on that and then go to custom and choose your color so i will be choosing this and change this as well alright so if you run your app one more time as you see we have removed the action bar and changed the color so now you need to create some vector assets or icons for your navigation bar so go to drawable right click and then new and then click on vector asset and here you can find your icons search for an icon that you need so in this case i'm searching for a dashboard and then click on ok and then change the color and then choose white and then name your icon icon underscore dashboard click on next and then finish so now as you can see we have a dashboard vector asset so we need two more one for settings and one for info so right click on drawable and create a new vector asset and search for setting and then click on that and change the color to whites already white and then name your icon and then click on next and finish one more time search for info click on ok and then rename it and then click on next and then finish and now you need to create a new directory for your menu right click on resources and then new and then click on android research directory name your directory so menu and then change the type to menu and click on ok so once you have that right click on menu and then click on menu resource file and name your file to menu and then click on ok so once you have done that go to menu xml click the screen and here you need to add your items so let's do that item and then we need to provide an id and then the id would be icon underscore dashboard and now we need to select the dashboard icon the one that we have just created in drawables so icon and then drawable and then click on dashboard and now we need to add a title for it and we will name it dashboard once we have done that we need to create two more items one for settings and one for info so once you have done this you need to go to mainactivity.xml and this is where we will style our navbar so just delete that and go to google android material navigation bar and then identify the width and height so we will choose a match pattern and then wrap content and do not forget to add an id and the id would be something like bottom navigation so once you have an id for that you need to put some constraints on the navigation bar so constraints bottom to the bottom of parent so that we push the navigation bar from here to to the bottom of the panel and now we need to add more constraints so constrains left to the left of parent and then constraints to the right of its parent and now we need to inject the menu to it so app menu and then we click on the menu that we have created and now you need to color the background so you can give whatever color you want but in this case we do not need white so just click on that and click the color that you want and once you have done that you need to change the color for the icons so item icon tint and then change it to white and item text color and then change it to white as well so once you have this you need to create a frame layout so a frame layout is basically a container that you will have it here so that you put your fragments in what i mean by that you can put your panels here so whenever you click on this navigation bar the panels or the fragments will be changed and this would act as a container for it so you need to have a frame layout and you need to specify the width and height so match parent and for the height just give at 0 dp for now and do not forget you need 10 id and call a fragment container and you need to set some constraints to it constraint top would be to the top of its parent so constraints top to the top of parent and constraints bottom to the top of this navigation bar so constraints bottom to the top of basically the id of this one bottom navigation all right i think this is it so to see your result run your app one more time as you can see we have the nav bar and you can interact with it however we do not have any fragments or panels here so let's create three fragments one for dashboard and one for settings and one for info so to do that just go to your project and then go to your app and then go to your java and here create a package so right click on this and then click on package and name it to fragments so once you have fragments now you can create your fragments into this package so right click on this and then go to fragments and then click on fragment blank and name your fragments so the first one would be dashboard and unclick this and click on finish so now you need to create two more fragments one for settings and one for info so right click on fragments and then go to new then fragments a blank one call it settings fragment and unclick that and then click on finish and one more fragments blank fragment and then name it info and then unclick that then click on finish if you see these red lines do not worry just close your android studio and open it again this would solve your problem all right so once you have resolved a problem as you can see you have three kotlin fragments and you have three layout fragments so if you go to fragment dashboard here you can specify whatever you want to be appeared in that panel so i would like you to change the frame layout to constraints layout so constraints layout and now give an id for that text give a dashboard id and change this match parent to wrap content and change this to wrap content as well and once you have done that change this to dashboard and give a text size of 36 sp so and now we need to push this down to the middle so we need to set some constraints to it so constraints top to the top of parent and then constraints bottom to the bottom of parent as well and we need to set some left and right constraints so constraints left to the left of parent and then right to the right of patent as well so once you have done this we need to do the same for the other fragments so just copy this and go to project and go to info fragment and split the screen and paste this here change that to constraints layout and change this to info and obviously you need to change this to info as well so if you see an error like that it tells you that the namespace does not bound so click on alt shift and enter so once you have imported that there that should solve the problem and we need to do the same for the last one which is setting paste it here let's call this settings and change this to settings as well and change that to constraints layout and alt shift and enter this would solve the problem so once you have done that now you need to go to your main activity kotlin all right so you need to create three private variables for the fragments so private val and then we call it dashboard fragment and equal to dashboard fragment and do the same for the other two so private file and then call it settings fragment and then settings fragment and the last one is the info so and for fragment and then info fragment all right so once you have done that you need to create a function to replace fragments so private function and then call it replace fragment and that would take fragment and then the type of a fragment and it's always good to check if the fragment that we have passed is not null so fragment is not null and then if it's not null then we need to proceed so we need to create a transaction variable so file transaction and then support fragment manager and then begin transaction so once you have the transaction object call the object and then replace the fragment and then resources id and then we have fragment container the container that you have created and in the main activity so once you specify on which container that you want to replace the fragment now you need to pass the fragment and then transaction then commit so once you have done that call this function in the beginning so that we set the dashboard fragment to it once we run the app so replace fragment and then we would pass dashboard fragment to it so if you run your app the first thing we will have is a dashboard fragment so as you can see we have imported the dashboard fragment here so if you click on the others nothing will appear and now we need to set on click listeners on these items so that once we click on this we replace this dashboard with the settings fragment to do that you need to call bottom navigation and then you need to set on navigation item selected listener when item id if something is selected we need to specify if it's a dashboard or settings or info so id dot icon dashboard if this is selected and then you to call replace fragment and then pass dashboard fragment to it so you need to do the same for others so if if it's settings and then you need to replace the fragment to fragment and do the same for info icon if that's the case then call replace fragment and then info fragment however we have a mistake here it's not equal it's like that and then the reason that we have an error because this would expect to return true and once you have done that i think this is it so let's run our app so if you click on settings and the fragment has been changed so if you go back to dashboard and then if you go to info and now i will show you how to add a toast to this text if you click on that we should have a message here that says welcome to dashboard for example so let's do that so if you go to your dashboard fragment you need to override on the created method so to do that click on alt then insert and then go to overwrite methods and search for onview created and then click enter so once you have done that select the dashboard text view and now you need to select onclicklistener so unclick listener and then add a toast here so toast and make test and then context text welcome to dashboard toes dot lens short and show the message so let's do the same for the info fragment click on alt insert and then overwrite the method so on view created then info and set onclicklistener to it and add the toast make text and then context i'll come to info and the toast would be the limit short and show so let's do that for the last one click on alt insert same as before and on view created and go for settings and set click listener and add a toast here so to see the result of the app just run your app one more time and if you click on dashboard you will have a message so if you go to settings and if you click on the settings you will have the message as well so for the info as well all right guys so if you have made it here congratulations and if this is your first time here and you want to learn more on how to build awesome mobile applications web developments and programming tutorials please consider subscribing and click on the bell notifications so that you do not miss on anything and see you guys in the next video

Channel: CodeWithMazn

Views: 13,222

Rating: 4.8832116 out of 5

Keywords: how to implement bottom navigation with activities in android studio, bottom navigation bar, bottom navigation bar android, bottom navigation android studio, bottom navigation android, android bottom navigation, bottom navigation in android studio, navigation, bottom navigation view android, bottom navigation, android bottomnavigationview, android bottomnavigationview fragment, android bottom navigation bar, android bottom navigation bar with fragment, android studio tutorial

Id: v8MbOjBCu0o

Length: 12min 57sec (777 seconds)

Published: Sat Jul 25 2020