1 00:00:01,000 --> 00:00:01,660 Welcome back. 2 00:00:01,720 --> 00:00:06,400 And this video we're going to now use are two pages that we have set up in the last video, and we're 3 00:00:06,400 --> 00:00:08,470 going to see how to navigate between them. 4 00:00:08,470 --> 00:00:10,240 So we're going to set up this navigation. 5 00:00:10,240 --> 00:00:12,310 So you see, here we are on a top news. 6 00:00:12,310 --> 00:00:16,900 And then once I click on this, I go to the details screen and there I have the button that I can go 7 00:00:16,900 --> 00:00:18,220 back to my top news. 8 00:00:18,700 --> 00:00:23,500 So we're going to set that up, which is going to be the basis of any navigation and compose. 9 00:00:24,620 --> 00:00:31,280 And I'm going to create a news app inside of my UI, not inside of screens, but in UI that I'm going 10 00:00:31,280 --> 00:00:34,070 to call news app. 11 00:00:34,190 --> 00:00:39,920 OK, so this will be a new composable, which will then contain two different screens. 12 00:00:40,010 --> 00:00:44,500 OK, so this will be the compose of a four hour news app in general. 13 00:00:44,840 --> 00:00:52,790 So let's add the composable annotation here and create the news app, but with the same name as the 14 00:00:52,790 --> 00:00:53,630 file again. 15 00:00:54,140 --> 00:00:58,130 Next, we're going to set up a composable that I will call for navigation. 16 00:00:58,280 --> 00:01:02,870 So here at composable fun navigation. 17 00:01:04,349 --> 00:01:10,380 OK, so this navigation should then also be used inside of our news app as the composable now the navigation 18 00:01:10,380 --> 00:01:11,730 itself is empty at this point. 19 00:01:12,000 --> 00:01:16,350 But what we're going to require, there's going to be the nav controller. 20 00:01:16,350 --> 00:01:22,740 So I remember NAV controller, so we're going to use this remember key quite a bit, as you see here. 21 00:01:23,040 --> 00:01:29,790 So this remember nav controller, see nav on this one. 22 00:01:30,300 --> 00:01:36,510 So we get a nav host controller that handles the adding of the Compass Navigator and Dialogue Navigator. 23 00:01:36,840 --> 00:01:43,350 Additional navigator instances can be passed through navigators to be applied to the returned nav controller. 24 00:01:44,040 --> 00:01:48,990 So let's go ahead and set that up, and I'm going to not pass a navigator. 25 00:01:49,140 --> 00:01:53,760 I'm just going to set up the nav controller as is, and then we can use the nav host. 26 00:01:54,480 --> 00:02:00,510 OK, so there is this nav host class provides in place in the compose hierarchy for self-contained navigation 27 00:02:00,510 --> 00:02:01,160 to occur. 28 00:02:01,560 --> 00:02:07,140 Once this is called any composable within the given nav graph builder can be navigated to from the provided 29 00:02:07,140 --> 00:02:07,980 nav controller. 30 00:02:08,310 --> 00:02:11,850 So you see we need to provide a nav controller, which is why we have set up one. 31 00:02:12,240 --> 00:02:14,670 So let's pass the nav controller. 32 00:02:16,300 --> 00:02:18,790 That we've just set up as the NAF controller. 33 00:02:19,960 --> 00:02:26,200 Okay, now for this to work, we also need to import never host controller instead of Android Compose 34 00:02:26,220 --> 00:02:26,860 UI. 35 00:02:26,980 --> 00:02:28,120 So this one here? 36 00:02:28,330 --> 00:02:32,350 Okay, you will find that the NAF host has been added and now we can use it. 37 00:02:32,920 --> 00:02:38,010 So this nav host controller also needs to know what the start destination is. 38 00:02:38,020 --> 00:02:42,790 So what is going to be the string or the page that we start with? 39 00:02:42,790 --> 00:02:45,040 And I'm going to say we start with the top news. 40 00:02:45,640 --> 00:02:52,540 So this will be the start destination and then we need to assign the content of it. 41 00:02:52,690 --> 00:02:54,820 So we get the nav craft builder. 42 00:02:55,330 --> 00:02:59,590 And in here, we can just go ahead and set up the different composable. 43 00:03:00,010 --> 00:03:05,320 So for now, I'm just going to say I have a composable in here that is called top news. 44 00:03:05,320 --> 00:03:07,410 So this is the route that we need to use. 45 00:03:07,420 --> 00:03:10,630 And let's add the composable keyword here. 46 00:03:11,740 --> 00:03:13,840 This one here, let's import that. 47 00:03:14,590 --> 00:03:18,340 So here we need to pass the nav controller to our top news. 48 00:03:18,340 --> 00:03:24,220 So to these top news, we need to pass on the nav controller, but let's take care of that in a bit. 49 00:03:24,580 --> 00:03:28,630 So for now, let's just set up the two composable in here. 50 00:03:28,900 --> 00:03:33,870 So instead of the nav host, so we have the top news and we have the detail screen. 51 00:03:34,660 --> 00:03:38,650 OK, and this will be the two pages that we will use as routes. 52 00:03:40,380 --> 00:03:45,240 Now, let's go over to our main activity and actually use this news app that we've just set up, because 53 00:03:45,240 --> 00:03:46,470 currently it's not used, right? 54 00:03:46,800 --> 00:03:53,130 So in the main activity that's added here in the preview, and that's important as well as up here in 55 00:03:53,130 --> 00:03:53,700 the surface. 56 00:03:53,700 --> 00:04:00,350 So in the content of our main activity so that it will appear and display something, all right. 57 00:04:00,360 --> 00:04:05,250 And now we can go ahead and set up the buttons on those two screens. 58 00:04:05,250 --> 00:04:09,750 So we need to have a button that will allow us to move from the top news to the detailed screen. 59 00:04:10,080 --> 00:04:13,950 So let's go over there and set up a button inside of our column. 60 00:04:13,950 --> 00:04:17,190 So I'm just going to put it underneath the existing text that that we have. 61 00:04:17,610 --> 00:04:23,700 So here I'm just going to create a button composable where I need to import button and I'm going to 62 00:04:23,700 --> 00:04:26,230 use to one with compose you. 63 00:04:26,610 --> 00:04:32,310 This one here not the real companion, but this one and this button needs an on click event. 64 00:04:32,880 --> 00:04:38,370 And here I'm just going to define what I want to happen once we click on the button and the button also 65 00:04:38,370 --> 00:04:39,810 needs to have some content. 66 00:04:40,320 --> 00:04:48,130 OK, so the content for now will just be the text that will say, we need to import text now. 67 00:04:48,150 --> 00:04:50,730 Luckily, we don't because we had imported it already. 68 00:04:51,000 --> 00:04:54,510 So I'm just going to say go to detail screen here. 69 00:04:54,900 --> 00:04:58,890 OK, so this is what the button will say, at least from its appearance. 70 00:05:00,060 --> 00:05:05,160 OK, so we need to also tell what this button should do once we click on it. 71 00:05:05,460 --> 00:05:11,820 And I'm going to add that in a minute before that, we need to create a nav controller or we need to 72 00:05:11,820 --> 00:05:17,340 pass a nav controller to our top news because this top news composable is going to take care of the 73 00:05:17,340 --> 00:05:22,650 navigation that is going to occur inside of it, and we need to pass in a nav controller that is going 74 00:05:22,650 --> 00:05:24,870 to take care of navigation inside of it. 75 00:05:25,200 --> 00:05:31,050 And because we are navigating between different screens, we need to basically pass it from a different 76 00:05:31,050 --> 00:05:31,930 screen, so to speak. 77 00:05:31,950 --> 00:05:37,980 So here I'm going to set up a nav controller, which will be of type nav controller, and I can use 78 00:05:37,980 --> 00:05:45,540 this nav controller inside my own click event to navigate to a different page so I can navigate to a 79 00:05:45,540 --> 00:05:47,850 race ID, to a root direction and so forth. 80 00:05:47,850 --> 00:05:53,370 So I'm just going to go to detail and it's just detail. 81 00:05:53,430 --> 00:05:54,750 So the route detail. 82 00:05:57,820 --> 00:05:59,050 And my top news. 83 00:05:59,800 --> 00:06:02,990 They will have to do with a remember NAF controller. 84 00:06:03,010 --> 00:06:05,440 So I'm just going to set up a remember NAF. 85 00:06:07,230 --> 00:06:07,890 Controller. 86 00:06:08,930 --> 00:06:10,850 Axle with no navigators. 87 00:06:11,510 --> 00:06:16,700 So just a default one because it doesn't need to do any interaction to preview just shows the white 88 00:06:16,700 --> 00:06:20,270 doesn't care about interaction or clickable events or anything like that. 89 00:06:20,870 --> 00:06:25,310 OK, so this will now allow our nerve controller to navigate to the details screen. 90 00:06:27,720 --> 00:06:35,970 But therefore, our top news needs to get a NAF controller and needs to be called inside of our news 91 00:06:35,970 --> 00:06:43,590 app because here we have this composable top news and we now obviously need to put in the top news in 92 00:06:43,590 --> 00:06:43,870 there. 93 00:06:44,280 --> 00:06:47,280 And this will just be called here or created. 94 00:06:47,580 --> 00:06:49,240 It will be called top news. 95 00:06:49,240 --> 00:06:54,030 So the route for it will be called top news, which is the same name as the file itself. 96 00:06:54,150 --> 00:07:00,540 But this is not necessary for the naming here, and the have controller that we're going to pass is 97 00:07:00,540 --> 00:07:05,010 going to be the one that we have set up here so that remember NAF controller? 98 00:07:06,250 --> 00:07:11,650 And at this point, we should be able to go from the top news to our details screen. 99 00:07:15,340 --> 00:07:16,030 And there we are. 100 00:07:16,060 --> 00:07:20,020 So we don't see anything yet, but we could move over to the other screen. 101 00:07:21,160 --> 00:07:21,600 All right. 102 00:07:21,610 --> 00:07:23,770 So now let's take care of the details screen. 103 00:07:26,630 --> 00:07:29,480 Well, we are going to do exactly the same thing, basically. 104 00:07:29,810 --> 00:07:31,310 So we need to set up a button. 105 00:07:31,550 --> 00:07:35,660 So let's go ahead and get this button from our top news. 106 00:07:36,080 --> 00:07:37,550 Let's set it up down here. 107 00:07:38,030 --> 00:07:44,660 We will need to have a NAF controller, but we need to pass to our detailed screen, which will be a 108 00:07:44,660 --> 00:07:45,530 NAF controller. 109 00:07:45,820 --> 00:07:49,040 So and now we get the NAF controller. 110 00:07:49,790 --> 00:07:52,060 This text says detailed screen. 111 00:07:52,070 --> 00:07:58,430 So once we click on the button, we want to go to the top news like so. 112 00:07:59,620 --> 00:08:05,470 And then go to the top news screen is what the text should say. 113 00:08:05,500 --> 00:08:06,820 So what this button should say? 114 00:08:08,990 --> 00:08:14,510 Now we need to provide this to our well, I remember NAF controller to our detailed screen in the preview. 115 00:08:15,050 --> 00:08:19,040 So remember NAF controller with no navigators? 116 00:08:19,370 --> 00:08:21,170 As I said, it's just a dummy. 117 00:08:21,680 --> 00:08:27,440 And then inside of our news app, we have this composable down here where we also now need to set up 118 00:08:27,440 --> 00:08:33,799 the details screen with a nav controller, and we're going to use the nav controller that we have set 119 00:08:33,799 --> 00:08:36,440 up earlier some of the same nav controller, so to speak. 120 00:08:37,190 --> 00:08:40,970 Okay, so now our details screen has a nav controller that it can use. 121 00:08:41,419 --> 00:08:48,260 So once the details screen is clicked on or this button specifically is clicked on, it's going to navigate 122 00:08:48,260 --> 00:08:49,130 to the top news. 123 00:08:50,640 --> 00:08:55,590 So if now testers, we can see that we can go to the detailed screen, then back to the top news screen 124 00:08:55,590 --> 00:08:57,350 and again to the details screen. 125 00:08:57,900 --> 00:09:03,090 What this generates, however, is a bunch of screens that are stored in our stack. 126 00:09:03,360 --> 00:09:09,000 What that means is that they can still go back to those pages by just pressing the back key so they 127 00:09:09,000 --> 00:09:10,380 still exist in our stack. 128 00:09:10,380 --> 00:09:13,320 So if I go back now, you see we go get back to the top new screen. 129 00:09:13,590 --> 00:09:14,970 Then we go to the details screen. 130 00:09:14,970 --> 00:09:20,220 If I pop back once again, we go to the top new screen again and then it closes the application because 131 00:09:20,220 --> 00:09:23,530 there are no more screens in the stack available. 132 00:09:24,210 --> 00:09:29,970 And this is something that we should try to avoid, so we should not navigate back and forth all the 133 00:09:29,970 --> 00:09:30,360 time. 134 00:09:30,570 --> 00:09:32,180 Instead of doing that. 135 00:09:32,190 --> 00:09:37,920 What we can do is once we're on the details screen, we can just say close the current screen and clean 136 00:09:37,920 --> 00:09:39,450 it from the stack. 137 00:09:39,900 --> 00:09:44,520 Therefore, we can use the nav controller again and call this method called Pop Back Stack. 138 00:09:45,030 --> 00:09:52,170 And this will attempt to pop the controllers back stack, so to pop means to delete or get rid of it. 139 00:09:52,380 --> 00:09:54,720 OK, so that's what this pop back stack does. 140 00:09:55,110 --> 00:10:02,490 All right, let's retry and then we will see that we can move to the detailed screen and then from the 141 00:10:02,490 --> 00:10:04,350 details screen back to the top new screen. 142 00:10:04,350 --> 00:10:11,250 But once I press the back key, my application closes because it didn't store all of those iterations 143 00:10:11,250 --> 00:10:13,830 of us opening the screen one after the other. 144 00:10:14,070 --> 00:10:20,760 So no matter how often I will do that, it will only store one instance one time when the details screen 145 00:10:20,760 --> 00:10:25,950 and I press back, you see, I go back to the top of your screen and then I go back to work, closing 146 00:10:25,950 --> 00:10:29,310 the application, which is also the behavior that you should try to implement. 147 00:10:29,580 --> 00:10:34,050 So closing the application day, you could ask the user if he really wants to close the application 148 00:10:34,050 --> 00:10:35,760 with a dialogue, for example. 149 00:10:36,090 --> 00:10:38,220 But for now, this is going to be fine. 150 00:10:39,060 --> 00:10:39,390 All right. 151 00:10:39,390 --> 00:10:45,780 So now you have an idea of how to use the nav controller to navigate between the different screens. 152 00:10:48,250 --> 00:10:54,970 One thing that was quite important is that you had this Rutan name here, which is not specifically 153 00:10:54,970 --> 00:11:02,230 the same name as the screen name itself, so here we used the top news, which was the name of the composable 154 00:11:02,230 --> 00:11:02,740 itself. 155 00:11:03,070 --> 00:11:07,390 But here the detailed screen is not the same as this, so you just have detail. 156 00:11:07,720 --> 00:11:12,940 So the route doesn't have to be the full name of the composable or in general, not at all the composable, 157 00:11:12,940 --> 00:11:16,360 even though it makes sense to use a name that is similar. 158 00:11:17,940 --> 00:11:24,090 And this just tells our news app, which takes care of those two composer bolts, how to call them in 159 00:11:24,090 --> 00:11:25,890 the sense of their navigation. 160 00:11:26,400 --> 00:11:30,690 So where to find them when we are talking about navigating? 161 00:11:32,440 --> 00:11:37,030 Which is why if you go to your top news page, you can use the route of detail. 162 00:11:37,270 --> 00:11:45,520 I don't have to you specifically call it detail screen, even though it would obviously make it easier 163 00:11:45,940 --> 00:11:46,950 to understand. 164 00:11:46,960 --> 00:11:50,020 So if I use detailed screen at this point, it will not work. 165 00:11:50,020 --> 00:11:51,010 So let's try this. 166 00:11:51,400 --> 00:11:52,300 This should not work. 167 00:11:52,420 --> 00:11:56,740 I go to the teacher screen you see in my application crashes because this route doesn't exist. 168 00:11:57,520 --> 00:12:01,480 So this route has to be exactly the same as here in this composable. 169 00:12:02,780 --> 00:12:07,100 So it doesn't have to be the same as the file name itself, but it should be the same as the route where 170 00:12:07,100 --> 00:12:11,990 you set up the composable for your NAF host, where you need to pass the nav controller, which is that 171 00:12:11,990 --> 00:12:18,680 remember NAV Controller, which is just a nav host controller that handles the adding of the Compose 172 00:12:18,720 --> 00:12:20,690 Navigator and dialogue navigator. 173 00:12:23,050 --> 00:12:24,310 All right, that's it for this video. 174 00:12:24,490 --> 00:12:25,330 See you in the next one.