Bottom Navigation in Jetpack Compose - #8

hey guys welcome back to a new video in which we'll be building a bottom navigation bar item in JP compos with news and also budges so check the under Studio this is how it looks like we have of course items with this little five that says something is new in notifications that you have new notifications or in profile this one that says you have something important in your profile following all the material design guidelines and let's get started okay we on under Studio the first thing I did is actually created list of the items so it's a bottom nav item because eventually each one of these is an item so it's a data class it has a title a route so for example when you click on this one you want to navigate to a screen using the route of that screen the selected icon for example here when it's selected you can see how the icon looks like but when it's selected it's a different icon it's an outlined icon when it's not selected and a field icon when it's selected as you can see of course this is selected icon and selected icon has news just this little red dot that tells us something is new there so we need to check it budges of course this number of budget that we have in here for example if you have new new notifications five new notifications then you can show it like this and of course when you click on it you'll then need to implement some logic to remove this one because that's it you already clicked on it and I created the items list so I have four items profile is the title here the route is profile but in lower case of course in a real app you're not going to use the route like this you'll have uh dedicated class for screen routes and here of course the icon when it's not selected we are using the field icon otherwise the outlined icon has news in profile is true so we do show that and here we can actually see this one to false here for notifications budges are five so we show a budge and of course the rest is just the same we have titles and routes we created the list and right here the first thing we need is a skiold to create this one so scaold with a scaold we get the place in which we can put different things for example a bottom bar which is exactly what we need so our entire button bar is going to be inside here we also get a place to put for example a floating action button uh that's going to be somewhere right here we get a place to put our top bar which is going to be the top here okay so using just this scaold we get different things we can actually check that as well we also have snack bar so it gives us places in which we can put those in our case we are interested in in fact let's skip this Floating Action button so you can see what I'm talking about Floating Action button I'm not going to have anything inside it just going to be a floting action button okay and I don't need this to bar so inside my button bar what I need to create is a navigation bar that's what I need inside my navigation bar I get a row scop so all of these will be inside a row if you don't know where a row is you can go in this playlist and watch the video in in which I explained rows and boxes and Commons so each item will be this one and all of these in a row so for that I need all the items and I'm just going to actually aerate through the list of bottom nav items dot for each in index and here I get the index and its item so index and bottom KN item like this we can actually bring this right here a little bit so we can see the order to create is an navigation bar item so navigation bar item for each item in this item as you can see I get three different things which are is selected or not so which one is selected and U as we click that selected changes okay we also get the on click what we want to do in the on click normally we want to navigate to that screen we can just write something like if we have a nav controller I don't have anyone do navigate to my bottom item. route so I can navigate there and I'll keep this I'll just com it out because I don't currently have any item let me just format this like this and then comment it out the icon is going to be the icon that is displayed if it's selected it's filled if it's unselected it's outlined that's the difference but now let's start with the selected so when we click on an item it should be selected and then how do we make it selected for that we need a state that changes and I also created a video about States so you can go in this place and watch the states video soar may be selected something like this by remember import remember and then that's going to be mutable int state of zero so by default the first one is selected and now how do we know which one is selected by checking if our index is equal to our selected here so like this we don't need these brackets index is equal to selected because this selected is at the end a bullion so if our index is equal to this state then that's exactly the selected one now how do we actually change the selected one when we click because when we click we do change the selected one but just updating our state so selected is equal to my index now I change the one that is selected and here I have the icon the icon as I said depends in whether I'm selected or not or the item is selected or not but I also have these budges as you can see we have budges in these icons so I need to actually set this icon in a way that it can accept those budges for that what I need to do is using a budge box like this all I need to do is pass in the budge so if my bottom nav item. budges is not equal to zero so I do have budges that I'm going to show them by writing budge is a text that is just my bottom nav item do budges do to string because we want a string at the end else so right here else if my bottom nav item dot has news then I'm just going to show a budge but without any text like this we want to add some experimental annotation first and they need to surround this with brackets like this then I just need to create the content block to remove uh the arrow so I have in here is that I check if I have budges so if my items have budges and to do that I check if it's not zero then I show the budges like this in add text okay else if I have news which is this one so if I don't have budges but else if I have news then I show that little red dot okay otherwise that I don't do anything so if I don't have budges and I don't have news I don't do anything I only show my icon right here so icon I'm going to use image vctor and the icon again depends whether my item is selected or not so if index do is equal to selected so if this is the selected item then of course I'm going to use my bottom I'm going to to a new line probably bottom nav item. selected icon else if it's not selected then I'm going to use the unselected icon bottom nav items. selected icon for the content description can be bottom nav item. title and we then need a label which is this text right here so we can just go somewhere right here let me just make sure I'm outside the icon I'm going to use a label that is the text and that's simply a text that just says bman have item. title and that's it we have an error in here because of padding values to remove that we either need to use that pading values for example what's going here is that this takes a space I don't know how much like 70 DP the content inside our scaold needs to be pushed From the Bottom by 70 DP so that 70 DP exists in this Padden value uh now I don't need that so I'm just going to put it in a viable to remove that uh error so pading is going to be it so the error is gone we can now try running the app and also we see this Floating Action button okay as you can see let me just make this a little bit big here is my botton bar here's the floating action button as I said I just told you that in scaold I can get the place in which I can put things if I didn't have this Bottom bar then this uh Floating Action button wouldn't be here it would be somewhere around here now I actually don't need that we need now to rerun the app to see that button bar so this is how it looks like we can always change these for example post in here or categories or whatever this is I can put like 20 in that and then run the app again so I can see you can see now I have 20 in there and of course when you click on one of them you need to implement some logic to remove this one because that's it they already saw that and uh yeah that's up to you that's up to your app I'm just showing you how to use a btom navigation bar that follows the material design guidelines with ITP compos like this and of course when you click you need to navigate to that uh item screen or something like that use andf controller with the route and uh this is it for this video which is another jitpack compos playlist video if you like what I'm doing support me by subscribing liking the video so now see you in the next video and bye

Channel: Ahmed Guedmioui

Views: 808

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: HVub2u8DpDQ

Length: 9min 41sec (581 seconds)

Published: Wed Mar 13 2024