1
00:00:00,960 --> 00:00:07,410
Welcome back in this video, we're going to take care of the UI that you can see here where we can select

2
00:00:07,410 --> 00:00:11,360
the different colors and then we'll draw with those colors.

3
00:00:11,370 --> 00:00:17,310
Currently, at this point, we will not be able to then actually draw in the color, but we will at

4
00:00:17,310 --> 00:00:19,410
least prepared the UI for it.

5
00:00:19,410 --> 00:00:22,650
And then in the next video, we're going to add the actual functionality.

6
00:00:22,950 --> 00:00:23,940
So let's get started.

7
00:00:25,660 --> 00:00:32,980
Therefore, inside of our activity, Maine, where we have our image button and our growing view, we

8
00:00:32,980 --> 00:00:38,440
will require a linear layout in between which will contain all of those colors.

9
00:00:38,530 --> 00:00:38,950
All right.

10
00:00:39,190 --> 00:00:45,460
So therefore what I'm going to do is I'm going to start creating a linear layout and then I'm going

11
00:00:45,460 --> 00:00:47,620
to make changes to the constraint stuff here.

12
00:00:47,920 --> 00:00:54,760
So the linear layout with rep content and rep content in both directions.

13
00:00:55,150 --> 00:01:01,060
Now this linear layout should contain a couple of elements, but before that, I'm going to give it

14
00:01:01,060 --> 00:01:07,500
an idea so that I can actually adjust the UI accordingly, so allow paint colors.

15
00:01:07,720 --> 00:01:10,750
So I'm going to call it El-Al standing for linear layout.

16
00:01:11,260 --> 00:01:17,980
All right, the orientation should be horizontal because I want to make sure that the items inside of

17
00:01:17,980 --> 00:01:19,640
it, so those image buttons.

18
00:01:19,660 --> 00:01:23,560
So this will be image buttons that they are next to each other.

19
00:01:23,560 --> 00:01:27,970
And this is what I get by using the horizontal orientation accordingly, of course.

20
00:01:28,420 --> 00:01:30,700
And then I need to add constraints.

21
00:01:30,700 --> 00:01:37,600
Okay, so the constraints, the thing is, what we want this to be is we want this to be to the bottom

22
00:01:37,870 --> 00:01:39,430
of our.

23
00:01:40,030 --> 00:01:42,220
So let me see constraint bottom.

24
00:01:43,680 --> 00:01:51,210
To top of the brush, so this should be underneath our iby brush.

25
00:01:51,420 --> 00:01:58,920
OK, so this should be on top of the brush and then it should be to the start of the parent and to the

26
00:01:58,920 --> 00:01:59,970
end of the parent.

27
00:02:00,870 --> 00:02:02,290
So end to end, start to start.

28
00:02:02,340 --> 00:02:07,720
So it should be directly on the edges of the parents on both sides right, left and right.

29
00:02:08,070 --> 00:02:12,570
And then it should be underneath this drawing view.

30
00:02:12,750 --> 00:02:14,460
OK, so that's what I want to have.

31
00:02:14,760 --> 00:02:24,450
That's why I need to add top to bottom of here and use the drawing view as the bright element.

32
00:02:24,570 --> 00:02:30,900
The thing is, if I do that now, I get an arrow because I say that this linear layout should be in

33
00:02:30,900 --> 00:02:33,480
between the brush and the drawing view.

34
00:02:33,780 --> 00:02:39,000
But the drawing view thinks that it should be on top of the brush, and the brush thinks that it should

35
00:02:39,000 --> 00:02:40,470
be well.

36
00:02:40,470 --> 00:02:45,450
It doesn't even have the definition where it should be in terms of the drawing view itself.

37
00:02:45,780 --> 00:02:53,610
So we need to change that because now our drawing view should be at the top of our linear layout.

38
00:02:53,760 --> 00:02:57,450
So here, let's add help paint colors here.

39
00:02:58,020 --> 00:03:02,670
And also, let's make sure that our image button at the very bottom, which was our selector, you can

40
00:03:02,670 --> 00:03:08,070
see the image here is going to be top to bottom of the al paint colors.

41
00:03:08,130 --> 00:03:12,980
So if you're top to bottom of El Al paint colors, and that should do the trick.

42
00:03:12,990 --> 00:03:17,400
So now if we look at the design, we can see, well, it's it's barely stable.

43
00:03:17,400 --> 00:03:21,090
There's just a little dot because our linear layout doesn't have any content yet.

44
00:03:21,630 --> 00:03:27,870
So let's make sure that we add an image button in there, and I'm going to copy this image button in

45
00:03:27,870 --> 00:03:28,230
here.

46
00:03:28,260 --> 00:03:34,770
Get rid of all of the constraints change to ID to no idea at all, because I don't need an I.D. for

47
00:03:34,770 --> 00:03:35,580
those image buttons.

48
00:03:35,760 --> 00:03:41,430
I'll tell you why in a bit, and I want those buttons to be 25 density pixels towards both directions.

49
00:03:41,460 --> 00:03:44,340
Okay, Lisa, much buttons with a little bit of margin.

50
00:03:44,340 --> 00:03:50,880
I'm going to keep its two density pixel this time, and the image that I want to use is going to be

51
00:03:51,480 --> 00:03:52,770
a different draw.

52
00:03:52,800 --> 00:03:56,790
So I'm going to create a palette underscore normal.

53
00:03:57,150 --> 00:03:58,230
So what is palette normal?

54
00:03:58,500 --> 00:04:03,900
Well, let me quickly create a new resource for that because it will just be a new file that we're going

55
00:04:03,900 --> 00:04:06,900
to create an image view that we are creating here.

56
00:04:07,380 --> 00:04:11,430
So let's create that palette normal and let's design it.

57
00:04:11,550 --> 00:04:15,330
So it's not going to be using a selector as the parent view.

58
00:04:15,360 --> 00:04:20,880
It will be a layer list because I want to have a list of items that are layered.

59
00:04:21,149 --> 00:04:26,130
And in order to achieve that, what I will need, first of all, is, of course, going to be the namespace

60
00:04:26,400 --> 00:04:27,360
of Android.

61
00:04:27,630 --> 00:04:31,560
OK, let me look at the code only and then let me.

62
00:04:33,340 --> 00:04:38,830
Add the loyalist items in there, so how that works is inside of a loyalist, you can have multiple

63
00:04:38,830 --> 00:04:40,930
layers and each layer is an item that you're creating.

64
00:04:40,930 --> 00:04:46,630
So I'm just going to create a new item which will have a certain shape and this shape will be.

65
00:04:47,350 --> 00:04:52,720
And let me put that inside of the opening bracket of the shape will be a rectangle.

66
00:04:53,110 --> 00:04:56,740
So here shape, property, rectangle.

67
00:04:57,460 --> 00:05:05,350
And then I want to have a stroke inside of it, and the stroke will have a whiff and not the color will

68
00:05:05,350 --> 00:05:14,440
add the color in a second, but a width of two density pixels and then a color of a gray color.

69
00:05:14,560 --> 00:05:21,760
So here hashtag FSF and then a couple of nine six nine, the total that will create the stroke for me

70
00:05:21,760 --> 00:05:22,060
here.

71
00:05:22,720 --> 00:05:24,760
And this will just be a great line.

72
00:05:24,790 --> 00:05:27,160
OK, so it's a rectangle and has great line.

73
00:05:27,160 --> 00:05:28,090
You can see that here.

74
00:05:28,360 --> 00:05:30,130
That's the form that it has currently.

75
00:05:30,910 --> 00:05:33,820
And then I will have another item in there.

76
00:05:37,260 --> 00:05:40,890
So with a shape, so.

77
00:05:41,970 --> 00:05:48,600
You see, we have a loyalist where we use two items and each of the items has a shape or is a shape.

78
00:05:48,870 --> 00:05:56,490
And here I'm going to have a stroke with a width of two density pixels as well, as well as a color

79
00:05:56,490 --> 00:05:58,010
of this great as well.

80
00:05:58,020 --> 00:06:04,410
So I'm just actually copy this stuff here and then I want to have a solid background.

81
00:06:04,770 --> 00:06:06,900
So the solid background should get a color.

82
00:06:07,020 --> 00:06:08,460
We're going to overwrite manually.

83
00:06:09,030 --> 00:06:16,410
OK, but for now, it's just going to be this color having eight zeros, which will just be black.

84
00:06:16,860 --> 00:06:17,240
OK.

85
00:06:17,790 --> 00:06:19,590
And I want to have corners.

86
00:06:19,830 --> 00:06:24,960
So here corners with a radius of 10 density pixels.

87
00:06:25,890 --> 00:06:28,680
OK, so this is basically going to be the structure here.

88
00:06:29,130 --> 00:06:31,110
Let me clean it up a little bit here.

89
00:06:31,140 --> 00:06:34,040
Get rid of unnecessary line breaks.

90
00:06:34,110 --> 00:06:40,620
So here we have the list with an item and another item, and each item is just a shape.

91
00:06:41,010 --> 00:06:46,500
And you can see that while I can barely see it here, but there's just this little corner around here,

92
00:06:46,680 --> 00:06:53,250
and this is really just basically going to create this effect that you see here where we have a square

93
00:06:53,490 --> 00:06:54,930
with a circle inside of it.

94
00:06:55,260 --> 00:06:57,120
And yeah, that's basically it.

95
00:06:57,780 --> 00:07:05,490
So that's what we created here at the Circle does look like a circle here, pretty much because of the

96
00:07:05,490 --> 00:07:11,040
size that we have, because it's the same width and height for each of the individual items that we're

97
00:07:11,040 --> 00:07:11,430
using.

98
00:07:11,790 --> 00:07:12,960
So that's a palette normal.

99
00:07:13,260 --> 00:07:15,030
But then there is also the palette pressed.

100
00:07:15,600 --> 00:07:18,690
And by the way, what we can also do.

101
00:07:18,690 --> 00:07:27,000
But in order to make sure that the padding is going to be zero towards all directions, we can add padding

102
00:07:27,000 --> 00:07:33,450
zero dpi towards all directions like so because otherwise the thing is the padding could be ending up

103
00:07:34,830 --> 00:07:42,030
by default being not zero, and that would create a way to distorted view.

104
00:07:42,570 --> 00:07:47,400
OK, so here I'm just going to add padding being zero for the main item.

105
00:07:47,400 --> 00:07:53,430
So for this first rectangle shape, and that is pretty much going to be it.

106
00:07:53,440 --> 00:07:55,260
So let's go ahead and duplicate this.

107
00:07:56,250 --> 00:07:58,500
This new resource trouble that we just created.

108
00:07:58,650 --> 00:08:02,490
So copy paste give the second one the name of pressed.

109
00:08:02,670 --> 00:08:10,080
You could also call it selected because this second one will just be the selected version of it.

110
00:08:10,590 --> 00:08:13,950
And I want to make one small change here.

111
00:08:14,370 --> 00:08:23,790
And that is that the color here will be a bunch of three or six threes after the double f's, as well

112
00:08:23,790 --> 00:08:26,790
as here as are here at the bottom.

113
00:08:26,820 --> 00:08:28,410
This will also be this color.

114
00:08:29,550 --> 00:08:31,170
With six threes.

115
00:08:34,120 --> 00:08:40,120
So the idea behind this is that this will create a different effect where we then see which of the colors

116
00:08:40,120 --> 00:08:41,230
was selected.

117
00:08:41,840 --> 00:08:47,530
OK, so it will be highlighted, so to speak, and that's what this palette presto should then take

118
00:08:47,530 --> 00:08:47,980
care of.

119
00:08:48,580 --> 00:08:48,880
All right.

120
00:08:48,890 --> 00:08:52,840
So instead of our activity main, we can now use this palette normal.

121
00:08:53,080 --> 00:08:59,200
And now what I want to happen is for every single item, I need to assign a tag.

122
00:08:59,770 --> 00:09:03,040
So and by the way, is this the right I image for you?

123
00:09:03,520 --> 00:09:04,730
It's fine here.

124
00:09:04,750 --> 00:09:06,700
We don't need to fit, by the way.

125
00:09:06,730 --> 00:09:10,840
That's just something we did for the image view that we created earlier.

126
00:09:11,170 --> 00:09:19,510
And what I'm going to add here is the tag, which will be a color that I'm assigning to it.

127
00:09:19,930 --> 00:09:22,210
OK, so I'm going to create a bunch of colors.

128
00:09:22,480 --> 00:09:26,320
Let's go over to the colors XML file what you see.

129
00:09:26,320 --> 00:09:31,870
We have a couple of colors by default, and I'm just going to add my own colors in here.

130
00:09:32,170 --> 00:09:40,180
And this is really going to be the colors that we are going to use in our app could see that here we

131
00:09:40,180 --> 00:09:43,240
have the skin color black, red, green and so forth.

132
00:09:43,690 --> 00:09:45,970
And you can use the same colors if you want to.

133
00:09:46,180 --> 00:09:48,520
You can, of course, also use very different colors.

134
00:09:49,270 --> 00:09:53,260
OK, so just play around with the colors that you like and put them into your application.

135
00:09:53,770 --> 00:09:59,320
Of course, you could go as far as adding a color picker where the user then can select a color from

136
00:09:59,320 --> 00:10:03,190
a palette, but that is something that you would need to use a third party to.

137
00:10:03,190 --> 00:10:06,130
For that, or I would recommend to use in third party API for that.

138
00:10:06,580 --> 00:10:09,670
Either way, coming back to our activity made.

139
00:10:09,670 --> 00:10:15,700
So now we have our first image button and now what we will need to change here is going to be to assign

140
00:10:15,820 --> 00:10:22,240
a color because currently it has a tag that has a certain color, but the color of the button itself.

141
00:10:22,240 --> 00:10:27,700
So the background of the button itself is not going to be that color, but we can do that so we can,

142
00:10:27,700 --> 00:10:29,860
of course, assign the color.

143
00:10:30,370 --> 00:10:34,150
So here at color and it was this yellow color.

144
00:10:35,110 --> 00:10:40,420
OK, so this would be our first image button, and we're going to require multiple ones of those.

145
00:10:40,660 --> 00:10:48,670
So let me add the second one or actually let me start in the same order that we have in our app.

146
00:10:48,880 --> 00:10:52,870
So this one will be the color skin.

147
00:10:53,740 --> 00:10:55,150
So the first one will be skin.

148
00:10:57,140 --> 00:10:59,870
Then the second one will be black.

149
00:11:03,550 --> 00:11:08,650
And we need to change that for the background as well as the tank, because we're going to use the tank

150
00:11:08,650 --> 00:11:15,280
in cold than later in order to figure out which button or image button was pressed and the change to

151
00:11:15,280 --> 00:11:16,240
color accordingly.

152
00:11:16,360 --> 00:11:22,870
So the color of our stroke, because otherwise we would have to add IDs here and we would have to individually

153
00:11:22,870 --> 00:11:27,750
create a set on click lists and those for each of those buttons and so forth.

154
00:11:27,760 --> 00:11:31,920
But luckily, we have a good way around that and we'll see how to do it later.

155
00:11:31,930 --> 00:11:35,970
So you will find another way of handling click events.

156
00:11:35,980 --> 00:11:37,060
So that's pretty useful.

157
00:11:37,630 --> 00:11:38,050
All right.

158
00:11:38,050 --> 00:11:39,430
So then that will be read.

159
00:11:40,270 --> 00:11:40,510
Yeah.

160
00:11:40,570 --> 00:11:43,390
Another color that one will be.

161
00:11:44,650 --> 00:11:45,130
Green.

162
00:11:47,170 --> 00:11:52,400
And you see that using linear layouts, right, where items just are next to each other.

163
00:11:52,420 --> 00:11:54,880
By the way, this is what we're getting as of now.

164
00:11:55,330 --> 00:11:57,160
You can see it here.

165
00:11:57,250 --> 00:12:03,070
OK, so this is the form that we are creating, by the way, this is what this pellet normal looks like.

166
00:12:03,820 --> 00:12:04,270
All right.

167
00:12:04,660 --> 00:12:07,390
So then we have green.

168
00:12:07,570 --> 00:12:08,770
Now, let's add blue.

169
00:12:11,270 --> 00:12:14,810
And for that color as well, for the background, then.

170
00:12:15,970 --> 00:12:18,760
Let's use yellow at this point.

171
00:12:18,790 --> 00:12:19,960
Well, we had it there.

172
00:12:20,050 --> 00:12:21,310
We didn't have to add that.

173
00:12:21,610 --> 00:12:26,260
And then I'm going to add the color lollipop in here.

174
00:12:28,130 --> 00:12:31,490
Lollipop makes me think of a song.

175
00:12:33,440 --> 00:12:33,870
OK.

176
00:12:34,040 --> 00:12:34,730
Lollipop.

177
00:12:36,470 --> 00:12:43,100
And then, of course, the final, which I'm going to call random, and we called this color random

178
00:12:43,100 --> 00:12:45,300
as well, but it's going to be this purple color.

179
00:12:45,320 --> 00:12:45,740
OK.

180
00:12:46,010 --> 00:12:46,640
But later.

181
00:12:47,360 --> 00:12:48,810
So you see here at random later.

182
00:12:48,830 --> 00:12:53,840
What I want to happen is once we click on this button, it will just give us a random color.

183
00:12:53,900 --> 00:12:59,450
That's the idea behind this button or this tag random or color random.

184
00:13:00,380 --> 00:13:06,320
OK, so at this point, if we look at our design, you can see we have all of our colors in here.

185
00:13:08,510 --> 00:13:12,140
OK, so how do we get access to these individual buttons?

186
00:13:12,470 --> 00:13:19,250
Because it's, well, quite a lot to process there, and we have so many different image buttons and

187
00:13:19,250 --> 00:13:21,080
we are not using their ID.

188
00:13:21,830 --> 00:13:25,760
Well, the cool thing is we can use their position inside of a linear layout.

189
00:13:26,030 --> 00:13:33,320
So a linear layout is basically being treated like a in a raid that we can access its indexes off.

190
00:13:33,710 --> 00:13:35,390
So let me show you what I mean with this.

191
00:13:35,720 --> 00:13:41,120
So I'm going to create a new variable, an image button, current paint.

192
00:13:41,510 --> 00:13:46,130
So it's going to be a global variable, which is going to be of type image button.

193
00:13:46,670 --> 00:13:48,980
And at the beginning, it will be now.

194
00:13:49,040 --> 00:13:49,400
OK.

195
00:13:49,820 --> 00:13:56,030
So then when we want to use it, and that would be, for example, inside of our own create where we're

196
00:13:56,030 --> 00:14:03,040
going to set the default color at the beginning, I'm going to set up the AM image button.

197
00:14:03,050 --> 00:14:05,840
Current paint to be.

198
00:14:07,690 --> 00:14:16,780
Using our linear layout colors, so in order to use them, we need to make sure that we are preparing

199
00:14:16,780 --> 00:14:17,950
the linear layout.

200
00:14:18,340 --> 00:14:21,580
OK, so let me just quickly set that linear layout up.

201
00:14:21,940 --> 00:14:23,380
So while linear?

202
00:14:24,780 --> 00:14:25,680
Lay out.

203
00:14:27,710 --> 00:14:29,780
And the name will be paint colors.

204
00:14:31,170 --> 00:14:32,640
Will be found by outside.

205
00:14:33,240 --> 00:14:36,330
And this time I'm going to use linear layout like so.

206
00:14:37,360 --> 00:14:42,580
And I'm going to find it via all ID dot l l paint colors.

207
00:14:43,480 --> 00:14:49,180
OK, so this will be the linear out paint colors, which is this entire linear label that contains all

208
00:14:49,180 --> 00:14:50,320
of those colors, right?

209
00:14:50,620 --> 00:14:55,720
It's this linear layout which, if you look at it, is on top of the image button, which contains all

210
00:14:55,720 --> 00:14:57,010
of these different image buttons.

211
00:14:57,670 --> 00:15:04,720
So this linear layout, all of that I would like to get the position one which will be black.

212
00:15:04,840 --> 00:15:16,120
OK, so linear layout paint colors at position one as an image button because the thing is inside of

213
00:15:16,120 --> 00:15:18,880
a linear layout, you can have all kinds of stuff.

214
00:15:19,720 --> 00:15:26,740
And here what we're saying is we want to use the item at position one, but we want to make sure that

215
00:15:26,740 --> 00:15:31,840
it's going to be treated like an image button, which two items inside of the linear layout are all

216
00:15:31,840 --> 00:15:32,140
of them.

217
00:15:35,150 --> 00:15:40,370
And at the same time, we need to import something, so here we need to import.

218
00:15:41,700 --> 00:15:49,050
This view get Android core you get, which will now allow me to get a view inside of a linear layout,

219
00:15:49,050 --> 00:15:53,520
and the view that I'm looking at is the image button at position index one.

220
00:15:53,880 --> 00:15:59,120
So if we look at our activity maximal, what is index one?

221
00:15:59,130 --> 00:16:03,240
So image button here this one with a skin color will be index zero.

222
00:16:03,540 --> 00:16:07,290
And this image button here, which will be the black colour, will be index one.

223
00:16:07,980 --> 00:16:10,800
OK, so that's what we are getting here.

224
00:16:11,190 --> 00:16:19,670
And now what I can do is I can assign this colour to be the color that we're going to use for our application.

225
00:16:19,680 --> 00:16:20,250
So here.

226
00:16:22,710 --> 00:16:26,250
We can set the image drove all.

227
00:16:27,990 --> 00:16:28,530
To be.

228
00:16:28,740 --> 00:16:32,820
And human need to pass a drug bill that we want to use so we can get that from the context, compact

229
00:16:33,390 --> 00:16:34,280
gets droll.

230
00:16:34,890 --> 00:16:39,270
And we need to pass a context as well as the drug bill that we want to use.

231
00:16:39,570 --> 00:16:42,960
So the job that I want to use is the pellet pressed.

232
00:16:44,790 --> 00:16:46,590
OK, so what is the oppressed?

233
00:16:46,620 --> 00:16:47,670
Well, it's this.

234
00:16:49,080 --> 00:16:51,660
Layered item, this trouble item.

235
00:16:54,990 --> 00:16:59,070
And what does that even mean like this press, let me show you real quick.

236
00:16:59,490 --> 00:17:02,070
And I believe with one, it's not going to be super visible.

237
00:17:02,070 --> 00:17:04,109
So currently black is pressed.

238
00:17:04,140 --> 00:17:11,190
Let me select a different one and look specifically at how the red surrounding sort this gray around

239
00:17:11,190 --> 00:17:11,640
the red.

240
00:17:11,700 --> 00:17:13,170
So the palette looks like so.

241
00:17:13,170 --> 00:17:17,560
Now if we select two now the red one is selected.

242
00:17:17,560 --> 00:17:24,150
So you can see now here we can see that it has a different grayish color, which means that now it is

243
00:17:24,150 --> 00:17:27,750
selected, even though, of course, the color itself is not set yet.

244
00:17:27,960 --> 00:17:34,620
But at least we set the image view for that image button to be this double palette press.

245
00:17:34,770 --> 00:17:38,520
So we overrode it from being the normal palette to be the palette pressed.

246
00:17:39,210 --> 00:17:42,090
OK, so that's it for this video.

247
00:17:43,390 --> 00:17:47,590
And yeah, that's it for this video and the next video, we're going to then implement how we can click

248
00:17:47,590 --> 00:17:53,620
on those buttons and then accordingly change that they are pressed as well as make sure that the others

249
00:17:53,620 --> 00:17:54,160
aren't pressed.

250
00:17:54,460 --> 00:17:58,540
And also actually select the color so that we can draw with that color.

251
00:17:58,690 --> 00:17:59,860
So see you, they.