Bottom Navigation in Android Studio using Kotlin | Android Knowledge

foreign welcome back to my channel in this video we will create bottom navigation it's not going to be a fancy bottom navigation instead it will be a simple bottom navigation that is easy to understand for beginners if you want to create a fancy bottom navigation then I have already created a video on it you can click on the I button to watch so the logic is kind of like navigation drawn where we have to create menu and fragments cut it created Android Studio does provide a predefined template for bottom navigation where everything will be already created you just have to customize it but we will create everything from scratch hence we will go for empty views activity so choose empty viewers activity then write the name as bottom navigation and click ok now let's do the prerequisite first so go to colors.xml press Ctrl D to duplicate the line name the colorance blue and hex code AS 1a90 F1 again duplicate the line and right color as yellow and hex code AS ffd230 now go to themes.xml uncomment this slide and write the color name as blue then add another line and write the item name as color primary variant then again add another line and write the item name as Android status bar color now we need to customize the active indicator see if you are using the latest Android Studio that is flamingo so in that version by default it's material bottom navigation and in material design they have something called as active indicator means when you are in the current fragment then an indicator would be shown now that indicator by default is in gray color okay so I am customizing it to yellow color simple right so write this time name then give the parent as widget material 3 bottom navigation active indicator then inside it write the item name as Android color and give the color as yellow and that's it now we need to add five Vector asset you can search their name and add them accordingly first let me show you how to add Vector asset so right click then new and then Vector asset search for home and click OK cut it let me quickly add all of them and done now all the prerequisites are done let me close all the tabs as I said it's kind of like a navigation draw so if you're remembering navigation we used to create a separate menu which used to contain all the menu items correct and then we will attach that menu in activity main.xml got it so right click on resource folder then new and then Android resource directory choose the resource types menu and click ok then inside it we will create bottom menu so right click on it then new and then menu resource file name it as bottom underscore menu and click ok then inside the menu we will create five items in it first is home search then in the middle add button then rails and last one is profile it's kind of like a Instagram bottom navigation got it now let me create the first item so write item then give it an IDs bottom underscore home then give it a title as home and icon as home now let me create the second item so copy the code and paste it make sure to change the ID title and icon similarly I will create remaining three items as well and done now see we have a home search add reels and profile and that's it this is how it looks now we need to attach this menu in activity main bottom navigation so go to activity main.xml they move text View now listen whenever we have to deal with fragments we have to create frame layout or fragment container which will replace each other when we click on the button got it the right frame layout keep the width and height as match parent then give it an IDs frame container and then now we need to create obviously a bottom navigation where we will attach our bottom menu right so create bottom navigation View keep the width as smash parent and height as wrap content then give it an ID as bottom underscore navigation constraint it start and bottom to parent then attach the menu which we created before give the background as blue then icon color as white and text color as white the icon looks kind of small so I'll give the icon size as 30 DB now we will give the active indicator style so write item active indicator Style and attached a style which we created in themes.xml before and that's it this is how it looks perfect now we need to create fragments so we have five items out of which we will be creating fragments for four items only and other items will be as a toast got it so right click on package then new and then fragment choose blank fragment write the name as home fragment and click ok similarly I have created other fragments as well so its home fragment profile fragment reels fragment and search fragment and their respective fragment layouts now let me quickly customize all the fragments [Music] and it's done also let me quickly remove all the unnecessary code from the fragments and it's done now let's go to mainactivity.kt this is where we will attach our fragments with bottom navigation View and it's way more simpler than navigation door because we don't have to deal with action bar or toolbar right now as always I divided in steps so for this one it's just four step process let me quickly give you an overview so first we will declare and initialize the bottom navigation view then in second step I will create a replace method then in third step we will set on item selected listener and last in the first step we will create an initial fragment and that's it sound simple right let's create it step number one let me declare and initialize bottom navigation View and it's done now step number two create a replace fragment method first let me write and then I'll explain you now see support fragment manager is responsible for managing the fragments within an activity then begin transaction as different kind of transaction like adding the fragment removing the fragment or replacing the fragment out of which we have used replace method so replace specify the replacement of the current fragment with the new fragment remember we create a frame layout whose ID was frame container that is what we are using over here then commit basically applies the changes to the fragment container and that's it simple right now step number three is to set on item selected listener so right bottom navigation view dot set on item selected listener inside the brackets write menu item which will be associated with the item ID then instead of if else we will be using win so basically it's like when you will click on home button do we need to do home fragment got it so inside when as I said menu item will be associated with Item ID and this item is present in watermenu.xml now inside the event we will write the item id as r dot ID dot bottom home and then Arrow operator and inside the brackets we will use a replace fragment method and replace it with home fragment and lastly right through that's it I will copy paste it and make the necessary changes then I will create bottom add and as you remember we have not created and fragments so instead we will throw a toast so write a toast so when you will click on it you will throw a toast as upload image and video simple right then I'll create for other remaining items as well we have added drills and profile as well then else as false now step number four is to keep an initial default fragment so like when you open the app this should be the first fragment and we will keep our initial fragment as home fragment so write replace fragment and home fragment and the thread we are done with the coding now let's run the app see initial fragment is home fragment and see this is the indicator I was talking about as we have customized it hence it is in yellow color otherwise it used to be by default in gray color then I will click on all the other fragments and it's working perfectly fine now let me click on the middle button that is our add button and see there is a toast perfect that is it for the video if you are new to this Channel please consider subscribing to my channel and I'll see you in the next video [Music] foreign

Channel: Android Knowledge

Views: 15,869

Keywords: bottom navigation bar android studio, bottom navigation view android studio, android bottom navigation bar, bottom navigation view with round, android bottom navigation, android bottom navigationview, bottom navigation bar with fragment, navigation bar, android bottom navigation example, android bottomnavigation, android bottomnavigationview, android bottomnavigationview fragment, android bottomnavigationview custom, android bottomnavigationview example, kotlin, project, learn

Id: KBtMFTjfzA0

Length: 16min 24sec (984 seconds)

Published: Sat Jul 01 2023