1
00:00:01,020 --> 00:00:01,830
Welcome back.

2
00:00:01,980 --> 00:00:06,780
And this video, we're going to take care of the bottom navigation bar that you can see right here where

3
00:00:06,780 --> 00:00:12,690
we have the top news, we have the categories and sources, and we can jump between the different pages

4
00:00:12,690 --> 00:00:13,080
now.

5
00:00:13,440 --> 00:00:14,310
You can see here.

6
00:00:14,580 --> 00:00:16,470
And that's a pretty nice little feature.

7
00:00:16,470 --> 00:00:18,780
I believe this really helps us, too.

8
00:00:19,140 --> 00:00:23,850
Then later on, see the news based on this category and so forth.

9
00:00:24,450 --> 00:00:26,580
OK, so let's get started building all of that.

10
00:00:28,320 --> 00:00:35,970
Therefore, let's go ahead to our news app, and here we have our navigation in it, right?

11
00:00:36,030 --> 00:00:43,320
And I would like to have a composable which will take care of the navigation, but also off the bottom

12
00:00:43,320 --> 00:00:46,080
menu because we need to have a scaffold here.

13
00:00:46,620 --> 00:00:50,080
OK, so at this point, you can see we don't have a scaffold.

14
00:00:50,100 --> 00:00:54,490
This is just a page while at this point where we have the final result, yes.

15
00:00:54,540 --> 00:00:57,330
But in our version of this application, we don't have that yet.

16
00:00:57,660 --> 00:01:04,769
And in order to achieve that, I'm going to add a composable main screen here, which will need a nav

17
00:01:04,769 --> 00:01:10,230
controller as well as the scroll state, because I want to be able to scroll in it and I want to be

18
00:01:10,230 --> 00:01:13,230
able to have one navigate, basically.

19
00:01:13,530 --> 00:01:21,840
So inside of this, I'm going to use a scaffold and the scaffold will have a bottom bar like soul,

20
00:01:22,350 --> 00:01:25,560
which will be my bottom menu, which will have to set up in a bit.

21
00:01:26,010 --> 00:01:29,880
And then as the content of the scaffold, I'm going to have my navigation.

22
00:01:30,480 --> 00:01:37,890
So we will need to set up the navigation a little later because we need to exclude or put this nav controller

23
00:01:37,890 --> 00:01:39,790
and everything to a different spot.

24
00:01:39,810 --> 00:01:41,850
But we're going to take care of that in a bit.

25
00:01:42,300 --> 00:01:42,570
All right.

26
00:01:42,570 --> 00:01:46,050
So now let's go ahead and take care of the bottom menu for our screen.

27
00:01:46,140 --> 00:01:50,220
Now you could call it screen bottom menu or bottom menu general.

28
00:01:50,580 --> 00:01:54,930
I'm just going to create a class a sealed class.

29
00:01:56,230 --> 00:02:00,370
So they don't go to call bottom menu screen.

30
00:02:04,010 --> 00:02:09,860
So this class will be used as a template for each option, which we will have so a route as the key

31
00:02:09,860 --> 00:02:11,450
for each screen navigation.

32
00:02:12,200 --> 00:02:14,720
So let's set that up here.

33
00:02:14,840 --> 00:02:24,050
While routes of type string, then an icon has the image showing on the bar of each of those options

34
00:02:24,050 --> 00:02:24,620
that we have.

35
00:02:25,160 --> 00:02:26,480
So this will be of type.

36
00:02:26,480 --> 00:02:27,260
Image a vector.

37
00:02:28,640 --> 00:02:30,170
And then a title.

38
00:02:30,320 --> 00:02:32,060
So title of type string.

39
00:02:36,240 --> 00:02:43,380
Now, in order to now use the icons that you see here, so the top news categories and sources, I will

40
00:02:43,380 --> 00:02:44,990
need to add a dependency.

41
00:02:45,060 --> 00:02:50,130
So let's go over to our bill, but cradle and add the dependency that we're going to need for that.

42
00:02:50,850 --> 00:02:53,580
Their dependency is the following.

43
00:02:53,730 --> 00:02:57,140
So let me just paste it in here and go over it.

44
00:02:57,150 --> 00:03:01,710
Compose material material minus icons extended with the compose version.

45
00:03:02,610 --> 00:03:05,490
OK, so this will now allow us after we think that.

46
00:03:05,490 --> 00:03:08,940
So click on sync now to use the material icons.

47
00:03:10,080 --> 00:03:20,100
OK, so let's go back to our bottom menu screen key to file and here we can now add the different objects

48
00:03:20,100 --> 00:03:23,580
that I want to display here so you can just go ahead and use objects.

49
00:03:23,970 --> 00:03:29,680
Top news, for example, to be of type bottom menu screen.

50
00:03:29,730 --> 00:03:35,700
So we're just creating objects inside of the class, which is why we're making it sealed.

51
00:03:36,960 --> 00:03:40,230
And here the root would just be a string.

52
00:03:40,350 --> 00:03:43,770
I'm going to call this one top news like so.

53
00:03:45,280 --> 00:03:48,460
And the icon is going to be I can start outlined.

54
00:03:50,030 --> 00:03:51,710
And we need to import icons for this.

55
00:03:52,580 --> 00:04:00,410
So I already did outline thought home that this would be our home and we need to import home here.

56
00:04:01,070 --> 00:04:03,830
So hover over it and make sure that you import home.

57
00:04:04,430 --> 00:04:07,160
And then finally, we need to pass in the title itself.

58
00:04:10,490 --> 00:04:14,240
Which will be just a text that will appear there, and I'm going to call this one.

59
00:04:14,270 --> 00:04:14,840
Top news.

60
00:04:16,980 --> 00:04:17,399
OK.

61
00:04:18,029 --> 00:04:24,690
So then let's do the same thing with two more of those objects, because as you saw, we have three

62
00:04:24,690 --> 00:04:25,290
options.

63
00:04:26,100 --> 00:04:27,840
Top news categories and sources.

64
00:04:28,050 --> 00:04:31,050
So I'm going to paste it in here twice.

65
00:04:31,290 --> 00:04:34,080
And actually, let's call this top news.

66
00:04:34,740 --> 00:04:40,890
And this one should be categories where I also need to change to route to categories.

67
00:04:42,270 --> 00:04:52,380
And the outline will not be home, but category this one and the title should also be category, but

68
00:04:52,380 --> 00:04:53,640
this time with a Capital C.

69
00:04:54,750 --> 00:04:58,290
OK, and then the third item will be sources.

70
00:05:00,110 --> 00:05:04,370
So the route for it will be sources.

71
00:05:05,590 --> 00:05:08,440
And this route, it will be important for navigation later.

72
00:05:09,070 --> 00:05:15,670
And then the outline will be sources with a capital s make so.

73
00:05:18,850 --> 00:05:24,910
Now, let's go ahead and create a new component that will actually take care of this brain, this stuff.

74
00:05:25,340 --> 00:05:31,480
OK, and the component will be a bottom menu that allows us to navigate between the different items.

75
00:05:34,010 --> 00:05:35,960
So I'm just going to create a new.

76
00:05:37,190 --> 00:05:39,620
Package here that I'm going to call components.

77
00:05:41,180 --> 00:05:43,670
And maybe not with a capital C, but like this.

78
00:05:44,360 --> 00:05:48,110
And inside of components, I'm going to create a new Cortland file class.

79
00:05:48,300 --> 00:05:51,560
It's going to be a file which I'm going to call bottom menu.

80
00:05:53,300 --> 00:05:55,130
And here this will be a composable.

81
00:05:55,520 --> 00:05:59,060
So let's add that at composable keyword as well as fun.

82
00:05:59,540 --> 00:06:08,240
Bottom menu, which requires a controller item so that we can navigate between the different routes,

83
00:06:08,240 --> 00:06:08,900
so to speak.

84
00:06:09,680 --> 00:06:12,800
Now we won't create a list of menu items.

85
00:06:14,060 --> 00:06:20,510
Which are just the items that we just created inside of our bottom menu screen.

86
00:06:20,840 --> 00:06:31,070
So here bottom menu screen, top news, then bottom menu screen categories and run catching, but categories

87
00:06:31,160 --> 00:06:31,550
like this.

88
00:06:32,990 --> 00:06:36,470
And finally, our bottom menu screen sources.

89
00:06:38,250 --> 00:06:38,700
Like so.

90
00:06:41,160 --> 00:06:42,750
And there we are.

91
00:06:45,350 --> 00:06:49,070
OK, so this will be the list of menu items that we have.

92
00:06:49,220 --> 00:06:51,770
Now we can take care of the bottom navigation.

93
00:06:52,430 --> 00:06:55,940
So let's go ahead and create a button navigation.

94
00:06:56,060 --> 00:07:02,480
So this is just another composable where we can pass a couple of parameters, for example, the color.

95
00:07:03,140 --> 00:07:06,200
So I'm going to set the color to be white.

96
00:07:06,530 --> 00:07:13,640
OK, so here, color resource with our color dot the white.

97
00:07:15,140 --> 00:07:17,840
And we need to import our ire for this as well.

98
00:07:18,050 --> 00:07:25,400
So let's import it, OK, so not this bottom navigation, it gets us to scope, which just means that

99
00:07:25,400 --> 00:07:27,530
it gives us the individual items.

100
00:07:28,010 --> 00:07:33,410
But before we're going to take care of this bottom navigation, let's jump over to our newser.

101
00:07:33,560 --> 00:07:41,870
So now we can use our main screen here in the news app instead of using navigation directly here.

102
00:07:42,290 --> 00:07:47,690
We're going to now use our main screen, which has the navigation itself as well.

103
00:07:48,500 --> 00:07:52,190
But the main screen needs to nav controller as well as this controller state.

104
00:07:52,640 --> 00:07:54,020
So let's set those up.

105
00:07:54,980 --> 00:08:00,890
Controller or scroll state with was not the controller state scroll state, which will be remember scroll

106
00:08:00,890 --> 00:08:06,230
state and nav controller, which will be a Remember NAV controller.

107
00:08:08,160 --> 00:08:09,560
So now we can pass those two.

108
00:08:10,410 --> 00:08:12,540
So NAF controller and.

109
00:08:14,030 --> 00:08:14,780
Scroll state.

110
00:08:17,410 --> 00:08:23,500
And now we can set those values to our navigation as well, because we should change our navigation

111
00:08:23,500 --> 00:08:27,970
to require those OK because we don't need to create them in here.

112
00:08:28,000 --> 00:08:30,290
We're going to create them at the top level.

113
00:08:30,520 --> 00:08:32,380
So in the news app, we're creating it.

114
00:08:32,380 --> 00:08:39,490
We're passing them to the main screen from the main screen, we're passing them to the navigation.

115
00:08:39,850 --> 00:08:45,340
So let's pass the NAF controller in here as well as the scroll state.

116
00:08:46,850 --> 00:08:53,600
Like so and obviously, we need to have them in the description of the navigation as well.

117
00:08:54,140 --> 00:09:00,560
So now this nav controller that we have here will be the nav controller that was passed to us.

118
00:09:03,130 --> 00:09:10,960
And just to be sure, let me add, NAF controller is equal nav controller and then make sure that this

119
00:09:10,960 --> 00:09:17,230
will be the nav controller, the nav controller and this will be the state will be a scroll state.

120
00:09:17,950 --> 00:09:20,050
OK, so if that doesn't fix it, let's see.

121
00:09:20,050 --> 00:09:21,580
What is the problem here?

122
00:09:22,540 --> 00:09:26,770
Create cost expression, OK, because it's enough host controller.

123
00:09:26,770 --> 00:09:29,170
So did I call it somewhere incorrectly?

124
00:09:30,040 --> 00:09:31,210
NAV Controller.

125
00:09:31,840 --> 00:09:33,280
Remember NAV Controller?

126
00:09:33,610 --> 00:09:35,080
What is that going to give us?

127
00:09:36,120 --> 00:09:37,800
Hey, Navajos controller, OK?

128
00:09:40,230 --> 00:09:45,900
So that means that our main screen is going to use a map host controller instead.

129
00:09:46,800 --> 00:09:51,330
So I'm going to call it nav controller, but it's actually going to be a nav host controller.

130
00:09:51,990 --> 00:09:54,150
So NAV host controller.

131
00:09:56,480 --> 00:10:03,620
Like so and then we can pass it, because that's what our remembrance controller gives us, right?

132
00:10:03,620 --> 00:10:10,880
So it gives us back a NAF host controller who can see that here and here, this is what it returns and

133
00:10:11,030 --> 00:10:11,750
host controller.

134
00:10:12,380 --> 00:10:17,690
So now in that case, we need to pass the NAF host controller to it.

135
00:10:19,110 --> 00:10:23,870
OK, and at this point, this will then also be an IV host controller.

136
00:10:24,590 --> 00:10:26,690
This is a really tricky little problem here.

137
00:10:27,770 --> 00:10:28,250
All right.

138
00:10:28,610 --> 00:10:35,750
So then we can take care of having a category screen and a source of screen.

139
00:10:35,960 --> 00:10:37,620
So let's just create those real quick.

140
00:10:37,700 --> 00:10:39,370
We'll just be very simple pages.

141
00:10:39,380 --> 00:10:40,490
Nothing too fancy.

142
00:10:40,910 --> 00:10:42,800
I'm going to add them to my screens.

143
00:10:43,070 --> 00:10:43,940
OK, so here.

144
00:10:45,410 --> 00:10:49,150
Court and file class, this will be the categories.

145
00:10:50,280 --> 00:10:53,310
Like so which will just be a composable.

146
00:10:57,250 --> 00:11:02,170
And for now, it will just be the Katie Couric's sole.

147
00:11:03,340 --> 00:11:05,560
Where I'm just going to use a text.

148
00:11:05,920 --> 00:11:10,900
So let's import text here and set the text two categories screen.

149
00:11:11,200 --> 00:11:16,210
So when old will be empty, but later on, we're going to overwrite all of that and let's create another

150
00:11:16,390 --> 00:11:18,520
file, which will be our sources.

151
00:11:18,910 --> 00:11:27,910
OK, so like this sources again, it's a composable which will be fun sources, which will just display

152
00:11:27,910 --> 00:11:28,870
a text for now.

153
00:11:28,880 --> 00:11:30,520
So let's import text here as well.

154
00:11:32,320 --> 00:11:39,400
With Old Enter, so and then the text will just display something like.

155
00:11:42,260 --> 00:11:44,150
Sources screen.

156
00:11:46,970 --> 00:11:50,780
OK, and now we can take care of the bottom navigation.

157
00:11:51,110 --> 00:11:54,980
So instead of the news app, this is the actual application.

158
00:11:55,370 --> 00:12:03,500
We need to take care of the navigation inside of a new function that will be the next graph builder.

159
00:12:03,620 --> 00:12:07,310
So let's go ahead and create that here and actually on the top level.

160
00:12:07,940 --> 00:12:12,980
So here, fun math, graph builder.

161
00:12:14,560 --> 00:12:17,230
But bottom navigation.

162
00:12:19,910 --> 00:12:26,330
And here we need to pass a knife controller to some, not a knife host controller, but an actual knife

163
00:12:26,330 --> 00:12:26,900
controller.

164
00:12:30,230 --> 00:12:32,940
And in here, we can now create a composable.

165
00:12:33,440 --> 00:12:43,730
So a composable which will be from our bottom menu screen, then we have top news and get its root because

166
00:12:43,730 --> 00:12:46,490
we need to use the root and we have used this before, right?

167
00:12:46,790 --> 00:12:54,050
So when we were navigating between different items, so Missy, was it in here?

168
00:12:55,010 --> 00:12:56,200
Yeah, we had the roots here.

169
00:12:56,210 --> 00:12:57,470
You see roots top news.

170
00:12:57,890 --> 00:13:04,160
But now we don't get the root as an actual string, even though the root is a string, but we get it

171
00:13:04,160 --> 00:13:06,700
from the well.

172
00:13:06,770 --> 00:13:11,090
The root parameter that we passed to a bottom menu screen.

173
00:13:13,040 --> 00:13:15,050
Let's cut the video at this point.

174
00:13:15,080 --> 00:13:17,840
Make a quick break and then see you in the second part.