OK, so now back in the news app and our nav graph builder in the composable, we can now say what we
want to display.
So we want to display the top news with the nav controller being the nav controller and then.
We want to do the same thing with our other two composable, so we have the bottom menu screen.
Top news, we have the categories routes and we had the sources route.
Now they don't need to NAF controller because what we are going to use here is going to be the categories.
And here are the sources page.
So so far, these screens, they are really empty.
They just have to text, right?
But we want to be able to navigate between them.
So we need to use routes and we need to have a bottom navigation graph below that allows us to move
between the different routes or the different pages, so to speak.
So here's where we are loading the pages.
We're passing a NAF controller to the top news page because the top news page needs to be able to navigate
into the details page, for example.
OK, and now let's make sure that our NEF hosts here as the bottom navigation in here.
So let's create a bottom navigation item and pasta nav controller to it.
Which will be this NAF controller from up here.
Which we're passing to this bottom navigation down here.
And this will now allow us to display the navigation.
Now, back in our bottom menu, we will need you to set up this bottom navigation, as you might recall,
we just created did, but we never populated it with any details.
OK, so now instead of here, we will need to create a nav back stack entry by using the nav controller.
Dot current back stack entry as state.
OK, so we're getting the state here, and let's import this current text stack entry has state and
now we can also get the current route.
So we know at which page we are, so to speak, and can use our nav stack entry to get the destination
route.
What this will do is it will change to color whether an item is selected or not.
So you see here, it's great out when it's not selected and it's white when it's selected.
So that's what I want to do inside of here.
So I get the current route understanding what is the current page.
I get that from the backtrack entry, which is why we needed to have the backstage entry state.
So we need to know which page we're at.
OK, and based on that, we can then display the current route.
So we're going to go through all of the menu items which we have set up here.
So this is the list of the three menu items that we had, the top news category sources, and we are
going to then check each individual item.
So for each.
We're going to change the color of it and therefore I'm going to create a bottom navigation item.
And here we can just use the current route.
This is why we even needed this current route.
And here we need to actually state it equals data put.
So this is this it hits this bottom menu screen item.
So there's a lot going on here.
I know that it's this is not an easy piece of cake here, but that's just how it's set up, right?
And I will set up a couple of more settings here, for example, former bottom navigation item.
I'm going to set the label to be a text item so it will set text to its title.
Like so we need to import to text here, so this it's the title is something that we get from the bonded
them navigation item itself, right?
So we'll get the title now, then we get the selected item.
But I also want to display the always sure label to true.
And the selected.
Content control color.
To be white.
So once it is selected, it should be white.
Once it is unselected, so unselected content on color should be color.
But, Ray?
And let's import color for this to work.
Like so.
OK, so.
Now we have the current route, and now let's implement what should happen once we are clicking on it.
So on the click event, this stuff will happen.
And after that, we can set something like the icon, for example, to be an icon.
Let's import icon for that.
And this icon will just use the image of actor.
Of it's that icon.
As well as the content description of it, the title.
And let me just check if I'm still in the right spot.
And this is actually supposed to go in here like so?
So do we have an icon, let me see what is it?
We had the icon.
So let me see why doesn't it accepted it?
That icon probably because of another era that we have.
And as it seems, I need to put this icon somewhere else.
So I could should be part of this bottom navigation item settings like so.
OK, so is this the right icon it should be.
We have the image vector for the icon, which is going to be the icon and the content description,
which is going to be the title.
And this has to be inside of curly brackets.
All right.
That's.
The problem that we have here.
OK, so let's get rid of this content of the bottom navigation I can, and then it should be significantly
better.
So now let me just see why this icon doesn't seem to appear so it is of type.
Image vector and image vector is also a type image vector.
And I guess it's because I didn't say that the civil like, so man on there.
All right.
So now we should be good.
All right now we could.
And now, before we take care of the actual click event that we had there in the bottom menu as well,
which we need to implement.
OK, and at this point we can set our bottom menu in here.
Now I realize that I called this put on the menu, and this is a really tricky.
So even though the file was called bottom menu, but I accidentally put a menu here, so now I can use
my bottom menu and pass in the NAF controller.
So we need to import the bottom menu for this to work.
So now let's check it out.
So let's see if that's going to appear in our application.
And there we are.
So the click event doesn't do anything yet.
That's something we still need to take care of, but we have our bottom navigation.
So let's have a look at the bottom menu and the click event.
So here we have this to do still.
So this is where we want to implement that on click event.
So I wants to use the nerve controller at this point and the controller that I'm getting to navigate
to something.
So where do I navigate to?
Well, to it, that route.
So here the idea is exaggerating with all of those pop ups, so it should navigate to it that route,
and it should then use the network controller.
That Graph Dot set a start destination route.
And it's going to check if it's empty, and that's why we're using this dot alert here.
And this will now give me the route itself, which is a string.
So this will be the route like so.
And what I want to do is I want to pop up.
To give an ID, which is going to be the route itself, and then we're going to set the safe state to
true.
And at this point here, after the NAF controller, I'm going to set the launch single top value to
true as well.
And then finally, the restore state value to true as well.
OK, and at this point, let's try and see if this is going to make sure that we have top news selected,
so let's see here, top news is selected now.
Categories is selected.
We can go over to the categories screen.
The same goes for the source's screen and the top news.
So each item that is selected now is highlighted and that's something that we have set up here.
So once the selected content, they said one, once the content is selected is going to be white.
Once it's unselected, it's going to be created and to select item will be the current route item.
OK, so it's going to set the current route to be then.
It.
That route, and it is the bottom navigation item that we're currently looking at, so it is top news
once I click on top news.
It is Category one significant categories.
OK, so now let's quickly summarize what we've created.
So we created this bottom menu screen where we have our objects of two different menu items, so created
the seal cluster.
We can create objects inside of this glass.
And but we're just saying, yes, we want to have the root name, want to have the icon that we want
to use for it in here, as well as the title that we want to display in here.
So, for example, top news category sources, then we have our button menu where we need to pass in
the nav controller and we have the different bottom menu screen items that we were just talking about
inside of a list.
Then we create this bottom navigation item, which allows us to set the content color and then have
the back strikes back, stack entry to know where we're currently at by using it.
We get the current route and then we go through each of the items and we check whether it's selected
or not selected.
And once we click on any of the given items here at the bottom, this court will be executed, which
basically just navigates to the root and the root.
Is this piece here.
So top news, for example, or categories and so forth.
So it's just an internal name for where this item is located.
So where it should go?
And then we're using the nav controller to go to that the nation route that we clicked on.
So it gives us that route and it goes over to that route, sets the safe state to true.
And then we launch it in a single top way.
So what you're saying, this item should be on top by itself and the restore state is going to be set
to true as well.
And then we're also setting the icon to be whatever the icon for that particular bottom menu screen
object is.
OK, so this icon, that icon and then the content description, which just gives me the title.
OK.
Then in the news app, we are using this bottom menu that we've just set up.
We're passing the NAF controller so that we can navigate with it.
And we do all of that in a scaffold.
So the content that we have before we put that into the content of that scaffold.
And we are just setting up the bottom bar to use the bottom menu.
So, yeah, quite a long step that we had to do here.
But now you have the bottom navigation.