Welcome back.
And this video we're going to now use are two pages that we have set up in the last video, and we're
going to see how to navigate between them.
So we're going to set up this navigation.
So you see, here we are on a top news.
And then once I click on this, I go to the details screen and there I have the button that I can go
back to my top news.
So we're going to set that up, which is going to be the basis of any navigation and compose.
And I'm going to create a news app inside of my UI, not inside of screens, but in UI that I'm going
to call news app.
OK, so this will be a new composable, which will then contain two different screens.
OK, so this will be the compose of a four hour news app in general.
So let's add the composable annotation here and create the news app, but with the same name as the
file again.
Next, we're going to set up a composable that I will call for navigation.
So here at composable fun navigation.
OK, so this navigation should then also be used inside of our news app as the composable now the navigation
itself is empty at this point.
But what we're going to require, there's going to be the nav controller.
So I remember NAV controller, so we're going to use this remember key quite a bit, as you see here.
So this remember nav controller, see nav on this one.
So we get a nav host controller that handles the adding of the Compass Navigator and Dialogue Navigator.
Additional navigator instances can be passed through navigators to be applied to the returned nav controller.
So let's go ahead and set that up, and I'm going to not pass a navigator.
I'm just going to set up the nav controller as is, and then we can use the nav host.
OK, so there is this nav host class provides in place in the compose hierarchy for self-contained navigation
to occur.
Once this is called any composable within the given nav graph builder can be navigated to from the provided
nav controller.
So you see we need to provide a nav controller, which is why we have set up one.
So let's pass the nav controller.
That we've just set up as the NAF controller.
Okay, now for this to work, we also need to import never host controller instead of Android Compose
UI.
So this one here?
Okay, you will find that the NAF host has been added and now we can use it.
So this nav host controller also needs to know what the start destination is.
So what is going to be the string or the page that we start with?
And I'm going to say we start with the top news.
So this will be the start destination and then we need to assign the content of it.
So we get the nav craft builder.
And in here, we can just go ahead and set up the different composable.
So for now, I'm just going to say I have a composable in here that is called top news.
So this is the route that we need to use.
And let's add the composable keyword here.
This one here, let's import that.
So here we need to pass the nav controller to our top news.
So to these top news, we need to pass on the nav controller, but let's take care of that in a bit.
So for now, let's just set up the two composable in here.
So instead of the nav host, so we have the top news and we have the detail screen.
OK, and this will be the two pages that we will use as routes.
Now, let's go over to our main activity and actually use this news app that we've just set up, because
currently it's not used, right?
So in the main activity that's added here in the preview, and that's important as well as up here in
the surface.
So in the content of our main activity so that it will appear and display something, all right.
And now we can go ahead and set up the buttons on those two screens.
So we need to have a button that will allow us to move from the top news to the detailed screen.
So let's go over there and set up a button inside of our column.
So I'm just going to put it underneath the existing text that that we have.
So here I'm just going to create a button composable where I need to import button and I'm going to
use to one with compose you.
This one here not the real companion, but this one and this button needs an on click event.
And here I'm just going to define what I want to happen once we click on the button and the button also
needs to have some content.
OK, so the content for now will just be the text that will say, we need to import text now.
Luckily, we don't because we had imported it already.
So I'm just going to say go to detail screen here.
OK, so this is what the button will say, at least from its appearance.
OK, so we need to also tell what this button should do once we click on it.
And I'm going to add that in a minute before that, we need to create a nav controller or we need to
pass a nav controller to our top news because this top news composable is going to take care of the
navigation that is going to occur inside of it, and we need to pass in a nav controller that is going
to take care of navigation inside of it.
And because we are navigating between different screens, we need to basically pass it from a different
screen, so to speak.
So here I'm going to set up a nav controller, which will be of type nav controller, and I can use
this nav controller inside my own click event to navigate to a different page so I can navigate to a
race ID, to a root direction and so forth.
So I'm just going to go to detail and it's just detail.
So the route detail.
And my top news.
They will have to do with a remember NAF controller.
So I'm just going to set up a remember NAF.
Controller.
Axle with no navigators.
So just a default one because it doesn't need to do any interaction to preview just shows the white
doesn't care about interaction or clickable events or anything like that.
OK, so this will now allow our nerve controller to navigate to the details screen.
But therefore, our top news needs to get a NAF controller and needs to be called inside of our news
app because here we have this composable top news and we now obviously need to put in the top news in
there.
And this will just be called here or created.
It will be called top news.
So the route for it will be called top news, which is the same name as the file itself.
But this is not necessary for the naming here, and the have controller that we're going to pass is
going to be the one that we have set up here so that remember NAF controller?
And at this point, we should be able to go from the top news to our details screen.
And there we are.
So we don't see anything yet, but we could move over to the other screen.
All right.
So now let's take care of the details screen.
Well, we are going to do exactly the same thing, basically.
So we need to set up a button.
So let's go ahead and get this button from our top news.
Let's set it up down here.
We will need to have a NAF controller, but we need to pass to our detailed screen, which will be a
NAF controller.
So and now we get the NAF controller.
This text says detailed screen.
So once we click on the button, we want to go to the top news like so.
And then go to the top news screen is what the text should say.
So what this button should say?
Now we need to provide this to our well, I remember NAF controller to our detailed screen in the preview.
So remember NAF controller with no navigators?
As I said, it's just a dummy.
And then inside of our news app, we have this composable down here where we also now need to set up
the details screen with a nav controller, and we're going to use the nav controller that we have set
up earlier some of the same nav controller, so to speak.
Okay, so now our details screen has a nav controller that it can use.
So once the details screen is clicked on or this button specifically is clicked on, it's going to navigate
to the top news.
So if now testers, we can see that we can go to the detailed screen, then back to the top news screen
and again to the details screen.
What this generates, however, is a bunch of screens that are stored in our stack.
What that means is that they can still go back to those pages by just pressing the back key so they
still exist in our stack.
So if I go back now, you see we go get back to the top new screen.
Then we go to the details screen.
If I pop back once again, we go to the top new screen again and then it closes the application because
there are no more screens in the stack available.
And this is something that we should try to avoid, so we should not navigate back and forth all the
time.
Instead of doing that.
What we can do is once we're on the details screen, we can just say close the current screen and clean
it from the stack.
Therefore, we can use the nav controller again and call this method called Pop Back Stack.
And this will attempt to pop the controllers back stack, so to pop means to delete or get rid of it.
OK, so that's what this pop back stack does.
All right, let's retry and then we will see that we can move to the detailed screen and then from the
details screen back to the top new screen.
But once I press the back key, my application closes because it didn't store all of those iterations
of us opening the screen one after the other.
So no matter how often I will do that, it will only store one instance one time when the details screen
and I press back, you see, I go back to the top of your screen and then I go back to work, closing
the application, which is also the behavior that you should try to implement.
So closing the application day, you could ask the user if he really wants to close the application
with a dialogue, for example.
But for now, this is going to be fine.
All right.
So now you have an idea of how to use the nav controller to navigate between the different screens.
One thing that was quite important is that you had this Rutan name here, which is not specifically
the same name as the screen name itself, so here we used the top news, which was the name of the composable
itself.
But here the detailed screen is not the same as this, so you just have detail.
So the route doesn't have to be the full name of the composable or in general, not at all the composable,
even though it makes sense to use a name that is similar.
And this just tells our news app, which takes care of those two composer bolts, how to call them in
the sense of their navigation.
So where to find them when we are talking about navigating?
Which is why if you go to your top news page, you can use the route of detail.
I don't have to you specifically call it detail screen, even though it would obviously make it easier
to understand.
So if I use detailed screen at this point, it will not work.
So let's try this.
This should not work.
I go to the teacher screen you see in my application crashes because this route doesn't exist.
So this route has to be exactly the same as here in this composable.
So it doesn't have to be the same as the file name itself, but it should be the same as the route where
you set up the composable for your NAF host, where you need to pass the nav controller, which is that
remember NAV Controller, which is just a nav host controller that handles the adding of the Compose
Navigator and dialogue navigator.
All right, that's it for this video.
See you in the next one.