1
00:00:01,130 --> 00:00:07,370
OK, so now back in the news app and our nav graph builder in the composable, we can now say what we

2
00:00:07,370 --> 00:00:08,180
want to display.

3
00:00:08,360 --> 00:00:14,030
So we want to display the top news with the nav controller being the nav controller and then.

4
00:00:15,290 --> 00:00:20,040
We want to do the same thing with our other two composable, so we have the bottom menu screen.

5
00:00:20,060 --> 00:00:24,380
Top news, we have the categories routes and we had the sources route.

6
00:00:24,890 --> 00:00:30,710
Now they don't need to NAF controller because what we are going to use here is going to be the categories.

7
00:00:31,280 --> 00:00:33,420
And here are the sources page.

8
00:00:33,830 --> 00:00:36,470
So so far, these screens, they are really empty.

9
00:00:36,470 --> 00:00:37,730
They just have to text, right?

10
00:00:38,210 --> 00:00:40,400
But we want to be able to navigate between them.

11
00:00:40,400 --> 00:00:48,710
So we need to use routes and we need to have a bottom navigation graph below that allows us to move

12
00:00:48,710 --> 00:00:52,090
between the different routes or the different pages, so to speak.

13
00:00:52,100 --> 00:00:53,900
So here's where we are loading the pages.

14
00:00:54,200 --> 00:00:59,180
We're passing a NAF controller to the top news page because the top news page needs to be able to navigate

15
00:00:59,180 --> 00:01:01,190
into the details page, for example.

16
00:01:03,580 --> 00:01:12,820
OK, and now let's make sure that our NEF hosts here as the bottom navigation in here.

17
00:01:12,940 --> 00:01:18,100
So let's create a bottom navigation item and pasta nav controller to it.

18
00:01:19,130 --> 00:01:21,550
Which will be this NAF controller from up here.

19
00:01:24,020 --> 00:01:26,540
Which we're passing to this bottom navigation down here.

20
00:01:27,820 --> 00:01:31,090
And this will now allow us to display the navigation.

21
00:01:32,290 --> 00:01:38,740
Now, back in our bottom menu, we will need you to set up this bottom navigation, as you might recall,

22
00:01:38,740 --> 00:01:42,700
we just created did, but we never populated it with any details.

23
00:01:42,970 --> 00:01:52,940
OK, so now instead of here, we will need to create a nav back stack entry by using the nav controller.

24
00:01:52,990 --> 00:01:57,250
Dot current back stack entry as state.

25
00:01:57,850 --> 00:02:05,890
OK, so we're getting the state here, and let's import this current text stack entry has state and

26
00:02:06,040 --> 00:02:08,410
now we can also get the current route.

27
00:02:08,949 --> 00:02:17,680
So we know at which page we are, so to speak, and can use our nav stack entry to get the destination

28
00:02:18,250 --> 00:02:18,610
route.

29
00:02:23,170 --> 00:02:27,340
What this will do is it will change to color whether an item is selected or not.

30
00:02:27,370 --> 00:02:32,110
So you see here, it's great out when it's not selected and it's white when it's selected.

31
00:02:32,440 --> 00:02:34,540
So that's what I want to do inside of here.

32
00:02:35,050 --> 00:02:39,470
So I get the current route understanding what is the current page.

33
00:02:39,490 --> 00:02:44,890
I get that from the backtrack entry, which is why we needed to have the backstage entry state.

34
00:02:45,040 --> 00:02:47,380
So we need to know which page we're at.

35
00:02:48,130 --> 00:02:51,010
OK, and based on that, we can then display the current route.

36
00:02:51,520 --> 00:02:55,550
So we're going to go through all of the menu items which we have set up here.

37
00:02:55,570 --> 00:03:02,080
So this is the list of the three menu items that we had, the top news category sources, and we are

38
00:03:02,230 --> 00:03:05,290
going to then check each individual item.

39
00:03:05,290 --> 00:03:06,040
So for each.

40
00:03:07,570 --> 00:03:16,090
We're going to change the color of it and therefore I'm going to create a bottom navigation item.

41
00:03:16,600 --> 00:03:19,150
And here we can just use the current route.

42
00:03:19,600 --> 00:03:21,640
This is why we even needed this current route.

43
00:03:22,820 --> 00:03:28,690
And here we need to actually state it equals data put.

44
00:03:29,390 --> 00:03:32,900
So this is this it hits this bottom menu screen item.

45
00:03:33,230 --> 00:03:34,460
So there's a lot going on here.

46
00:03:34,460 --> 00:03:40,520
I know that it's this is not an easy piece of cake here, but that's just how it's set up, right?

47
00:03:41,150 --> 00:03:47,210
And I will set up a couple of more settings here, for example, former bottom navigation item.

48
00:03:47,210 --> 00:03:55,670
I'm going to set the label to be a text item so it will set text to its title.

49
00:03:57,610 --> 00:04:03,610
Like so we need to import to text here, so this it's the title is something that we get from the bonded

50
00:04:03,610 --> 00:04:05,440
them navigation item itself, right?

51
00:04:06,400 --> 00:04:10,990
So we'll get the title now, then we get the selected item.

52
00:04:11,350 --> 00:04:17,680
But I also want to display the always sure label to true.

53
00:04:19,260 --> 00:04:21,420
And the selected.

54
00:04:23,790 --> 00:04:26,190
Content control color.

55
00:04:27,790 --> 00:04:28,630
To be white.

56
00:04:29,080 --> 00:04:31,270
So once it is selected, it should be white.

57
00:04:31,480 --> 00:04:37,210
Once it is unselected, so unselected content on color should be color.

58
00:04:38,800 --> 00:04:39,880
But, Ray?

59
00:04:41,530 --> 00:04:43,540
And let's import color for this to work.

60
00:04:44,610 --> 00:04:45,120
Like so.

61
00:04:48,010 --> 00:04:49,060
OK, so.

62
00:04:50,120 --> 00:04:55,340
Now we have the current route, and now let's implement what should happen once we are clicking on it.

63
00:04:55,640 --> 00:04:59,120
So on the click event, this stuff will happen.

64
00:04:59,390 --> 00:05:05,120
And after that, we can set something like the icon, for example, to be an icon.

65
00:05:06,260 --> 00:05:07,670
Let's import icon for that.

66
00:05:09,080 --> 00:05:12,470
And this icon will just use the image of actor.

67
00:05:14,710 --> 00:05:16,030
Of it's that icon.

68
00:05:18,470 --> 00:05:22,550
As well as the content description of it, the title.

69
00:05:23,800 --> 00:05:26,860
And let me just check if I'm still in the right spot.

70
00:05:27,280 --> 00:05:31,480
And this is actually supposed to go in here like so?

71
00:05:35,300 --> 00:05:38,750
So do we have an icon, let me see what is it?

72
00:05:39,620 --> 00:05:40,670
We had the icon.

73
00:05:41,570 --> 00:05:45,290
So let me see why doesn't it accepted it?

74
00:05:45,980 --> 00:05:49,820
That icon probably because of another era that we have.

75
00:05:50,780 --> 00:05:54,470
And as it seems, I need to put this icon somewhere else.

76
00:05:54,470 --> 00:06:00,560
So I could should be part of this bottom navigation item settings like so.

77
00:06:02,070 --> 00:06:04,710
OK, so is this the right icon it should be.

78
00:06:04,830 --> 00:06:10,650
We have the image vector for the icon, which is going to be the icon and the content description,

79
00:06:10,650 --> 00:06:12,150
which is going to be the title.

80
00:06:12,780 --> 00:06:15,180
And this has to be inside of curly brackets.

81
00:06:15,420 --> 00:06:15,930
All right.

82
00:06:16,110 --> 00:06:16,410
That's.

83
00:06:17,500 --> 00:06:18,910
The problem that we have here.

84
00:06:20,010 --> 00:06:25,860
OK, so let's get rid of this content of the bottom navigation I can, and then it should be significantly

85
00:06:25,860 --> 00:06:26,250
better.

86
00:06:26,260 --> 00:06:31,830
So now let me just see why this icon doesn't seem to appear so it is of type.

87
00:06:32,830 --> 00:06:37,000
Image vector and image vector is also a type image vector.

88
00:06:41,740 --> 00:06:49,300
And I guess it's because I didn't say that the civil like, so man on there.

89
00:06:49,780 --> 00:06:50,170
All right.

90
00:06:50,410 --> 00:06:52,210
So now we should be good.

91
00:06:52,240 --> 00:06:53,440
All right now we could.

92
00:06:57,030 --> 00:07:02,550
And now, before we take care of the actual click event that we had there in the bottom menu as well,

93
00:07:02,790 --> 00:07:04,200
which we need to implement.

94
00:07:04,800 --> 00:07:08,370
OK, and at this point we can set our bottom menu in here.

95
00:07:08,400 --> 00:07:13,020
Now I realize that I called this put on the menu, and this is a really tricky.

96
00:07:13,380 --> 00:07:19,500
So even though the file was called bottom menu, but I accidentally put a menu here, so now I can use

97
00:07:19,500 --> 00:07:22,560
my bottom menu and pass in the NAF controller.

98
00:07:23,010 --> 00:07:25,930
So we need to import the bottom menu for this to work.

99
00:07:25,950 --> 00:07:27,100
So now let's check it out.

100
00:07:27,100 --> 00:07:29,700
So let's see if that's going to appear in our application.

101
00:07:30,810 --> 00:07:31,830
And there we are.

102
00:07:32,100 --> 00:07:34,000
So the click event doesn't do anything yet.

103
00:07:34,050 --> 00:07:37,980
That's something we still need to take care of, but we have our bottom navigation.

104
00:07:38,700 --> 00:07:43,860
So let's have a look at the bottom menu and the click event.

105
00:07:43,890 --> 00:07:45,420
So here we have this to do still.

106
00:07:45,630 --> 00:07:48,210
So this is where we want to implement that on click event.

107
00:07:50,620 --> 00:07:59,350
So I wants to use the nerve controller at this point and the controller that I'm getting to navigate

108
00:07:59,350 --> 00:07:59,920
to something.

109
00:08:00,070 --> 00:08:01,360
So where do I navigate to?

110
00:08:01,900 --> 00:08:03,430
Well, to it, that route.

111
00:08:04,120 --> 00:08:11,290
So here the idea is exaggerating with all of those pop ups, so it should navigate to it that route,

112
00:08:12,010 --> 00:08:15,010
and it should then use the network controller.

113
00:08:15,760 --> 00:08:21,970
That Graph Dot set a start destination route.

114
00:08:24,040 --> 00:08:28,150
And it's going to check if it's empty, and that's why we're using this dot alert here.

115
00:08:29,020 --> 00:08:32,200
And this will now give me the route itself, which is a string.

116
00:08:32,350 --> 00:08:35,740
So this will be the route like so.

117
00:08:36,730 --> 00:08:39,039
And what I want to do is I want to pop up.

118
00:08:40,299 --> 00:08:49,120
To give an ID, which is going to be the route itself, and then we're going to set the safe state to

119
00:08:49,210 --> 00:08:49,600
true.

120
00:08:51,310 --> 00:09:01,450
And at this point here, after the NAF controller, I'm going to set the launch single top value to

121
00:09:01,450 --> 00:09:02,140
true as well.

122
00:09:03,130 --> 00:09:07,300
And then finally, the restore state value to true as well.

123
00:09:09,100 --> 00:09:17,230
OK, and at this point, let's try and see if this is going to make sure that we have top news selected,

124
00:09:17,230 --> 00:09:19,000
so let's see here, top news is selected now.

125
00:09:19,000 --> 00:09:20,590
Categories is selected.

126
00:09:20,590 --> 00:09:22,390
We can go over to the categories screen.

127
00:09:22,870 --> 00:09:25,450
The same goes for the source's screen and the top news.

128
00:09:25,450 --> 00:09:31,660
So each item that is selected now is highlighted and that's something that we have set up here.

129
00:09:31,840 --> 00:09:37,600
So once the selected content, they said one, once the content is selected is going to be white.

130
00:09:37,610 --> 00:09:43,540
Once it's unselected, it's going to be created and to select item will be the current route item.

131
00:09:44,570 --> 00:09:47,450
OK, so it's going to set the current route to be then.

132
00:09:48,000 --> 00:09:48,320
It.

133
00:09:49,490 --> 00:09:54,950
That route, and it is the bottom navigation item that we're currently looking at, so it is top news

134
00:09:54,950 --> 00:09:56,000
once I click on top news.

135
00:09:56,510 --> 00:09:58,700
It is Category one significant categories.

136
00:10:01,860 --> 00:10:04,770
OK, so now let's quickly summarize what we've created.

137
00:10:05,400 --> 00:10:12,210
So we created this bottom menu screen where we have our objects of two different menu items, so created

138
00:10:12,210 --> 00:10:12,960
the seal cluster.

139
00:10:12,960 --> 00:10:15,120
We can create objects inside of this glass.

140
00:10:15,120 --> 00:10:20,580
And but we're just saying, yes, we want to have the root name, want to have the icon that we want

141
00:10:20,580 --> 00:10:25,570
to use for it in here, as well as the title that we want to display in here.

142
00:10:25,590 --> 00:10:32,640
So, for example, top news category sources, then we have our button menu where we need to pass in

143
00:10:32,640 --> 00:10:37,620
the nav controller and we have the different bottom menu screen items that we were just talking about

144
00:10:37,860 --> 00:10:38,730
inside of a list.

145
00:10:39,330 --> 00:10:46,890
Then we create this bottom navigation item, which allows us to set the content color and then have

146
00:10:46,890 --> 00:10:51,930
the back strikes back, stack entry to know where we're currently at by using it.

147
00:10:52,140 --> 00:10:57,570
We get the current route and then we go through each of the items and we check whether it's selected

148
00:10:57,570 --> 00:10:58,350
or not selected.

149
00:10:58,680 --> 00:11:03,900
And once we click on any of the given items here at the bottom, this court will be executed, which

150
00:11:03,900 --> 00:11:06,540
basically just navigates to the root and the root.

151
00:11:06,540 --> 00:11:08,220
Is this piece here.

152
00:11:08,400 --> 00:11:11,570
So top news, for example, or categories and so forth.

153
00:11:11,580 --> 00:11:15,190
So it's just an internal name for where this item is located.

154
00:11:15,210 --> 00:11:16,170
So where it should go?

155
00:11:16,590 --> 00:11:22,110
And then we're using the nav controller to go to that the nation route that we clicked on.

156
00:11:22,620 --> 00:11:28,950
So it gives us that route and it goes over to that route, sets the safe state to true.

157
00:11:29,340 --> 00:11:33,520
And then we launch it in a single top way.

158
00:11:33,540 --> 00:11:39,420
So what you're saying, this item should be on top by itself and the restore state is going to be set

159
00:11:39,420 --> 00:11:40,380
to true as well.

160
00:11:40,650 --> 00:11:50,100
And then we're also setting the icon to be whatever the icon for that particular bottom menu screen

161
00:11:50,130 --> 00:11:51,120
object is.

162
00:11:51,840 --> 00:11:57,420
OK, so this icon, that icon and then the content description, which just gives me the title.

163
00:11:58,410 --> 00:11:58,860
OK.

164
00:11:59,430 --> 00:12:03,660
Then in the news app, we are using this bottom menu that we've just set up.

165
00:12:03,660 --> 00:12:06,810
We're passing the NAF controller so that we can navigate with it.

166
00:12:07,260 --> 00:12:09,350
And we do all of that in a scaffold.

167
00:12:09,360 --> 00:12:13,800
So the content that we have before we put that into the content of that scaffold.

168
00:12:14,100 --> 00:12:18,090
And we are just setting up the bottom bar to use the bottom menu.

169
00:12:19,110 --> 00:12:22,140
So, yeah, quite a long step that we had to do here.

170
00:12:22,140 --> 00:12:25,020
But now you have the bottom navigation.