1
00:00:00,920 --> 00:00:01,550
Welcome back.

2
00:00:01,790 --> 00:00:08,870
The goal of this video is probably the next one as well is going to be this a little draw that we want

3
00:00:08,870 --> 00:00:09,920
to implement.

4
00:00:10,520 --> 00:00:14,900
So this is a drawn menu and you can see there are a bunch of options, even though they might not be

5
00:00:14,900 --> 00:00:17,510
looking exactly the same as with the real Gmail app.

6
00:00:17,840 --> 00:00:21,640
It's really just about the idea that we are trying to implement you.

7
00:00:21,650 --> 00:00:27,650
So you see we have an icon where the text we have titles and then you at the top, we have this Gmail

8
00:00:27,650 --> 00:00:30,350
title, and that's pretty much what we're going to build.

9
00:00:30,350 --> 00:00:36,440
You can see we can scroll in here because there are more options than we can see on one screen size,

10
00:00:36,440 --> 00:00:37,100
so to speak.

11
00:00:37,400 --> 00:00:39,410
So let's go ahead and build that.

12
00:00:39,590 --> 00:00:45,650
Even though this might take more than just one video because it's quite a bit that we need to build

13
00:00:45,650 --> 00:00:45,920
here.

14
00:00:47,220 --> 00:00:47,640
All right.

15
00:00:48,030 --> 00:00:53,880
So we need to start with something called the scaffold state, because the draw menu is connected to

16
00:00:53,880 --> 00:00:57,960
the scaffold, we need to use the scaffold state to open or close it.

17
00:00:58,380 --> 00:01:00,450
So in the home app bar.

18
00:01:01,420 --> 00:01:04,930
Composable, we create a scaffold state.

19
00:01:07,730 --> 00:01:13,880
So let's add that here, Scaffold State, which will be of Typekit scaffold state.

20
00:01:16,030 --> 00:01:19,630
And then in the I can button on click method.

21
00:01:19,750 --> 00:01:21,700
So here we have this icon.

22
00:01:24,830 --> 00:01:29,510
And then here in the home app bar, we have this role where we had our icon.

23
00:01:29,900 --> 00:01:34,430
But I want to replace this with an actual icon button.

24
00:01:34,910 --> 00:01:43,310
So what I'm going to do is I'm going to add an icon button here, which will internally have an icon

25
00:01:43,310 --> 00:01:45,290
as the content of it.

26
00:01:45,560 --> 00:01:47,390
So here we can add an icon click event.

27
00:01:48,470 --> 00:01:55,670
And here we can use the icon has the content of our icon button like so.

28
00:01:56,120 --> 00:02:03,200
And then once we click on the icon button, we will need to use that scaffold state that we just set

29
00:02:03,200 --> 00:02:07,100
up and we're going to use a cowritten here.

30
00:02:07,490 --> 00:02:17,210
So scope, launch and scope is something we will need to get in the home app bar as well.

31
00:02:17,540 --> 00:02:19,910
So we need to know in which scope we are at.

32
00:02:20,330 --> 00:02:25,370
And this will be of type call routine scope.

33
00:02:27,090 --> 00:02:29,850
OK, now we can use that scope to launch something.

34
00:02:30,300 --> 00:02:36,300
And what I'm going to launch is the scaffold state that draw state, that open.

35
00:02:36,810 --> 00:02:40,500
So you see that this scaffold state has this open state.

36
00:02:40,800 --> 00:02:49,740
Now let me make sure that I have launch important and then open will work because we need to know whether

37
00:02:49,980 --> 00:02:53,310
there's a draw here is open or not.

38
00:02:54,000 --> 00:02:54,240
OK.

39
00:02:54,270 --> 00:02:57,930
Based on that, the state will change, so this will be the draw state.

40
00:03:00,980 --> 00:03:07,580
Now, obviously, when creating the home app bar in our main activity, we don't pass any of these details.

41
00:03:07,850 --> 00:03:09,970
So our home app bar isn't very happy here.

42
00:03:09,980 --> 00:03:11,570
We're not passing any states.

43
00:03:11,990 --> 00:03:13,880
So we need to create those states.

44
00:03:14,240 --> 00:03:24,470
Let's go ahead and set up a vault scaffold state, which will be using the remember, as we have seen

45
00:03:24,470 --> 00:03:26,180
before, with Buy Remember, right?

46
00:03:26,600 --> 00:03:31,640
So here we need to call something or use something called Remember Scaffold State.

47
00:03:32,660 --> 00:03:35,180
And the same goes for the quality and scope.

48
00:03:35,180 --> 00:03:36,650
We need to set that up as well.

49
00:03:37,100 --> 00:03:44,330
So here, call routine scope will be our remember call routine scope.

50
00:03:44,900 --> 00:03:47,060
So we just really need to make sure that we are using this.

51
00:03:47,060 --> 00:03:49,730
Remember key word as we are working with states.

52
00:03:50,600 --> 00:03:51,030
OK.

53
00:03:51,770 --> 00:03:59,120
And at this point, we can now pass to remember scaffold state as well as the call routine.

54
00:03:59,630 --> 00:04:06,710
So while the scaffold stayed here, as well as this call in scope, like so and then for this scaffold.

55
00:04:07,810 --> 00:04:16,899
I'm going to add something called a draw content, so draw content, which will be the content of our

56
00:04:16,899 --> 00:04:19,029
draw and at the beginning.

57
00:04:19,450 --> 00:04:22,720
This will be empty, so we don't have any draw content.

58
00:04:22,960 --> 00:04:26,260
We're going to later on create the draw content.

59
00:04:26,720 --> 00:04:27,010
Okay.

60
00:04:27,010 --> 00:04:32,650
So all of those items that we have in here, you see a bunch of items that we want to display inside

61
00:04:32,650 --> 00:04:33,460
of this drawer.

62
00:04:33,730 --> 00:04:35,830
So we need to defined as grow our content.

63
00:04:36,070 --> 00:04:39,580
And that is something we can pass to our scaffold.

64
00:04:40,180 --> 00:04:43,010
So you can see the scaffold here has a drawer.

65
00:04:43,730 --> 00:04:45,220
Well, a bunch of drawer options.

66
00:04:45,220 --> 00:04:49,750
You see drawer gesture tables or shape drawer elevation and so forth.

67
00:04:50,470 --> 00:04:56,140
And we are now preparing to draw our content, which we are going to then later on over, right?

68
00:04:56,740 --> 00:04:57,160
OK.

69
00:04:57,250 --> 00:04:58,690
So what is going on here?

70
00:04:59,080 --> 00:05:06,230
So here we are creating a remember type for each of the values so that during recomposition to compose

71
00:05:06,230 --> 00:05:10,000
the balls, using them will still have access to them.

72
00:05:10,660 --> 00:05:15,940
Then we call the draw a contour with an empty lambda since we have not prepared the item yet.

73
00:05:16,360 --> 00:05:19,780
Now, if we run the application, you will see that nothing happens.

74
00:05:20,770 --> 00:05:22,150
And why is that?

75
00:05:22,360 --> 00:05:27,100
Well, we create the scaffold state, but the scaffold does not know about it yet.

76
00:05:27,490 --> 00:05:32,230
To make it aware of the state, we assign the scaffold state attribute.

77
00:05:32,710 --> 00:05:33,820
So the scaffold?

78
00:05:35,260 --> 00:05:37,100
It doesn't have the scaffold state yet.

79
00:05:37,610 --> 00:05:46,640
So here, scaffold state will be the scaffold state, which is this state from here.

80
00:05:47,910 --> 00:05:51,750
And of course, we need to add a comma here for it to be passed.

81
00:05:53,930 --> 00:05:56,300
So we passed the scaffold state within the scaffold.

82
00:05:56,870 --> 00:06:02,990
And now when we run the application once again, we see our draw.

83
00:06:04,310 --> 00:06:09,750
You see, there is nothing in there, obviously, because we didn't add any content, as you see here.

84
00:06:10,310 --> 00:06:12,260
But at least a draw already works.

85
00:06:14,030 --> 00:06:20,780
All right, so now let's take care of the draw menu and to draw menu items that we want to assign.

86
00:06:21,470 --> 00:06:27,710
Therefore, let's go ahead and also create a new component here because I think it makes sense to separate

87
00:06:27,950 --> 00:06:30,650
our different components that we have.

88
00:06:31,160 --> 00:06:34,970
So I'm going to call this one Gmail draw menu.

89
00:06:35,690 --> 00:06:39,650
Let's go ahead and create a new Kotlin file, which will be a file, not a class.

90
00:06:40,010 --> 00:06:44,360
And I'm going to call this one Gmail draw menu like so.

91
00:06:45,520 --> 00:06:49,360
Now, instead of this Gina draw menu, let's go ahead for now.

92
00:06:49,570 --> 00:07:00,880
Just create a function called Gmail Draw Menu, which currently is only going to have a text.

93
00:07:01,180 --> 00:07:05,650
So let's just add a text where we well, we need to import text here.

94
00:07:06,370 --> 00:07:16,420
Then the text will say something like Gmail, and we'll have a color of, let's say, red.

95
00:07:16,630 --> 00:07:19,690
So color will be colored dot red.

96
00:07:22,220 --> 00:07:26,600
Now, this text also needs to have a modifier.

97
00:07:28,100 --> 00:07:30,840
Here, which will be the modifier padding.

98
00:07:30,860 --> 00:07:36,380
Well, it doesn't need to have it, but I'm going to add it here, which will have a padding of 20 towards

99
00:07:36,380 --> 00:07:36,830
the left.

100
00:07:37,250 --> 00:07:46,370
So vertical tent city pixels as well as towards the top, also 20 density pixels.

101
00:07:47,950 --> 00:07:53,530
So what is going on, we need to import up here, we need to import colour here as well, though here

102
00:07:53,530 --> 00:07:56,590
at this point, we will need to import color and used to you.

103
00:07:56,590 --> 00:07:57,730
I compose one.

104
00:07:58,270 --> 00:08:02,140
And for the text, it's obvious needs to have the text property like so.

105
00:08:03,210 --> 00:08:05,670
I just realized I didn't give it the proper name.

106
00:08:05,700 --> 00:08:09,720
Jim, Abderrahmane, you should probably be better, not mind you, but me.

107
00:08:10,320 --> 00:08:15,870
And then this text has a text property, a color, a modifier.

108
00:08:16,170 --> 00:08:18,370
And let's also agree font size to it.

109
00:08:18,390 --> 00:08:20,220
Let's make it larger than the rest.

110
00:08:20,430 --> 00:08:22,020
Let's say 20 density pixels.

111
00:08:22,830 --> 00:08:24,120
And this has to.

112
00:08:26,110 --> 00:08:26,950
Be separated.

113
00:08:27,160 --> 00:08:27,580
Come up.

114
00:08:29,140 --> 00:08:33,640
And another entry, which will be the font weight, which I'm going to make bold.

115
00:08:33,820 --> 00:08:37,260
So font weight bolt this one here.

116
00:08:40,190 --> 00:08:45,620
And for this text to work, obviously our Gmail draw menu needs to be a composable.

117
00:08:46,160 --> 00:08:49,670
So let's add the add composable here at the top.

118
00:08:52,240 --> 00:08:58,060
And let's put this text into a column, so I'm going to surrounded by a column.

119
00:08:58,810 --> 00:09:06,970
And then whenever we are working with text, we should use ASPs instead of DPS for font sizes, which

120
00:09:06,970 --> 00:09:08,740
is why I had this little error here.

121
00:09:09,100 --> 00:09:12,520
So it's always good that my idea lets me know about this.

122
00:09:13,150 --> 00:09:13,580
All right.

123
00:09:13,600 --> 00:09:21,070
So now let's use this Gmail draw menu as the draw content for our home app bar.

124
00:09:21,580 --> 00:09:27,490
So we had to draw content, I think, up here in our main activity, that's where it was.

125
00:09:27,850 --> 00:09:31,840
So let's use our Gmail draw menu in here.

126
00:09:32,530 --> 00:09:33,700
Let's import it.

127
00:09:35,380 --> 00:09:43,210
Which is, does G.M. draw menu inside of our components namespace, so we have our own namespace now

128
00:09:43,210 --> 00:09:44,620
where we have our drawn menu?

129
00:09:45,100 --> 00:09:46,800
So let's go ahead and try this.

130
00:09:48,990 --> 00:09:55,140
And we see that G.M. pops up, so now we have the first bit of content, it's inbred.

131
00:09:55,260 --> 00:09:56,310
It's a little bigger.

132
00:09:56,820 --> 00:10:03,690
It has a tsp size, has a little bit of distance towards top and towards the left hand side, as you

133
00:10:03,690 --> 00:10:04,320
see here.

134
00:10:05,510 --> 00:10:05,960
Pretty much.

135
00:10:07,920 --> 00:10:08,370
OK.

136
00:10:08,400 --> 00:10:16,500
And now, if you recall, we had so much data in there in our other example, right, so, so many different

137
00:10:16,500 --> 00:10:18,390
information pieces of information.

138
00:10:18,840 --> 00:10:25,020
So we need to have a class that will allow us to store all of this data.

139
00:10:25,500 --> 00:10:28,170
And I'm just going to use a sealed class for this.

140
00:10:28,770 --> 00:10:29,130
All right.

141
00:10:29,430 --> 00:10:32,010
So let's go ahead and create a new.

142
00:10:33,280 --> 00:10:36,940
File inside of our Gmail clone package.

143
00:10:37,570 --> 00:10:39,940
So this one will be, in fact, a class.

144
00:10:40,510 --> 00:10:47,830
So let me use the clause here, and this will be the draw menu data.

145
00:10:48,880 --> 00:10:51,670
Now this drawing menu data, I'm going to seal it.

146
00:10:52,270 --> 00:10:53,890
I'm going to make it a sealed class.

147
00:10:55,630 --> 00:11:02,560
And a school class represents a restricted class hierarchy that provide more control over inheritance,

148
00:11:02,560 --> 00:11:07,660
so all direct subclasses of a seal class are known at compile time.

149
00:11:07,690 --> 00:11:13,330
So no other subclasses may appear after a module with the settled class as compiled.

150
00:11:13,780 --> 00:11:17,140
So that's really the idea behind me sealing this class.

151
00:11:17,800 --> 00:11:22,810
So each item, as you see here, has an icon as well as a text here.

152
00:11:23,650 --> 00:11:31,570
And then I have a little divider and I need to know whether it's a header or not.

153
00:11:32,110 --> 00:11:33,880
So is it a divider?

154
00:11:34,480 --> 00:11:36,010
Which is this divider here?

155
00:11:36,520 --> 00:11:42,400
Is it a header, which is this header all labels or header all Google apps, for example?

156
00:11:42,820 --> 00:11:44,530
So I need to have these details.

157
00:11:44,740 --> 00:11:47,890
If that's the case, we know, OK, we need to treat them differently.

158
00:11:48,160 --> 00:11:49,540
Otherwise, they are all twisted.

159
00:11:49,540 --> 00:11:51,130
Like this icon with a name?

160
00:11:51,790 --> 00:11:56,170
OK, so let's define this in our draw menu data.

161
00:11:56,650 --> 00:12:03,910
Therefore, I'm going to create those properties I can, which will be an image vector.

162
00:12:05,850 --> 00:12:06,360
No.

163
00:12:07,200 --> 00:12:14,880
So we need to import a major vector here, then the title, which will just be a string multiple.

164
00:12:16,800 --> 00:12:18,570
I a divider.

165
00:12:18,780 --> 00:12:19,770
So is divider.

166
00:12:21,260 --> 00:12:22,580
Which will just be a Boolean.

167
00:12:24,020 --> 00:12:30,590
And by default, it will be set default as well as is it a header, which will also be a Boolean, which

168
00:12:30,590 --> 00:12:32,600
is going to be false by default as well?

169
00:12:37,370 --> 00:12:40,730
So each icon will have an image factor, which will be just an icon.

170
00:12:41,360 --> 00:12:47,960
It will have a title and it will know whether it's divided or is a header so this can be null.

171
00:12:47,990 --> 00:12:52,670
The image of actor in the title can be not because if it's a divider that we don't need to have an image

172
00:12:52,670 --> 00:12:54,620
vector and we don't need to have a title.

173
00:12:55,700 --> 00:13:01,070
And if it is not a divider and that is a header, then we need to have the title.

174
00:13:01,070 --> 00:13:03,710
But no icon, as you see here.

175
00:13:03,890 --> 00:13:05,390
OK, so this is a.

176
00:13:06,570 --> 00:13:09,450
Header, which has no icon assigned to it.

177
00:13:10,200 --> 00:13:14,730
So now we can just go ahead and create a bunch of objects off draw menu data.

178
00:13:15,720 --> 00:13:18,540
So I'm just going to paste them in here and go over them.

179
00:13:18,810 --> 00:13:23,520
You can just create your very own wants and call them however you want.

180
00:13:24,450 --> 00:13:31,140
I'm just going to simplify this because I don't want for you to be looking at me building all of this

181
00:13:31,140 --> 00:13:31,440
stuff.

182
00:13:31,560 --> 00:13:32,640
So let's import.

183
00:13:33,840 --> 00:13:35,720
I consider OK.

184
00:13:35,750 --> 00:13:41,520
And now for us to be able to use all of those other icons that we don't have yet, we need to add a

185
00:13:41,520 --> 00:13:42,450
dependency.

186
00:13:42,780 --> 00:13:50,340
So let's go ahead to our build.gradle once again and make sure that we add another dependency here at

187
00:13:50,340 --> 00:13:51,000
the bottom.

188
00:13:51,570 --> 00:13:53,180
I'm going to just add it up here.

189
00:13:53,190 --> 00:14:00,780
So this is the compose material material icons extended with the compose version, which is this variable

190
00:14:00,780 --> 00:14:04,380
here that exists for this bill.

191
00:14:04,380 --> 00:14:10,140
But Gradle file, so we'll sync it again for this to be available after it's linked.

192
00:14:11,230 --> 00:14:18,760
Let's go to our draw menu data, and you will see that the icons are all available now, so no more

193
00:14:18,760 --> 00:14:19,220
errors.

194
00:14:19,240 --> 00:14:20,320
Icons are with us.

195
00:14:22,300 --> 00:14:25,510
So we created a bunch of objects, right?

196
00:14:25,720 --> 00:14:29,380
But these objects are not used, as you can see, because they are gray.

197
00:14:29,890 --> 00:14:34,900
So in order to now use them, we need to create a menu list.

198
00:14:37,170 --> 00:14:44,010
Which means we need to go our over to our G-mail, draw our menu and create a list with all of those

199
00:14:44,010 --> 00:14:45,480
objects that we just created.

200
00:14:48,140 --> 00:14:48,440
So.

201
00:14:50,560 --> 00:14:57,610
Up here at the top of the class, we can just start right here, say all menu list, which will be a

202
00:14:57,610 --> 00:14:58,210
list of.

203
00:14:59,080 --> 00:15:02,260
And then we add all of the items.

204
00:15:02,260 --> 00:15:07,960
So draw menu data dot divider.

205
00:15:08,980 --> 00:15:16,450
Well, actually, I think we don't have the divider yet, all in boxes, for example, then the primary

206
00:15:16,450 --> 00:15:17,290
and so forth.

207
00:15:17,710 --> 00:15:22,480
So here you can set it up so that you get this result that you have here.

208
00:15:22,480 --> 00:15:24,820
So we have a divider, all in boxes divider.

209
00:15:25,030 --> 00:15:27,210
So let's set up the dividers as well, by the way.

210
00:15:27,220 --> 00:15:31,540
So I see that we now can use to all in boxes, we can use the primary and so forth.

211
00:15:31,900 --> 00:15:36,700
So here we have the contact setting help, but we didn't have a divider at this point.

212
00:15:36,970 --> 00:15:39,100
So let's add dividers here as well.

213
00:15:39,670 --> 00:15:48,700
Therefore, I will create another object called divider, which will also be of type drawer menu data.

214
00:15:48,940 --> 00:15:52,690
But this time we're just setting that is divider boolean to true.

215
00:15:54,310 --> 00:16:03,640
OK, and then we need to have the header one at her one which will also be of type draw menu data,

216
00:16:04,390 --> 00:16:15,220
which will be having the is header set to true and then the title said to all labels.

217
00:16:16,360 --> 00:16:18,670
So this will be this part here.

218
00:16:18,670 --> 00:16:24,700
You see all labels right here and now we need to create another one, which will be called Google apps,

219
00:16:24,910 --> 00:16:26,350
as we see down here.

220
00:16:26,470 --> 00:16:27,700
This is another header.

221
00:16:28,270 --> 00:16:36,010
So I'm just going to copy this called this one header too, and this one will be called Google apps.

222
00:16:37,150 --> 00:16:41,530
OK, now we can go ahead and create the list in our draw menu.

223
00:16:42,850 --> 00:16:48,970
G.M. draw menu as we want it, so you can, of course, use the same structure as I have, but you can

224
00:16:48,970 --> 00:16:52,660
also just go ahead and build them in the order that you prefer.

225
00:16:53,110 --> 00:16:57,040
So I'm just going to paste it in here and show you real quick.

226
00:16:57,670 --> 00:17:04,119
So this is how it's gonna look divider, all inboxes divider, primary social promotion, header one

227
00:17:04,119 --> 00:17:11,200
starred, snoozed, important and so forth, so you can pause the video and follow along if you want

228
00:17:11,200 --> 00:17:17,630
to have the same exact order of items inside of your list.

229
00:17:17,650 --> 00:17:24,550
So the order in which you add them to this list of they will also appear in your drawer.

230
00:17:27,030 --> 00:17:32,940
OK, so I think this video is long enough, so let's have a break here and finish our application in

231
00:17:32,940 --> 00:17:33,420
the next.