Bottom navigation in Android is used to show key actions at the bottom of the screen so users can move
between primary destinations.
So let's look at a basic setup for a bottom navigation to add a bottom bar to a compose app, you need
a scaffold layout scaffold, provide slots for common components and screen elements, and the scaffold.
We reference the bottom bar parameter and assign the bottom navigation composable to it, which is already
pre-built, so we don't have to define this ourself in the bottom navigation.
We and pass the bottom navigation item for displaying each of the options on the bar.
Each option will require a label and an icon.
We will need a list for the number of items that we want to show on the bar to manage these items.
It's advised to create a class with fields for the icon and label and then make a list out of it.
So let's look at that.
For this, we first create a model for each item.
You will also notice we have an extra field called root, which will provide a specific destination
key for each screen and help manage the navigation.
And we need to seal this class is the common practice here.
Then we make a list of required items out of the model and set each one as a bottom navigation item.
It has various properties where the label icon on click and the selected and on selected content colors
are defined.
So here you can, for example, define which color should be set when the content is selected and for
the text and the icon, for example, and what should be the color?
One is unselected.
You can define whether it's selected by default.
In this case, you see it's on selected because selected the set defaults.
And then we also have the on click event that we can define here, which you see in this case is not
implemented.
And then at the bottom, you set the icon that you want to use.
OK, so you define the icon, which we get directly from our list.
So here you see the different icons that we're using, as well as the texts and the three options that
we have in our bottom app bar, which are the three menu items that we added.
So let's see how we can attach screens to each item and then we get between them when clicked on.
So therefore, we need to use net host and controller, which work together to enable navigation.
Now, post is a container for the composable screens, while NAV Controller contains API used to manage
the navigation between screens and the code snippet above, we add a nav host and pass in a nav hosted
controller with a start destination route.
This way, the host knows the first screen to show.
So in our default settings, the top news will be the first screen that we want to display.
Then, within the NAF host block, we add the composable screens for each item.
So in our case, the top news is the composable screen that we're going to start with where we also
passing the nav controller, but we're going to see how all of that works in an actual example.
So to get a particular screen shown when an item is clicked, we have to add an action to the on click
block.
Available in the bottom navigation item, and that is how we can handle the item selection.
So here all we need is to get an instance of the controller and navigate to the selected routes when
an item is clicked.
Remember, each item has a route that serves as a key with this route.
Each screen can be identified by the nav controller when an item is clicked.
We will understand navigation in detail in the coming lectures when we are actually going to implement
this code that you just saw into our project.
Then you can reuse that for your own projects in the future.
OK, so let's get started with that in the next video.