Welcome back.
And this video, we're going to take care of the bottom navigation bar that you can see right here where
we have the top news, we have the categories and sources, and we can jump between the different pages
now.
You can see here.
And that's a pretty nice little feature.
I believe this really helps us, too.
Then later on, see the news based on this category and so forth.
OK, so let's get started building all of that.
Therefore, let's go ahead to our news app, and here we have our navigation in it, right?
And I would like to have a composable which will take care of the navigation, but also off the bottom
menu because we need to have a scaffold here.
OK, so at this point, you can see we don't have a scaffold.
This is just a page while at this point where we have the final result, yes.
But in our version of this application, we don't have that yet.
And in order to achieve that, I'm going to add a composable main screen here, which will need a nav
controller as well as the scroll state, because I want to be able to scroll in it and I want to be
able to have one navigate, basically.
So inside of this, I'm going to use a scaffold and the scaffold will have a bottom bar like soul,
which will be my bottom menu, which will have to set up in a bit.
And then as the content of the scaffold, I'm going to have my navigation.
So we will need to set up the navigation a little later because we need to exclude or put this nav controller
and everything to a different spot.
But we're going to take care of that in a bit.
All right.
So now let's go ahead and take care of the bottom menu for our screen.
Now you could call it screen bottom menu or bottom menu general.
I'm just going to create a class a sealed class.
So they don't go to call bottom menu screen.
So this class will be used as a template for each option, which we will have so a route as the key
for each screen navigation.
So let's set that up here.
While routes of type string, then an icon has the image showing on the bar of each of those options
that we have.
So this will be of type.
Image a vector.
And then a title.
So title of type string.
Now, in order to now use the icons that you see here, so the top news categories and sources, I will
need to add a dependency.
So let's go over to our bill, but cradle and add the dependency that we're going to need for that.
Their dependency is the following.
So let me just paste it in here and go over it.
Compose material material minus icons extended with the compose version.
OK, so this will now allow us after we think that.
So click on sync now to use the material icons.
OK, so let's go back to our bottom menu screen key to file and here we can now add the different objects
that I want to display here so you can just go ahead and use objects.
Top news, for example, to be of type bottom menu screen.
So we're just creating objects inside of the class, which is why we're making it sealed.
And here the root would just be a string.
I'm going to call this one top news like so.
And the icon is going to be I can start outlined.
And we need to import icons for this.
So I already did outline thought home that this would be our home and we need to import home here.
So hover over it and make sure that you import home.
And then finally, we need to pass in the title itself.
Which will be just a text that will appear there, and I'm going to call this one.
Top news.
OK.
So then let's do the same thing with two more of those objects, because as you saw, we have three
options.
Top news categories and sources.
So I'm going to paste it in here twice.
And actually, let's call this top news.
And this one should be categories where I also need to change to route to categories.
And the outline will not be home, but category this one and the title should also be category, but
this time with a Capital C.
OK, and then the third item will be sources.
So the route for it will be sources.
And this route, it will be important for navigation later.
And then the outline will be sources with a capital s make so.
Now, let's go ahead and create a new component that will actually take care of this brain, this stuff.
OK, and the component will be a bottom menu that allows us to navigate between the different items.
So I'm just going to create a new.
Package here that I'm going to call components.
And maybe not with a capital C, but like this.
And inside of components, I'm going to create a new Cortland file class.
It's going to be a file which I'm going to call bottom menu.
And here this will be a composable.
So let's add that at composable keyword as well as fun.
Bottom menu, which requires a controller item so that we can navigate between the different routes,
so to speak.
Now we won't create a list of menu items.
Which are just the items that we just created inside of our bottom menu screen.
So here bottom menu screen, top news, then bottom menu screen categories and run catching, but categories
like this.
And finally, our bottom menu screen sources.
Like so.
And there we are.
OK, so this will be the list of menu items that we have.
Now we can take care of the bottom navigation.
So let's go ahead and create a button navigation.
So this is just another composable where we can pass a couple of parameters, for example, the color.
So I'm going to set the color to be white.
OK, so here, color resource with our color dot the white.
And we need to import our ire for this as well.
So let's import it, OK, so not this bottom navigation, it gets us to scope, which just means that
it gives us the individual items.
But before we're going to take care of this bottom navigation, let's jump over to our newser.
So now we can use our main screen here in the news app instead of using navigation directly here.
We're going to now use our main screen, which has the navigation itself as well.
But the main screen needs to nav controller as well as this controller state.
So let's set those up.
Controller or scroll state with was not the controller state scroll state, which will be remember scroll
state and nav controller, which will be a Remember NAV controller.
So now we can pass those two.
So NAF controller and.
Scroll state.
And now we can set those values to our navigation as well, because we should change our navigation
to require those OK because we don't need to create them in here.
We're going to create them at the top level.
So in the news app, we're creating it.
We're passing them to the main screen from the main screen, we're passing them to the navigation.
So let's pass the NAF controller in here as well as the scroll state.
Like so and obviously, we need to have them in the description of the navigation as well.
So now this nav controller that we have here will be the nav controller that was passed to us.
And just to be sure, let me add, NAF controller is equal nav controller and then make sure that this
will be the nav controller, the nav controller and this will be the state will be a scroll state.
OK, so if that doesn't fix it, let's see.
What is the problem here?
Create cost expression, OK, because it's enough host controller.
So did I call it somewhere incorrectly?
NAV Controller.
Remember NAV Controller?
What is that going to give us?
Hey, Navajos controller, OK?
So that means that our main screen is going to use a map host controller instead.
So I'm going to call it nav controller, but it's actually going to be a nav host controller.
So NAV host controller.
Like so and then we can pass it, because that's what our remembrance controller gives us, right?
So it gives us back a NAF host controller who can see that here and here, this is what it returns and
host controller.
So now in that case, we need to pass the NAF host controller to it.
OK, and at this point, this will then also be an IV host controller.
This is a really tricky little problem here.
All right.
So then we can take care of having a category screen and a source of screen.
So let's just create those real quick.
We'll just be very simple pages.
Nothing too fancy.
I'm going to add them to my screens.
OK, so here.
Court and file class, this will be the categories.
Like so which will just be a composable.
And for now, it will just be the Katie Couric's sole.
Where I'm just going to use a text.
So let's import text here and set the text two categories screen.
So when old will be empty, but later on, we're going to overwrite all of that and let's create another
file, which will be our sources.
OK, so like this sources again, it's a composable which will be fun sources, which will just display
a text for now.
So let's import text here as well.
With Old Enter, so and then the text will just display something like.
Sources screen.
OK, and now we can take care of the bottom navigation.
So instead of the news app, this is the actual application.
We need to take care of the navigation inside of a new function that will be the next graph builder.
So let's go ahead and create that here and actually on the top level.
So here, fun math, graph builder.
But bottom navigation.
And here we need to pass a knife controller to some, not a knife host controller, but an actual knife
controller.
And in here, we can now create a composable.
So a composable which will be from our bottom menu screen, then we have top news and get its root because
we need to use the root and we have used this before, right?
So when we were navigating between different items, so Missy, was it in here?
Yeah, we had the roots here.
You see roots top news.
But now we don't get the root as an actual string, even though the root is a string, but we get it
from the well.
The root parameter that we passed to a bottom menu screen.
Let's cut the video at this point.
Make a quick break and then see you in the second part.