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

hey there everyone welcome to another video fox and white so in this video we're gonna learn how to implement bottom navigation bar using hotline SD back-end language so let me just demonstrate what we're gonna get by the end of the video so if you can see on the emulator I have this app opened and on the bottom we have three icons home profile and settings home fragment is already open so if I tap on this profile button the profile fragment opens up and similarly if I tap on settings the setting fragment opens up so this is what we're gonna get by the end of this video so this is the basic illustration of how to implement the bottom navigation bar so if you want to implement the same to your end application make sure we watch this video till the end so without Much Ado let's get started [Music] thank you [Music] so guys if you're into this channel make sure to hit that subscribe button press the Bell notification icon for saving 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 front end part so this is my main activity so let me just split this text view we need this so let's first add the bottom navigation view right and then we need the frame layout for our fragments right so we are going to constrain the bottom navigation view horizontally to the parent and the bottom two parent as well and for the frame layout we are going to constraint it horizontally to the parent and the top to the parent is built now let us just go to the split window so for this bottom negation let's set the height to wrap content right he can see it has taken up the height automatically and let's just set the width as 0dp let's just set the height and width of the as well and let's just constrain the bottom of this to the top of the navigation view so we are pretty much done with this just one thing we need to give bit ID so let's just call it frame layout right and it already has ID of bottom migration view so let's just keep this in that way only now for the icons we are going to need three icons so we are using Vector essay so new Vector asset so let's just search for home let me just quickly add these assets so okay we are done with the vector Assets Now what we need is we need the menu bar so Android resource directory just type M here so you'll get menu resource directly let's just create this so new manual source file so let's just name it as bottom map bar or just name it as bottom nav only right so okay we are going to add three menu items so one two and three right so let's just set the title of this as home and let's just give it ID as well [Music] and we are going to set the icons for this as well right we are done with the navigation bar now let us just set it to our bottom navigation View menu bottom left so here we can see that the bottom navigation bar has shown up right it is looking quite good we have all the three icons home profile and settings now let us just add three fragments so we can show those fragments with the help of these buttons so let me just quickly do that so we have got these three fragments right the home fragment profile and settings so let's just give it a basic design so okay we are done with the fragments I have just given it the name and the background so we can identify the different fragments when we tap on those buttons right so now we are done with the front end part now let us just go to the backend code so first let me just enable The View binding accessing the project it's okay the Sync has been completed now let's go to main activity and let's get it done with the viewbinding all right so we have implemented the view binding now let us just create a method to replace the frame layout right so here you can see we have this frame layout so we need to replace this frame layout with the for all the fragments right so let us just create a method and name it as replace fragment so it'll take the object of the fragment as an argument so this is how we replace the frame layout with the fragment right I don't think that anything needs to be explained here so we have used the fragment manager and then we have made the transaction to replace the frame layout with the fragment that will get as an argument in this method so now let us just implement the on click events on our menu items so for that we will use binding Dot button navigation view dot set on click listen right select on item selected list so now we are going to use when [Music] it's dot Item ID and we'll going to create three cases so r dot ID Dot oh so if this is the case we are going to call the method replace fragment and we are going to pass the object of our home fragment class right similarly we are going to do it with other two methods if it is uh dot ID Dot profile [Music] and then we have to implement the else as well so we're just going to keep it as empty block and we are going to return through here all right think I have messed up a little bit with the brackets if I'm not wrong Good Times [Music] here we need to return true right so that this item selected has been registered so one more thing whenever the app has been launched for the first time we want to show the home fragment so we are going to uh so we are going to call this method inside oncreate right and we're going to pass the object of Home fragment here right so now we are done with all the things that we need to do I guess one more thing it's not important you just select to add so if you just go to I'll set it to no action bar that it looks a bit nice so let me just install this app to my emulator and see what we are getting so let me just close this just build this app and run on our emulator right so okay our app has been launched here you can see the home fragment has been showed by default so if I just tap on profile the profile fragment opens up similarly with the settings so I guess we have successfully implemented this feature to our Undead application so I hope that you guys have understood the code but still if you have any doubt you can always ask me in the comment section I can DM me on Instagram the Instagram username will be the honest key right now and if you like the video don't forget to hit that thumbs up button in case you're on this channel make sure to hit that subscribe button and press the Bell notification icon so that is it for today's video see you another video bye [Music] thank you [Music]

Channel: Foxandroid

Views: 22,724

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 bottomnavigation, android bottom navigationview, bottom navigation kotlin, navigation bar, 2023

Id: L_6poZGNXOo

Length: 11min 30sec (690 seconds)

Published: Thu May 25 2023