1
00:00:01,200 --> 00:00:07,590
Welcome back in this video, we are going to focus on this little beautiful part here at the top, which

2
00:00:07,590 --> 00:00:09,570
is the app bar menu.

3
00:00:09,760 --> 00:00:11,640
OK, so let's go ahead and implement that.

4
00:00:11,640 --> 00:00:17,200
You can see that we have a card and then inside of it, we have a row with a couple of settings.

5
00:00:17,220 --> 00:00:22,770
So let's get started adding all of that and therefore let's go ahead and create a new empty compose

6
00:00:22,770 --> 00:00:23,460
activity.

7
00:00:23,670 --> 00:00:30,390
I'm going to call this project Gmail clone like, so now let's go ahead and set that project up.

8
00:00:31,350 --> 00:00:36,480
So what I will need is going to be a bunch of components, as you might recall.

9
00:00:36,900 --> 00:00:44,280
There are many different parts of such an application of such a complex application, such as Gmail

10
00:00:44,580 --> 00:00:50,130
and as there are many different components which internally have a bunch of different composable.

11
00:00:50,400 --> 00:00:56,760
I would recommend that we create an extra folder, therefore, where we can then store our components.

12
00:00:57,090 --> 00:01:01,140
So I'm going to create a new package called components here.

13
00:01:01,170 --> 00:01:08,820
Components like self and inside of it, I'm going to create my home app bar.

14
00:01:08,970 --> 00:01:14,130
So here create a new Scotland file class and it will not be a class, but just a file.

15
00:01:14,670 --> 00:01:19,350
And I'm going to call this one home app bar like so OK.

16
00:01:19,350 --> 00:01:25,410
Before we go into the home app bar, however, let's go over to our main activity and make sure that

17
00:01:25,410 --> 00:01:27,060
we are not using greeting.

18
00:01:27,060 --> 00:01:31,860
But let me call this one Gmail app.

19
00:01:32,670 --> 00:01:35,310
OK, so this will be the composable name.

20
00:01:35,310 --> 00:01:40,620
I'm not going to pass any variable to it, so let me get rid of this statement here as well.

21
00:01:40,620 --> 00:01:49,050
And it should not display a text, but instead what I want the Gmail app to do.

22
00:01:49,500 --> 00:01:51,690
I wanted to have a scaffold.

23
00:01:52,260 --> 00:01:52,650
All right.

24
00:01:53,070 --> 00:01:59,820
So a scaffold is the layout provides a lot of material design elements like the App Bar.

25
00:02:00,090 --> 00:02:06,810
When you hover over on the parentheses, here we can see what kind of options to scaffold text or when

26
00:02:06,810 --> 00:02:11,130
you hover over the method, you can see there are a bunch of different options.

27
00:02:11,130 --> 00:02:17,280
Some things are defined by them by default, but others we can set ourselves, or we can set all of

28
00:02:17,280 --> 00:02:18,750
them, but some we have to set.

29
00:02:19,140 --> 00:02:23,250
And what I'm going to set here is the top bar.

30
00:02:23,550 --> 00:02:31,020
So I want to create a top bar that I can use as the value and pass it to the scaffold.

31
00:02:31,560 --> 00:02:36,900
And by the way, for scaffold, you will need to make sure that you have the scaffold import.

32
00:02:36,960 --> 00:02:39,270
So Android compose material scaffold.

33
00:02:39,810 --> 00:02:46,380
So now let's go over to our home app bar, where we can now create our home app bar.

34
00:02:47,040 --> 00:02:50,580
So this will be a composable, composable like.

35
00:02:50,580 --> 00:02:54,960
So and I'm going to call this one home app bar.

36
00:02:56,040 --> 00:03:03,150
As we have done before, so this home at Bar will have a box which internally has a cart.

37
00:03:04,320 --> 00:03:12,330
OK, so we have worked with boxes before in our dog example, right in this Instagram dog example where

38
00:03:12,360 --> 00:03:16,710
the box was with the linear layout or constrained layout.

39
00:03:16,710 --> 00:03:17,640
I think it was, yes.

40
00:03:17,940 --> 00:03:21,090
So this is similar, but without the constraint layout.

41
00:03:21,150 --> 00:03:22,440
So let's import box.

42
00:03:24,000 --> 00:03:27,390
You see this one here foundationally our box and then let's import card.

43
00:03:27,390 --> 00:03:29,160
And we have worked with cards before, right?

44
00:03:29,520 --> 00:03:31,830
So they create this elevation effect.

45
00:03:32,370 --> 00:03:36,030
So let's go ahead and create this round the shape that we have here.

46
00:03:36,030 --> 00:03:36,660
So look at it.

47
00:03:36,660 --> 00:03:42,420
You can see this card is rounded as well as it has an elevation which creates this shadow around it.

48
00:03:42,930 --> 00:03:44,970
So let's set those two parameters up.

49
00:03:44,970 --> 00:03:52,200
First of all, the shape should be rounded corner shape to which you can then.

50
00:03:54,570 --> 00:04:01,650
Define the size that you want to have those, so I'm going to say 10 density pixels should be the.

51
00:04:03,350 --> 00:04:06,170
Radius for this corner.

52
00:04:06,330 --> 00:04:11,030
OK, so for this round the corner, and then I'm going to have an elevation as well of, let's say,

53
00:04:11,030 --> 00:04:15,140
six density pixels, I think this should be quite good as they start.

54
00:04:15,920 --> 00:04:19,839
And then let's also make sure that we have a preview here.

55
00:04:20,240 --> 00:04:22,490
So at preview?

56
00:04:23,770 --> 00:04:31,840
But annotation, then another at composable annotation, and then we can go ahead, and I'm going to

57
00:04:31,840 --> 00:04:41,830
call this default preview, which will use the Gmail clone theme with our Gmail app.

58
00:04:42,310 --> 00:04:46,400
So Gmail clone is our application's name, right?

59
00:04:46,420 --> 00:04:47,560
I call the Gmail clone.

60
00:04:47,890 --> 00:04:53,950
So however you called your application, you need to use the name of the application plus theme here

61
00:04:54,550 --> 00:05:03,070
and then inside of the curly brackets you can call your Gmail app, which is going to be this Gmail

62
00:05:03,070 --> 00:05:03,550
app here.

63
00:05:09,450 --> 00:05:09,740
OK.

64
00:05:09,780 --> 00:05:12,720
Therefore, we need to make an import, I believe.

65
00:05:12,750 --> 00:05:13,830
Let me see here.

66
00:05:14,460 --> 00:05:17,760
While that's the main activity we didn't need to import, it worked fine.

67
00:05:18,270 --> 00:05:23,930
OK, and now we have our home at barm with the little box and the card.

68
00:05:23,940 --> 00:05:26,400
So let's add a modifier to this box.

69
00:05:27,770 --> 00:05:33,410
So let's assign a modifier where it's going to have a little bit of padding.

70
00:05:33,560 --> 00:05:35,450
So modifier padding.

71
00:05:37,150 --> 00:05:41,890
Which I'm going to set to 10 density pixels, so I want to have a little bit of padding and we need

72
00:05:41,890 --> 00:05:47,380
to import modifier from composed II as well as padding while we're at it.

73
00:05:48,340 --> 00:05:52,930
OK, now let's add a modifier to our card here as well.

74
00:05:53,290 --> 00:06:00,670
So here modifier modifier, which will define how hide this item should be.

75
00:06:00,940 --> 00:06:06,520
So I'm going to say it should be 50 density pixels, so required height, 50 density pixels.

76
00:06:07,540 --> 00:06:10,680
And then we need to come on here to separate it from the shape setting.

77
00:06:10,690 --> 00:06:13,840
So we're passing multiple arguments to this card here.

78
00:06:14,650 --> 00:06:20,230
OK, and now inside of this card, let's create a row and we've just rows before, right?

79
00:06:20,350 --> 00:06:31,090
So let's import the row, and this row will have a vertical alignment so that it aligns to items centered

80
00:06:31,090 --> 00:06:31,600
vertically.

81
00:06:32,620 --> 00:06:39,730
And then I will also have a modifier for it, which will make sure that it is going to fill the entire

82
00:06:40,210 --> 00:06:40,720
size.

83
00:06:40,870 --> 00:06:49,750
So modifier fill max size and I'm going to add a little bit of padding to it as well of eight density

84
00:06:49,750 --> 00:06:50,200
pixels.

85
00:06:51,940 --> 00:06:52,480
Like so.

86
00:06:55,180 --> 00:07:00,850
And this role must have content, even though the content can be empty, so we need to have the curly

87
00:07:00,850 --> 00:07:01,480
brackets here.

88
00:07:02,770 --> 00:07:07,780
So now we should be able to use this home at Bar in our main activity for the scaffold.

89
00:07:08,080 --> 00:07:10,780
So the top bar will now be our home app bar.

90
00:07:11,170 --> 00:07:19,060
So this only works if we import our home app bar from our own components and at the same time is surrounded

91
00:07:19,060 --> 00:07:23,770
by curly brackets like soap because we need to pass the home app bar.

92
00:07:23,770 --> 00:07:28,630
But we're not creating an object of it so we can use it using this lambda here.

93
00:07:30,310 --> 00:07:33,610
So at this point, if we run our application, we can't see our cart.

94
00:07:33,910 --> 00:07:34,240
All right.

95
00:07:34,240 --> 00:07:38,830
So it's just this empty cart, which has a height of 50 density pixels, but no content.

96
00:07:39,540 --> 00:07:41,020
OK, that's something we need to change.

97
00:07:42,230 --> 00:07:43,520
So let's give it some content.

98
00:07:45,600 --> 00:07:48,120
And the content that I'm going to add is going to be an icon.

99
00:07:48,450 --> 00:07:48,930
All right.

100
00:07:48,930 --> 00:07:56,730
So icon and it's going to use icons dot default dot menu.

101
00:07:58,110 --> 00:07:59,700
And this one will be called menu.

102
00:08:00,920 --> 00:08:02,300
So let's import icons.

103
00:08:02,900 --> 00:08:05,360
That's important menu, that's important icon.

104
00:08:06,290 --> 00:08:13,550
And here's the one here the one wonder this on the compose UI graphics and what this will do is it will

105
00:08:13,550 --> 00:08:20,360
use this menu icon, which is there by default in Android Studio, which we can use and as the content

106
00:08:20,360 --> 00:08:22,310
description, it will have the text of the menu.

107
00:08:23,450 --> 00:08:29,720
So let's rerun our application real quick, because now we can see this is the menu icon.

108
00:08:29,900 --> 00:08:35,210
So the hamburger menu icon, OK, so that's one part of the row.

109
00:08:35,240 --> 00:08:36,980
The other one will be a little text.

110
00:08:37,280 --> 00:08:42,530
So I'm going to import text here and Android X compose one.

111
00:08:42,980 --> 00:08:51,350
And here, as the text property, I'm just going to say search in email or in emails, something like

112
00:08:51,350 --> 00:08:51,590
this.

113
00:08:52,880 --> 00:08:55,310
And while we're added, let's also add an image.

114
00:08:55,640 --> 00:09:04,670
So here, let's import image the Compose UI version, and let's set the image to be the paint resource

115
00:09:05,840 --> 00:09:06,640
with an I.D..

116
00:09:06,920 --> 00:09:10,220
So now we need to pass in the idea that we want to use.

117
00:09:12,340 --> 00:09:18,100
And the image that I'm going to use is going to be this one, Turrell's thought you this file, and

118
00:09:18,100 --> 00:09:24,640
I'm going to add this on the resource manager and then an image asset or import troubles.

119
00:09:24,640 --> 00:09:25,630
I think this should be good.

120
00:09:26,080 --> 00:09:31,720
And then here I'm going to go to the Strobl folder and import my tutorials image.

121
00:09:31,730 --> 00:09:33,190
You can use any image you want.

122
00:09:33,230 --> 00:09:35,650
OK, so I'm just going to add that to my project.

123
00:09:35,650 --> 00:09:41,680
And now it will be available under the name of tutorials at the idea that our thoughts and then you

124
00:09:41,680 --> 00:09:45,440
see here, we should get to our jobs, right?

125
00:09:45,910 --> 00:09:48,520
But this does not work unless we import are here.

126
00:09:49,030 --> 00:09:50,880
So let's add ah.

127
00:09:51,610 --> 00:09:56,160
By using our import stored resources.

128
00:09:56,200 --> 00:09:56,860
So

129
00:09:59,470 --> 00:10:00,100
like this?

130
00:10:00,130 --> 00:10:06,550
So Gmail clone, ah, this will now give me access to my resources, thought Strobl.

131
00:10:07,270 --> 00:10:14,050
And there I had this image called tutorials, and this image needs additional details like their content

132
00:10:14,050 --> 00:10:14,830
description.

133
00:10:15,610 --> 00:10:19,440
So here, let's just add a content description saying profile.

134
00:10:20,780 --> 00:10:26,510
And now this arrow disappeared, but I'm going to also add some modifier details to it so that we know

135
00:10:26,510 --> 00:10:27,960
how large it is, for example.

136
00:10:28,280 --> 00:10:37,850
So I'm going to set the modifier to have a size or two for this image to have a size of 30 Vancity pixels,

137
00:10:37,850 --> 00:10:41,420
and I'm going to clip it to be in a circular shape.

138
00:10:42,020 --> 00:10:46,370
So here, circle shape, like so now we need to import clip for this to work.

139
00:10:47,090 --> 00:10:53,150
Make sure that you import clip this one here you draw clip and this will now clip our image for us.

140
00:10:53,900 --> 00:10:59,300
And then as the background for it, you can also define a color that you want to use.

141
00:10:59,420 --> 00:11:04,010
OK, so I'm going to say that I want to have a gray background, for example.

142
00:11:04,280 --> 00:11:04,760
Like so?

143
00:11:05,600 --> 00:11:11,240
So here what we're doing is we are setting the size, we're clipping the image and we're adding a gray

144
00:11:11,240 --> 00:11:13,760
background for that image.

145
00:11:13,970 --> 00:11:18,670
So now if you run this again in our emulator, you can see that we get such emails.

146
00:11:18,830 --> 00:11:24,690
And then our little icon with the gray background and our image so that we can actually see it.

147
00:11:24,710 --> 00:11:26,870
If it had a white background, we wouldn't see it properly.

148
00:11:29,220 --> 00:11:32,910
So we see that the items don't align properly.

149
00:11:33,240 --> 00:11:39,600
So now let's add some weight to this text, so I'm going to add a modifier for my text here.

150
00:11:40,620 --> 00:11:42,930
Where I'm going to set its weight.

151
00:11:44,730 --> 00:11:47,510
To be to that zero f.

152
00:11:48,030 --> 00:11:53,490
So now will have more weight, which will make sure that it takes more of the available space.

153
00:11:53,910 --> 00:11:59,970
In this case, it takes all of the available space except for the space that the other items need.

154
00:12:00,240 --> 00:12:07,200
So you see our icon here, need some space, then detects takes all the available space because it has

155
00:12:07,200 --> 00:12:08,130
a very high weight.

156
00:12:08,880 --> 00:12:09,930
It has the only weight.

157
00:12:09,930 --> 00:12:15,380
The others don't have any weight, so to speak, so they only take as much space as they require.

158
00:12:15,390 --> 00:12:21,300
So that's a neat little trick where you can just set the weight for your text or for your item that

159
00:12:21,300 --> 00:12:27,120
you want to take all of the available space and the other items don't get any weight to it.

160
00:12:28,530 --> 00:12:28,930
All right.

161
00:12:28,960 --> 00:12:35,250
And that's pretty much it, so now you know how to add such an app bar menu here at the top.

162
00:12:36,420 --> 00:12:41,490
I hope enjoyed this video and the next one, we are going to look at the draw menu.