Bottom Navigation Bar With Badges - UX With Material3

hey guys and welcome back to a new ux world material 3 video in this video you will learn how you can Implement a bottom navigation View that was at least how it was called with material 2 in material 3 it's called a little bit differently and that is navigation bar but its purpose and how it works is exactly the same so you can see we can add a multiple destinations here so this is really only used for navigation to really navigate to different screens but this is not used to have some contextual actions for screen like we used for the bottom app bar in the last video and you can see we can also combine this with showing batches so if you have a chat for example you can show how many unread messages there are and if you just have a screen where there is some kind of update for the user so here on the settings screen maybe there is an app update available or so so you just want to tell the user hey look at that screen there's something for you then you can also show a badge without specifying a number like you and you will learn all that in this video so you can see when we click on these icons then the corresponding icon gets highlighted of course there is no navigation here in the simplified example but that can be implemented minute very easily so if you want to learn about navigation I have a separate video about that but this video is more about using this new material 3 bottom navigation View and in terms of guidelines there is really not too much you need to know to implement that so as I said only use this for navigation each item should be a destination and what's worth noting is that you should only use this if you have three to five destinations to show so you only have two so for example home and chat then don't use a bottom navigation view because it would look ugly so only use it if you have at least three like here up to five destinations and I am in an empty jetpack compose material 3 product again and inside of this surface we again want to create a scaffold like in the last videos and here we want to use the Bottom bar again so it's always creating a bottom app bar or a bottom navigation view so you never use both we can also go on this scaffold Alt Enter to opt in for this experimental API to get rid of this error the other error can be ignored for now and in here in this Bottom bar Lambda we want to create our navigation bar this is the material 3 version of a bottom navigation View and if you're building an app for potentially large screens as well then for these large screens you might consider using this navigation rail instead which is a navigation bar on the left side of the screen but I will make a separate video about that so now we have to focus on navigation bar and yeah in here we can put some configuration but we really don't need that because we don't want to change the recommended guidelines for the bottom navigation bar so we can just get rid of that and then here in this row scope we just put these navigation actions and I think it's called navigation yes navigation bar item so for each item we have we want to have subject composable here and what I like to do is I would like to create a little helper class for each item which just combines the data we need to display it we can say bottom navigation item or so it needs a title it needs a selected icon which is an image Vector so the icon wanted display if we well currently are on that screen we have an unselected icon image Vector we have a um has a news Boolean if that is true we just indicate we want to show this little red bubble and we want to have a batch count integer which is nullable so that's null that means we don't want to show a batch count which would be uh this chat bubble here so if it's 12 then we would show this batch bubble with a number of 12 and if it's null then we don't show such a number at all then we can scroll down right inside of our theme Here and create our items list so that's just a list for all of our navigation items now we can say we have our what did they call it bottom bottom navigation item the title for this one would be home for first item the selected icon is icons defaults actually not default um the select icon would be icons filled dot home um so that is a requirement or it is at least very recommended um by the improve to be godland that if an item or if if the user is on a specific destination like on home for example the icon for that should be filled if the user is not there it should be outlined and that is exactly what's happening here you can see if I'm on settings then the settings icon is filled if I go to home then it's outlined again and the home icon is filled instead so we also want to provide this unselect icon which is just the same icon but we get it from outlined like this we then have has news or the home icon for for the home item that is false so we don't want to display that batch bubble and the batch count would be null yes that we can leave that at the default we can then take this copy it do the same for chat I don't think I have the chat icon here in the normal icon set you can add the extended icons dependency if you want but I will just set this to email here so we have a similar icon at least here we want to set house news to false because we instead want to use this batch count and we can set this to whatever we want it's obviously in a real chat app you would need to assign whatever number you want to display here so for example the amount of unread messages the user has and last but not least I'm not sure if we have the settings icon yes we do so we can change this to settings change the icons to settings and this time we say house news true so we say hey well there's a new update for the app or so please go to the settings page so we have our list of bottom navigation items we now want to use this list inside of this navigation bar you can see we get a row scope here and whatever composables we put here will be arranged in a row the spacing will already be considered the alignment will already be considered so we just need to Loop over our items for each indexed we get the index we get the current item We're looping over and for each of these items we now want to display our navigation bar item well we also want to have some State because we need to tell each item if it is selected or not we also get an on click Lambda which should be pretty clear I guess and we get an icon which is just a Lambda but we can display the icon and let's set selected to full for now to make all items unselected how do we now achieve that we can dynamically select these items well for that we need some form of state and that's pretty simple though we can just go ahead here and say we have a specific selected item index by remember saving below so remember savable rule just to make sure and also survive squid rotations and configuration and process that I'm meaning but typically you would also store this in a view model for example so here we have a mutable State F which is equal to zero initially so the very first item is selected by default for some reason it does not let me import remember savable so we can just scroll up go to our import section duplicate this runtime mutable State off and change this to set value duplicate it again and set it to get value these are just the important we need we can collapse this again scroll down we're going to see if the error is gone and we can now take the state and pass it here so a specific navigation bar item is selected if our selected item index is the same index at the index of that icon of that item should be clear I guess and if we click on a specific item then we want to change or selected item index to exactly that index we're currently looping over and if you would now also want to navigate and then in here you would just use your nav controller from your nav host and call that navigate and you would navigate to item dot title for example assuming in the route of your screen is the same as the icons items titled if that's not the case you would need to add an additional property to each item which will represent the route where the user should get when they click on the item since we don't have the nav controller here I will just comment that out what is now interesting is this icon that is very simple if we just want to display an icon like for our home icon here so there's a little home symbol but we also need to adjust this to support displaying such batches with the numbers and displaying such badges without any number and we do this by using a so-called batched box so the battery box is just a box which allows us to place a batch or not but if we want to play as a batch then this batch box make sure it's at the right place so let's do that you can see we get a badge here which is a Lambda and here in the content of this banjo box so this trailing Lambda this would just be our normal icon so the icon would have an image vector and a column description description would just be our current navigation item and the title and the image Vector depends on whether this icon is selected or not because if it's selected we want to reduce this selected icon and have not want to use this unselected icon so we can check if the index is equal to selected item index if our item is selected then we want to use item.selected icon and else we do item unselected icon like this for our batch now how do we display that we first of all want to check if we even want to display a specific batch for that item so if the item.batch count is not null that means we passed a specific number we want to display that means we want to display a badge with a specific number and for that we use a normal batch and in here we place our text that displays that number so item and add batch count and probably also would add to string since that is an integer and else if item has a news so if we just want to display the better bubble without any count then we just say we have a badge and don't change anything about that so if the battery does not have any content we just leave it as the little red bubble and else so if the batch count is null and we don't have any news then we don't display a batch at all cool so that is it for Aiken the last thing that remains is our label so we can pass a label composable which is just our text so very simple text and that should be our item.title if we launch this and take a look here then we should hopefully see something very similar as I showed you before yes we do so we do see our batch with 45 new messages if we click on that you can see it gets highlighted in the home one as well and the settings one as well of course if you click on that it would be up to you that you also remove this badge again that would just be done by updating our items list so first of all we would need to make this items list a state and then we will teach you update it and for example setting this house news Boolean to false for the settings screen when we click on that so then it will also get updated here as long as that items value is actually a compost date one last thing I can show you is uh another option we can pass here oops and that is always show label which is true by default so this means um for all items the label is shown by default you can set this to false to hide the labels completely this is not recommended if we take a look here um okay it actually shows the label for the selected option so so that is something you can do and that the selected option shows what the screen actually is but what is definitely not recommended is that you hide the labels completely so that you don't have any labels at all and just use these normal icons because that wouldn't add enough context for all users so just add as as much as info as you can in this little space to let your users know where they will get when they click on the specific icons so very cool I hope you enjoyed this video if you did then definitely subscribe to this channel to not miss any of these future material 3 videos there are still quite some more to come I wish you an amazing rest of your week and I will see you back in the next one bye bye thank you foreign

Channel: Philipp Lackner

Views: 27,077

Keywords:

Id: c8XP_Ee7iqY

Length: 13min 16sec (796 seconds)

Published: Wed Aug 09 2023