Bottom Navigation Bar - Android Studio | Fragments | Java | 2023

hey there everyone welcome to another video fox and white so in this video we're gonna learn how to implement a bottom navigation bar along with the fragments into our Android application so let me just quickly demonstrate what we're going to get by the end of this video so if you see on my mobile screen if I just open up this app so here we can see our bottom navigation bar with three icons the home one profile and settings and the home fragment is already open if I just tap on this profile icon we can open the profile fragment and similarly we can open the settings fragment and similarly that particular icon is highlighted and we can go back to home fragment as well so if you want to implement the same to your INR application make sure you watch this video till the end so without my channel let's get started [Music] so guys if you're new to this channel make sure to hit that subscribe button press the Bell notification icon for some notification of the upcoming videos and by the end of the video if you like the video make sure to hit that Thumbs Up Button as well so let's start with the development so the very first thing we're going to do is we are going to designer front-end part so we'll just go to our XML file I'm going to delete this text view we don't need this and the very first thing we are going to [Music] insert is a navigation view all right a bottom navigation View and the second thing we are interested in is a frame layout so we should constrain this bottom navigation View horizontally to the parent and to the bottom as well and the width should be match parent and the height should be wrap content right and for the frame layout we should set the constraints horizontally to the parent and the bottom constraint should be set to the top of our navigation view now let's go to the split window put the frame layout we shall set the width and height as 0 TP and we shall constrain this to the parent on the top side as well right so this is our frame layout this is our bottom navigation view right now we are going to add some Vector assets for the icons so new Vector assets just search for home icon here okay next finish okay we have got all the three icons right the home person in settings now what we need is we need a menu bar for our navigation view so for that just right click on this resource folder Android Source directory and if I if you just type M or you select menu from here we'll get a manual Source folder so just tap OK this new directory has been created now right click on this menu source file right so let us just name it as bottom nav menu [Music] right [Music] click ok so we have got the menu and here we want to add three icons right so menu item one two and three now again let us just go to this plate window and we shall give a ID our first I should change the titles the home file and settings and now we shall set the icons and we shall give it a ID as well so the ID for this will be home so we have got our menu items now we are going to set this menu to our bottom navigation bar so we'll just go here just type menu and set this menu right here you can see we can see all the three icons with particular names at the bottom so we are almost done with our front end part now we are going to add three fragments so let me just quickly add these three five minutes so I've added three fragments home profile and settings so now let us just quickly uh change the text and set the background for this right so let me just quickly do that so okay guys we are done with the fragments so I have just implemented a basic thing to differentiate between all these three fragments right definitely you are going to design these fragments according to your application now let me just quickly enable The View binding so okay now we are going to go to our backend code and here again I have to do the viewbinding thing so activity main binding it's okay we're done with the binding thing as well I don't think anything needs to be explained here right so now what we want to do we want then whenever a user Taps on any of the items here on these items right we want to listen to that event and we want to act according to the item the user has clicked on so for that sorry will set on peaklessness binding dot bottom navigation view right I guess the ID for this will be bottom navigation view only so yeah bottom navigation View and we shall give ID to this as well frame layout give a simple ID right so then we have a method called that on item listener selected listener right okay so we shall return true here whenever user select any item we will get the item here in this variable right so now we'll we are going to use a switch case so switch we'll get the ID of the item that user has clicked on so get Item ID now we are going to use the cases so the first case will be if the ID is equal to home all right I guess the idea we have set is home profile and settings only so if the ID is home what we want to do let me just break here right the second case is if the ID is equal to profile break don't just worry about it right we are just going to implement these things case if the ID is equal to settings right break don't worry about These Warnings so now we are going to create a method that will replace our frame layout with the fragments so we are going to create that method outside this oncreate private void place fragment and the argument it will take is the fragment of course so fragment fragment [Music] fragment manager so we are not going to discuss about this fragment thing already have a tutorial on this if you are not aware about this I have in retailed explained how fragments work how we replace fragments whenever user Taps on any items right I'm using the same code here so fragment transaction dot replace r dot ID dot frame layout I guess the idea of that is okay so you want to replace the frame layout with the fragment that has been passed as an argument to this method right so fragment transaction dot comment right it's okay whenever user Taps on any of these items we want to replace the frame layout with that particular fragment so here we want to call that method so replace fragment and we want to pass the object of home fragment rate and similarly we're going to do it here profile fragment and here as well with [Music] settings fragment so inside this particular case you can do anything whenever user Taps on that might be you want to raise a toast you can do that right so here just for the illustration purpose I am going to replace the fragments so this is almost everything we need to do to implement this so we have set on click listener we have got the item right the ID of the item and will use the cases or that will let us know that on what icon the user has tapped so accordingly we'll do our task so here's one problem one more thing we are going to do is so whenever the app opens for the first time what we want is that the home fragment should be shown on the screen so on oncreate we are going to use replace fragment and we are going to pass the object of Home fragment right so what we'll do is it will replace the frame layout with our home fragment so let me just quickly install this app to my cell phone and check if it is working fine or not right so here is the app has been installed to my cell phone as you can see by default the home fragment has been loaded if I just tap on profile we can switch to profile fragment settings and home fragments so this is how you implement the bottom navigation bar you can see that it is quite easy to implement this right and I hope that if you if you are not aware about this after watching this tutorial you can Implement your own bottom navigation bar so at Max you can add I guess five icons here on the bottom navigation bar so you just need to add more menus here on the menu right and you can also implement this bottom navigation bar along with nav components right so if you want me to make a tutorial in which we use this part of navigation bar with nav components I can do that just comment down on this video that you want that tutorial I'll definitely create that so I hope that you guys have understood the code still if you're in love after watching this tutorial you can definitely ask me in the comment section I can DM you on Instagram the Instagram username will be there on screen right now and if you like the video don't forget to hit that thumbs up button in case you're new to this channel make sure to hit that subscribe button press the Bell notification icon Force even notification of the upcoming videos so that is it for today's videos see another video bye [Music]

Channel: Foxandroid

Views: 84,597

Keywords: android bottom navigation bar, android bottom navigation bar with fragment, android bottom navigation, bottom navigation bar android studio, bottom navigation view android studio, bottom navigation view with fragments android studio, bottom navigation view with round, android bottom navigation example, android bottomnavigationview fragment, android bottomnavigationview tutorial, android studio, java, android bottomnavigation, android bottom navigationview, navigation bar, 2023

Id: jOFLmKMOcK0

Length: 13min 28sec (808 seconds)

Published: Sun May 21 2023