In the last lecture, you learn how to create a drawing menu, and the bottom navigation bar is another
way of adding menus to your app.
But it's recommended not to have more than five options on it.
To draw menu is used for very many options instead.
As you saw earlier, so they have plenty of options.
But here we only have two, but we can go all the way up to five more is not recommended.
So let's look at how we can create such a bottom navigation bar.
Therefore, let's go back to our project and we're going to go ahead and go back to our scaffold because
that's where we had set up our top bar.
Our drawer, our content.
And now if you look over it, you will find that it also has something called a bottom bar.
So there we are.
Bottom bar and composable that we can create here.
So let's go ahead and create that bottom bar, which will for now just be an empty lumber.
But we're going to create our own component for that.
So instead of our components, let's go ahead and create a bottom bar component.
And I'm going to just create a new Scotland file once again.
I'm going to call this one home bottom menu like so now this home button button menu will be a composable
once again.
So let's use the composable annotation here and then create our home bottom menu.
So what do we want to have inside of it?
Well, we want to have a list of items that we want to display, so we have the mail and the meat item,
and you see that we need an icon as well as a title or text here.
Same goes here.
I can add text.
So this is very similar to what we had with our draw menu data.
We need to create home button menu data, so to speak, in a similar format.
So let's go ahead and just do exactly that.
Therefore, let's go ahead here.
And actually, at this point, I think it makes sense to create a model.
Package, so let me call this one model, because now we have different models.
Models are.
Basically, just classes that define how a specific piece of data or how an object should look like.
So in our case, it was to draw menu data before.
So let's refactor it by drawing it into the model folder here and now it will be the same thing with
our bottom menu data.
I think we can call it like that.
So let's go ahead and create a new class.
This time it's going to be an actual class and it will be the bottom menu data class, and I'm going
to do the same thing as I did here.
I'm going to seal this class.
So this will be a sealed class bottom menu data.
And now I can define what kind of properties my menu data should have.
So if I look at it actually doesn't need too much information.
As I said, it would just need an icon, which we are going to use to image a vector once again for.
And then we need the title, which will just be a string, that's pretty much it.
So that's all the data that we need for bottom menu data.
And let's do the same thing as we have done in our draw menu data where we just created those objects
that we're going to have in the list later on.
So let me just set up the object mail, for example, which will be this little object down here.
And it will have what will be of type bottom menu data, which is this sealed closet we just created.
And I'm going to set the icon to be from icons outlined dot mail.
And now, in order for this to work, we need to import icons.
So let me make sure that I'm importing icons and mail.
All right.
And now we need to person to title.
And I'm just going to say it should be mail now.
The second object, if we look at it, should be meat.
OK, so our design is that this is how the app should look like.
All right.
So let's do exactly that.
And this won't be the neat bottom menu of data which will have the icons or taken from icons that outlined
with a capital O.
That video call.
Like so.
And then we need to import a video call as well as give it a title as well.
And I'm going to give it the title of meat.
OK, so now we have the two objects, but they are not used as of now.
And where would we want to use them?
Well, I would say in our home bottom menu because that's where we have our composable now we can create
a list of those items and we can display them inside of our bottom navigation.
So let's do exactly that.
Let's go ahead and create a new list of items, which will be a list of our bottom menu data.
And on one hand, I'm going to add the mail, and by the way, we need to import it because it is in
a different folder, it's in the model folder and we are currently in the components folder or package.
And let's add the second item here as well, which will be our bottom menu data that might.
OK.
Let me put that into a second row like this, and it will be pretty readable, I'd say.
OK, so now that we have our items, let's set up our bottom navigation and the bottom navigation is
actually a composable.
So there is this composable called bottom navigation.
So this bottom navigation, as always, can have a bunch of properties or a bunch of settings that you
can set up.
So the modifier, the background, color content, color, elevation and so forth.
So let's go ahead and set the background color.
And this will be inside of those brackets here.
Parentheses.
So background color.
I'm going to set it to be a color resource this time.
So color or you can just use color dot white.
This should work as well.
No resource either way is fine.
Then the content of that thing.
So that was the background.
But now the content itself should be black.
So you see here, this is while it's close to black.
So let's give it the content color of color dot black.
OK, so that's our bottom navigation, and now for every single item that we have here, I would like
to do something with my bottom navigation.
I would like to create a bottom navigation item so items dot for each.
So we go through every single item inside of items, which is, in this case, just those two items.
And I'm going to create a new bottom navigation item like so.
So it's another composable which can be inside of a bottom navigation.
It can be selected.
It can be on clicked.
So you need to set whether it's selected by default or not.
Then you have your own click event, which we for now can be empty, and then you need to say what icon
it should have.
So I'm going to define the icon to be an alumna, which is not going to be empty, but I'm going to
create an icon.
Therefore, I need to import the compose UI icons.
And there I can get the I can from the image vector, which will be it that con icon, of course.
And then the content description.
Will be our it.
That title.
So this it is this bottom menu data here.
This is where it comes from.
So it's great out.
I cannot highlighted what my mouse, but this is where it currently is.
So for each and this, it is the bottom and data that is going to be first the male, which if you look
at it, has the icon of this male and then the title of a male.
And the second one has the I can a video call and meet.
OK, so that's what this it will be.
And we're going to set the icon to have this image vector, which comes from Iken, which is just an
icon or an image.
OK.
Now that by itself is not all.
So let's go ahead and create some more settings here.
For example, I want to have a label setting as well.
So this label should be a text composable, so it should be the text of its dot title.
And we need to import text for this and then add the comma here, and that should do the trick.
OK, so that's our bottom navigation item.
We don't need to do any internal code after that.
We're just creating this item.
When I was running any specific code after it or for it.
So we have the label now we have that it's selected and I would like to always show the label.
So there's this setting, always show label that you can set to true and then the label will always
be showing and turned on.
So this text itself, which is this label that we're just created.
So at this point, we can use our home bottom menu, and that obviously has to happen at the point where
we want to display it and that will be inside of our main.
Activity bottom bar.
So let's just go ahead and import our home bottom menu that we just created.
So let's run this.
And see if it also works on our application and not just the example application, so we see there we
are.
So we have our draw.
And we have our bottom menu bar.
All right, and now you could go ahead and extend this however you like.
All right.
So you could, for example, just create another entry.
So let's say you want to have three entries there.
You would just create another item inside of your bottom, your data.
So just create another object.
Let's use that same icon that we have here.
Let's look at other icons that we have.
So dots and there are plenty.
So let's use the add, and let's call this one add.
And this one will be add like so and then instead of home bottom menu, we use the bottom menu.
They thought that had.
And obviously, we need to add a comma here.
And if you rerun this now, we should see the add button here at the bottom as well so that we are male
meat add.
OK, so this was just a demonstration of how easy it is to extend this now.
But I'm going to get rid of this because this was just for demonstration purposes.
All right.
So that's it for this video and the next one, we're going to look at the lazy column.
So see you there.