Bottom Navigation in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn how to create bottom navigation bar or you can say bottom app bar in Jetpack compose it's very similar to our previous video in which we created navigation drawer if you want you can go through it now let me quickly show you the demo this is how it looks we have a bottom app bar with five items in it home search add notification and profile so if I click on search here we are on the sech screen likewise notification then profile and also if you will click on this add floating button for now it will throw a toast but later in upcoming video we will create a bottom sheet for this add button okay also I sent this thing in my my previous video and I am again telling you that in XML we usually have a certain way of creating bottom Empire but in jet pack compose we have multiple ways to create bottom and part because jetpack compose is very flexible so if you will search on internet regarding bottom app bar in Jetpack compose you will find different types of code but again the goal will be the same like for example I'll be using bottom appar icon button composable other may use different got it now let's create it open Android Studio choose empty activity name it as Bottom bar JC and then first we will start with the prerequisites as we will be using n graph for obviously navigation purpose from one screen to another screen so for that we will require navigation dependency hence go to grel here add navigation dependency I have mentioned it in the description box click on sync now and done then go to color add green color and done then go to theme Here add green as a primary color and also the stus bar color as green then we have five items in bottom app bar right home search add notification and profile out of which add will be a toast and others will be a screen which means we need to create four screens also as you know jet pack compos has no concept of fragments so instead we will create create a cotl file right click on package create a new cotl file name it as home let me quickly write the code and done so we have a composable function as home inside it a box then column with alignment and Arrangement as Center and the text ands home in green color that's all basically this code will display our text in this enter same way we will do it for other remaining three screens as well and done see we have home search notification and profile screen now once all the screens are created then we need to initialize it in a sealed class but what is sealed class sealed class means a class that has a predefine and a finite set of sub classes so for us our sub classes are home search notification and profile got it so right click and create a new cink file name it as screens and done let me write the code and done this is a seal class screens here each data object represents a specific screen and is initialized with a corresponding string identifier that is same home search notification and profile got it now comes the important part so go to main activity remove the default code and then here we are supposed to do two things first is to create the bottom appar and second is to create na host and that's it so let's create it first create a composable function as my bottom app bar and then make sure to call it here inside the set content then inside it we need to initialize few things such as navigation controller context and selected you already know both of them but what is selected we will use selected for Icon color like if I click on profile screen then the selected icon which is profile icon that should be in white color and others should be in gray color so initially selected icon is home and I have already explained mutable state of and remember in one of my previous videos so you can go through it then below it we will create a scarf fold it helps multiple components to work together in our case we will be using Bottom bar icon button and floating action button so first let's start with the Bottom bar inside it bottom app bar composable for the parameter I'll only give container color means the background color of the Bottom bar as green JC then inside it we will have five items in it so for the four screens I'll be using icon button and for the add I'll be using floating action button got it let's create it icon button whose two parameters will be on click and modifier so for the on click listen carefully initially the selected value for the icon will be home then as the user will click on the home icon it will navigate using navigation controller to home screen and lastly as we don't want Stack Up screens behind we will use popup to zero to avoid multiple back button clicks got it second parameter is modified wait as one float means all the icons should be equally take space on the bottom bar so we will give one weight for each one of them now inside icon button right icon this is where we will assign the icon so icon as home content description as null and size s 26 DP then tint see here carefully tint means the color of the icon so let me write the logic first and done now see if selected value is equal to home icon then the icon color will be white else gray what does this means means if if the user is on home screen then home icon will be in white and others will be in Gray got it and then our first item is ready next item is search let me write the code and then see we have a default icon as search then it navigates to search screen then wait as one and same icon logic if selected value is search then icon will be in white color and others icon will be in gray color second item is also done then third item is ADD Floating Action button but we will create Fab in a box why because we want our Fab to be in a center for that we'll require a box so right box give parameters as modifier weight as 1f padding as 16 DP and content alignment as Center then Inside the Box we will create a Fab on click will be a toast as open bottom sheet for now later we will create a video on it then icon as ADD content description as null and tint as green there is no selected Logic for ad Fab then fourth item is notification and fifth item is profile so let me quickly create icon button for them as well and done see we have a notification item and profile item you can see Along by using the preview code okay but first let's focus here the last thing that we need to do is na host so write along with me padding values n host with three parameters first initialize NV controller second start destination as home screen third modifier and padding see to navigate from one screen to another screen we do require screens NV host NV controller and ncft everything is done only Nave graph is remaining so for the Nave graph we will create four composite for each screen like composable screens home with home class likewise I will create for other three screens as well [Music] and done see here we have home search notification and profile and that's it our bottom app bar is ready now let's run the app and see look this is how it looks initially we are on home screen then if I click on profile here we are likewise I'll try other items as well it works perfectly fine and also if I click on ad Fab look there is a toast great right so yeah that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,267

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, mobile apps, develop apps, create an app, tutorial, topic, error, menu, nav menu, ui, bottom navigation, bottom app bar, bottom jetpack compose, bottom bar, app

Id: L8knAaFq3m8

Length: 16min 50sec (1010 seconds)

Published: Wed Feb 07 2024