1
00:00:00,880 --> 00:00:02,060
All right, welcome back.

2
00:00:02,080 --> 00:00:09,760
And the last year, we finished by creating this big menu list of the raw menu data, which is in the

3
00:00:09,760 --> 00:00:16,570
end, just the vector for the image as well as the title or whether it's the divider and the header.

4
00:00:17,440 --> 00:00:21,070
And now let's go ahead and style every single item that we want.

5
00:00:21,070 --> 00:00:24,850
So we have the list of items and we know the data already.

6
00:00:24,850 --> 00:00:25,910
So this is the data.

7
00:00:25,930 --> 00:00:30,160
Right now, we just need to bring it into the format that we want.

8
00:00:30,170 --> 00:00:31,120
And what is the format?

9
00:00:31,150 --> 00:00:33,310
Well, it's an icon with the text.

10
00:00:33,730 --> 00:00:36,070
So that's pretty much what we want to achieve, right?

11
00:00:36,490 --> 00:00:40,200
And I'm going to put that into a roll.

12
00:00:40,810 --> 00:00:45,490
So let's go ahead and create a new function inside of our Gmail drawer menu, which will be another

13
00:00:45,490 --> 00:00:46,360
composable.

14
00:00:46,900 --> 00:00:49,900
So I'm going to create it here at composable.

15
00:00:50,710 --> 00:00:57,670
Which will be the function male draw item, and it will require an item which will be of type drawer

16
00:00:58,150 --> 00:00:59,800
where menu data.

17
00:01:00,310 --> 00:01:03,280
So this will be the individual item, so we need to get the data.

18
00:01:03,550 --> 00:01:07,790
And now we're going to use that data to display it, and I'm going to use a row here.

19
00:01:08,230 --> 00:01:17,230
I need to import role from compose you, I, and this role has the modifier of filling the entire.

20
00:01:19,340 --> 00:01:27,560
With so I'm going to use Phil Max with I'm going to define the height as being 50 density pixels.

21
00:01:29,340 --> 00:01:34,020
And the padding to be 16 density pixels towards the top.

22
00:01:35,370 --> 00:01:41,340
So this is just something that I'm defining, you can use different values if you want to make sure

23
00:01:41,340 --> 00:01:43,080
that your application is going to look differently.

24
00:01:43,500 --> 00:01:46,680
So this is just the definition of the role.

25
00:01:46,680 --> 00:01:48,240
Now we need to add the body.

26
00:01:48,540 --> 00:01:50,550
So what do we want to have in the body?

27
00:01:50,970 --> 00:01:53,160
Well, first of all, we want to have an image, right?

28
00:01:53,640 --> 00:01:58,020
And this image is going to what we need to import image here for this to work.

29
00:01:58,170 --> 00:01:59,070
Let's make sure that this.

30
00:02:00,200 --> 00:02:07,070
Is going to be the Android X composed UI, and here I'm going to define an image vector, which will

31
00:02:07,220 --> 00:02:09,500
come from Item Dot icon.

32
00:02:11,090 --> 00:02:12,590
So what does item that icon?

33
00:02:12,890 --> 00:02:18,830
Well, it's this image vector type, which is a Nullarbor, which is why we need to add the double exclamation

34
00:02:18,830 --> 00:02:19,370
mark here.

35
00:02:19,730 --> 00:02:24,260
So we are force on wrapping it, so to speak, because otherwise it could be well.

36
00:02:24,620 --> 00:02:25,880
Otherwise, it would be empty, right?

37
00:02:26,540 --> 00:02:31,640
So we can only do that because we're certain that we are the ones controlling the data.

38
00:02:31,670 --> 00:02:36,500
Otherwise, this could make our application crash so always be careful with double exclamation marks.

39
00:02:37,490 --> 00:02:44,420
And then we need to define a content description, which will be the title of our item.

40
00:02:44,730 --> 00:02:46,100
And this is also inaudible.

41
00:02:46,100 --> 00:02:47,330
So let's for unwrap it.

42
00:02:47,870 --> 00:02:53,720
And then I'm going to add a modifier here to say how big my image should be.

43
00:02:53,990 --> 00:02:57,110
And I'm going to say it should take half of the weight.

44
00:02:57,410 --> 00:03:00,860
So modifier weight zero point five F.

45
00:03:02,430 --> 00:03:08,190
So this is going to be our image, and now we want to have a text in here as well, which will just

46
00:03:08,580 --> 00:03:14,150
use the title as the text, and then I'm going to set the weight to be two.

47
00:03:14,250 --> 00:03:22,410
So I wanted to take the entirety of the available space, so to speak, so modifier thought wait of

48
00:03:22,410 --> 00:03:23,340
2.0.

49
00:03:24,270 --> 00:03:28,560
So what that will do is it will take 80 percent of the available space.

50
00:03:28,570 --> 00:03:30,570
This will take 20 percent of the available space.

51
00:03:30,960 --> 00:03:34,200
So you could have also used different weights here to achieve that same ratio.

52
00:03:34,200 --> 00:03:38,940
But basically we take this ratio plus this ratio and then we have two point five.

53
00:03:38,940 --> 00:03:46,650
So zero point five out of 2.5 is 20 percent and two point zero out of 2.5 is going to be 80 percent.

54
00:03:47,550 --> 00:03:50,520
So this is how our individual item should look like.

55
00:03:52,640 --> 00:03:55,790
OK, so where do we now use this mail draw item?

56
00:03:56,120 --> 00:04:01,970
Well, I would say underneath this while inside of this column because we are using this column with

57
00:04:01,970 --> 00:04:07,610
the text because what we want to have is just items put on top of each other.

58
00:04:07,850 --> 00:04:09,380
That's why we're using this column, right?

59
00:04:09,380 --> 00:04:15,080
Because in one column, everything is on top of each other and we have the text and underneath I would

60
00:04:15,080 --> 00:04:16,760
like to display my menu list.

61
00:04:17,209 --> 00:04:23,600
So for each of those items inside of my menu list, I want to do something with the items.

62
00:04:24,320 --> 00:04:32,780
So for now, or we can just do this, we can use that item that we get what we have inside of our menu

63
00:04:32,780 --> 00:04:38,060
list, which is at the beginning, the first one will be the divider and the all in boxes, then the

64
00:04:38,060 --> 00:04:39,320
divider and so forth.

65
00:04:39,890 --> 00:04:47,000
So we take this item and we pass it to our mail drawer item for every single item inside of that list.

66
00:04:47,510 --> 00:04:52,460
So I used item quite a bit now, and unfortunately, I have to use the word item once again.

67
00:04:52,670 --> 00:04:56,210
So we're passing this item that we get from the menu list as the.

68
00:04:57,360 --> 00:05:01,800
Variable here that we need to pass to our male draw item function.

69
00:05:02,550 --> 00:05:07,020
OK, so if you now want to run this, we will run into an error.

70
00:05:07,110 --> 00:05:15,510
And this is exactly why I told you, it's really important that we have full control over what's up

71
00:05:15,510 --> 00:05:18,210
with our force on wrapping.

72
00:05:18,510 --> 00:05:23,160
So if you look at the arrow that we get, it starts at K860.

73
00:05:23,160 --> 00:05:29,910
So let's jump to this line and you see we are using this image vector item icon, exclamation mark,

74
00:05:29,910 --> 00:05:30,900
exclamation mark.

75
00:05:31,050 --> 00:05:33,650
Bam, we cause an error.

76
00:05:33,660 --> 00:05:35,010
When do we cause an error?

77
00:05:35,400 --> 00:05:42,540
Well, if we look at our draw menu data we have at the very bottom, we have our divider objects, right?

78
00:05:43,080 --> 00:05:50,100
So the divider to header one at the head or two, those don't have the icon that we want to have.

79
00:05:50,610 --> 00:05:56,310
So what we can do for now in order to test this is to get rid of dividers.

80
00:05:57,750 --> 00:06:06,690
And of headers, so divider, then header one, and I think we had those two dividers, so let's run

81
00:06:06,690 --> 00:06:11,310
it again and see if our application still crashes and you see this time it doesn't crash.

82
00:06:11,520 --> 00:06:16,800
So let's click on it and we see that, well, we cannot scroll and we don't have the dividers anymore

83
00:06:16,800 --> 00:06:18,360
and we don't have the titles anymore.

84
00:06:18,570 --> 00:06:21,420
But at least we can see the data, which is great.

85
00:06:21,720 --> 00:06:23,310
OK, so we fixed that.

86
00:06:23,520 --> 00:06:30,270
But now let's also make sure that our application is going to run with headers and with dividers.

87
00:06:30,780 --> 00:06:37,860
Therefore, we need to define how every single item needs to be treated, so needs to be treated differently,

88
00:06:37,860 --> 00:06:39,990
depending on what type of data it is.

89
00:06:40,920 --> 00:06:44,280
So if it is a header, then it needs to be treated differently.

90
00:06:44,640 --> 00:06:49,710
So what we have here is what should happen in the health case, so to speak.

91
00:06:49,950 --> 00:06:51,090
So let's have a look at this.

92
00:06:51,450 --> 00:06:57,990
So we get our item and we check when the item is a divider.

93
00:06:58,710 --> 00:07:08,520
Then let's make sure that this is going to be of type divider where we can now pass a modifier as well.

94
00:07:09,670 --> 00:07:13,160
And the modifier will have a little bit of padding.

95
00:07:13,450 --> 00:07:21,930
So I'm going to say that I want to have a bottom padding of 16 deep, for example, as well as a top

96
00:07:21,970 --> 00:07:22,390
heading.

97
00:07:23,820 --> 00:07:28,950
Or actually, we had 20 padding each time, right, so let's use this here as well.

98
00:07:29,070 --> 00:07:31,360
And the top heading of 20 deep.

99
00:07:32,980 --> 00:07:33,140
OK.

100
00:07:33,420 --> 00:07:34,860
This is when we have a divider.

101
00:07:35,700 --> 00:07:46,530
If the item is a header, so is Harry's is true, then we want to display a text which will just take

102
00:07:46,530 --> 00:07:47,790
the title.

103
00:07:49,530 --> 00:07:56,520
And then I'm going to use a couple of settings, so I'm going to make sure that the font weight is going

104
00:07:56,520 --> 00:07:59,430
to be light as well as.

105
00:08:01,230 --> 00:08:05,280
The padding exists, so I'm going to add a little bit of padding.

106
00:08:06,030 --> 00:08:08,700
So this one will be toe dip.

107
00:08:11,430 --> 00:08:11,940
And.

108
00:08:13,190 --> 00:08:14,630
This year as well, 20 deep.

109
00:08:17,040 --> 00:08:19,680
OK, so this will be my text and.

110
00:08:23,350 --> 00:08:26,140
I believe I have one closing bracket too many.

111
00:08:26,770 --> 00:08:28,240
And then in the else case.

112
00:08:29,680 --> 00:08:32,799
So if it is neither a divider nor a header.

113
00:08:33,190 --> 00:08:37,360
So in this case, that's when we want to.

114
00:08:39,630 --> 00:08:42,690
Use this mail draw item.

115
00:08:43,559 --> 00:08:44,010
Method.

116
00:08:44,640 --> 00:08:48,150
This one here where we had a row with an image and they text.

117
00:08:49,490 --> 00:08:57,200
So let's run it again and see if we can now see the dividers, so we see divider divider and we see

118
00:08:57,200 --> 00:08:59,090
the all labels.

119
00:08:59,330 --> 00:09:02,510
So this is a light font, so font weight light.

120
00:09:02,540 --> 00:09:04,250
This is this all labels that you see here.

121
00:09:05,250 --> 00:09:12,650
This is the modifier of having more padding towards the left hand side, the top and the bottom of 20

122
00:09:12,690 --> 00:09:13,230
deep.

123
00:09:14,640 --> 00:09:16,740
And yeah, that's pretty much what we have.

124
00:09:17,130 --> 00:09:18,540
And that's what we wanted as well.

125
00:09:19,170 --> 00:09:22,470
So the divider, which is also a composable.

126
00:09:23,040 --> 00:09:23,460
OK.

127
00:09:25,350 --> 00:09:31,800
Now I want to be able to scroll and what is this that I want to be able to scroll?

128
00:09:32,310 --> 00:09:35,520
Well, let's look at our Gmail drawer menu.

129
00:09:36,360 --> 00:09:42,430
It could well very well be our column, right, because we want to be able to scroll inside of the column.

130
00:09:42,720 --> 00:09:47,670
So let's check out if our modifier has something with scroll.

131
00:09:48,630 --> 00:09:54,540
And you see, there is scrollable, there is vertical scroll, horizontal scroll.

132
00:09:54,720 --> 00:09:56,910
So let's use vertical scroll here.

133
00:09:58,170 --> 00:10:02,970
But then vertical scroll, if you look at it, needs to get a state.

134
00:10:03,090 --> 00:10:05,610
So here state scroll state.

135
00:10:06,240 --> 00:10:10,080
So we need to create something that is going to be a scroll state.

136
00:10:10,980 --> 00:10:15,000
So our Gmail draw menu will need to get this information.

137
00:10:15,510 --> 00:10:22,170
So let's add the scroll state in here once we call the Gmail draw menu.

138
00:10:22,380 --> 00:10:27,120
So once we create a object of the G.M. draw menu, we need to get the state.

139
00:10:27,600 --> 00:10:31,830
But the UI itself doesn't control the states or menu will not control the state.

140
00:10:32,400 --> 00:10:35,790
So where would be a good spot to control the state?

141
00:10:37,740 --> 00:10:44,310
Well, it's going to be our main activity because the main activity, that's where we have control over

142
00:10:44,310 --> 00:10:44,610
this.

143
00:10:45,390 --> 00:10:53,160
So we had our main activity and in our main activity, we have our Gmail app and our Gmail app is taking

144
00:10:53,160 --> 00:10:54,750
care of all of the states.

145
00:10:54,900 --> 00:10:59,640
So we have the scaffold state the whole routine scope and now let's go ahead and create the scroll state

146
00:10:59,640 --> 00:11:00,330
here as well.

147
00:11:00,690 --> 00:11:05,640
Scroll state, which will be a remember scroll state.

148
00:11:07,000 --> 00:11:09,130
And we need to import that as well.

149
00:11:10,950 --> 00:11:19,230
OK, so now whenever we are creating this Gmail draw menu or we're using this Gmail draw menu, which

150
00:11:19,230 --> 00:11:22,050
is a composable, we need to pass something to it.

151
00:11:22,080 --> 00:11:23,210
What is it that we need to pass?

152
00:11:23,220 --> 00:11:24,810
We need to pass to scroll state.

153
00:11:25,200 --> 00:11:28,000
And luckily, we just have created exactly that.

154
00:11:28,020 --> 00:11:34,050
So let's pass that scroll state in here to our Gmail draw menu up here, which will now use this scroll

155
00:11:34,050 --> 00:11:36,750
state for our modifier vertical.

156
00:11:36,750 --> 00:11:37,980
Scroll for the column.

157
00:11:38,730 --> 00:11:46,110
And now let's test it again to see if we can now scroll in our application so we see we can, in fact,

158
00:11:46,110 --> 00:11:46,950
scroll now.

159
00:11:50,590 --> 00:11:51,070
OK.

160
00:11:51,310 --> 00:11:58,660
And I believe that concludes our application, so we pretty much have what we wanted.

161
00:11:59,110 --> 00:12:03,970
We have all inboxes here at the top with a bit of padding, the divider.

162
00:12:04,390 --> 00:12:07,330
All of our items that we wanted to have.

163
00:12:07,420 --> 00:12:16,150
And yeah, that's pretty much how we can create a drawer menu in Scotland with jetpack compose.

164
00:12:18,400 --> 00:12:25,030
OK, so I hope you enjoyed this video in the next one, we are going to take care of the bottom navigation

165
00:12:25,030 --> 00:12:25,330
bar.

166
00:12:25,510 --> 00:12:26,620
So see you there.