1
00:00:00,780 --> 00:00:08,130
Welcome back in this video, we're going to look at how we can select colors directly in our application.

2
00:00:08,430 --> 00:00:10,950
OK, so this will be.

3
00:00:12,110 --> 00:00:16,670
What we need to implement, we can draw over items and so forth.

4
00:00:16,730 --> 00:00:23,030
So let's get started implementing that into our application and therefore, instead of my drawing view,

5
00:00:23,030 --> 00:00:24,560
I'm going to create a new function.

6
00:00:24,560 --> 00:00:30,410
So I'm going to go to a spot where I want to put it, and I'm going to put it just at the very bottom.

7
00:00:30,800 --> 00:00:35,150
And here I want to have a function which will allow me to set the color.

8
00:00:35,180 --> 00:00:41,900
So fun color, which will require a new color that we put in and it will be of type string.

9
00:00:41,910 --> 00:00:43,910
So we pass this parameter and you color.

10
00:00:44,210 --> 00:00:51,410
And we're going to override the color that we have here at the very top, which is this global variable

11
00:00:51,680 --> 00:00:56,120
here, private of our color that we had created and we assign color black to it.

12
00:00:56,450 --> 00:01:01,100
We're going to take that and we're going to get the color from the string.

13
00:01:01,280 --> 00:01:07,970
So the thing is, if you look at any given color, this year is a string.

14
00:01:08,150 --> 00:01:13,160
OK, so hashtag five zero zero zero zero will be a string.

15
00:01:13,520 --> 00:01:17,570
OK, so it's not surrounded by quotations, but it's treated like a string.

16
00:01:18,080 --> 00:01:23,480
So when we get that value, we can now parse that value into a color.

17
00:01:23,480 --> 00:01:29,390
So there is this thing you can see here color, string of type string so we can actually pass a string

18
00:01:29,390 --> 00:01:30,230
into a color.

19
00:01:30,710 --> 00:01:31,850
So that's pretty cool, right?

20
00:01:32,150 --> 00:01:36,650
And that's what Android Studio offers us for Android development offers us.

21
00:01:37,040 --> 00:01:43,250
And now we just need to change to draw paint color to be the color that we just created.

22
00:01:43,550 --> 00:01:49,160
So this drop paint you might recall the paint class called style and color information about how to

23
00:01:49,160 --> 00:01:52,130
draw geometries, text and quite a bit maps.

24
00:01:52,220 --> 00:01:59,960
So we're using that in order to now draw on to the screen with the color that we have now inside of

25
00:01:59,960 --> 00:02:00,890
our main activity.

26
00:02:00,920 --> 00:02:08,630
We will need to create another method that will take care of actually clicking on the paint.

27
00:02:08,990 --> 00:02:09,470
OK.

28
00:02:09,560 --> 00:02:15,770
So on any of the given colors here, because now we have a function and drawing in view, which allows

29
00:02:15,770 --> 00:02:16,790
us to set the color.

30
00:02:16,850 --> 00:02:21,590
But we also need to call this method and we are going to call it inside of this method here that we're

31
00:02:21,590 --> 00:02:23,600
going to create inside of the main activity.

32
00:02:23,930 --> 00:02:32,000
So I'm going to call this one paint clicked and it will get a view because I want to assign that to

33
00:02:32,030 --> 00:02:34,880
all of my buttons as an on click event.

34
00:02:35,510 --> 00:02:40,780
OK, so first of all, what we can do is we can start with a toast here.

35
00:02:43,660 --> 00:02:45,130
So make text.

36
00:02:46,380 --> 00:02:46,890
This.

37
00:02:48,490 --> 00:02:50,350
Collect paint.

38
00:02:51,330 --> 00:02:52,800
And length long.

39
00:02:53,040 --> 00:02:56,820
So you're toast, length long and short.

40
00:02:57,060 --> 00:03:04,500
OK, so let's just test this by assigning it to our image button here, so I'm going to sign it.

41
00:03:05,160 --> 00:03:09,300
And on the on click position paint clicked like so.

42
00:03:10,130 --> 00:03:15,380
OK, now the same thing goes for this other button on click and paint clicked.

43
00:03:15,560 --> 00:03:20,500
So basically, we will require that for all of our image buttons.

44
00:03:20,540 --> 00:03:25,010
So let me add that in here for each of those buttons.

45
00:03:26,260 --> 00:03:31,210
So on, click paint clicked on, click paint clicked and the last button doesn't need that.

46
00:03:31,750 --> 00:03:34,650
OK, so here now pink click will be used.

47
00:03:34,690 --> 00:03:35,890
Let's test as real quick.

48
00:03:38,110 --> 00:03:40,720
And see if we can click on the color and you see here.

49
00:03:40,900 --> 00:03:41,740
Click to paint.

50
00:03:41,920 --> 00:03:42,490
That's great.

51
00:03:42,820 --> 00:03:47,490
So now, instead of showing the toast went, we tested that it works right.

52
00:03:47,500 --> 00:03:50,530
You can, of course, test it for all buttons just to see if that works.

53
00:03:51,070 --> 00:03:53,740
So the first thing I need to check is if my.

54
00:03:55,130 --> 00:04:02,540
Image button current paint here is not the view that I am clicking on, so only if it is a different

55
00:04:02,540 --> 00:04:07,520
view that I'm, erm, well, that I'm clicking on another button and another image button, then I want

56
00:04:07,520 --> 00:04:08,240
to change the colour.

57
00:04:08,240 --> 00:04:09,950
Otherwise I don't need to do anything right.

58
00:04:10,310 --> 00:04:18,589
So I'm saying if the view is not equal and equal here, image button current paint.

59
00:04:19,459 --> 00:04:23,570
So if that's the case, only if that's the case, I want to add some coat.

60
00:04:24,440 --> 00:04:26,120
So what is it that I need to add here?

61
00:04:26,360 --> 00:04:34,130
Well, first of all, I need to have an image button, which will be the view as an image button.

62
00:04:34,910 --> 00:04:41,990
So I'm taking this view, which is the thing that we are clicking on, and it could be a text view.

63
00:04:42,050 --> 00:04:44,000
I button an image view and so forth.

64
00:04:44,420 --> 00:04:52,340
But in our particular case, we're making sure that only our image buttons have this paint clicked method

65
00:04:52,340 --> 00:04:53,060
assigned to it.

66
00:04:53,720 --> 00:04:57,140
Okay, we have used this approach before with the click event, right?

67
00:04:57,560 --> 00:05:03,080
And what was you're saying is, OK, the view is always going to be an image button, so let's convert

68
00:05:03,080 --> 00:05:05,900
that into an image button and store that inside of this variable.

69
00:05:06,530 --> 00:05:08,720
And then I need the colour text from that image button.

70
00:05:08,900 --> 00:05:15,830
So I'm going to call this variable colour tag and they can get that from my image button that TAC property

71
00:05:16,160 --> 00:05:17,990
and I need to make a string out of it.

72
00:05:18,560 --> 00:05:18,950
So.

73
00:05:20,090 --> 00:05:28,670
You might recall that we created this tag for every single image button, and now I want to read that

74
00:05:28,670 --> 00:05:29,210
tag.

75
00:05:29,570 --> 00:05:33,830
And here does this just the location where the tag is actually at?

76
00:05:34,160 --> 00:05:37,730
It's actually this string here or this value here.

77
00:05:37,970 --> 00:05:41,400
So we are reading this tag color, which is just a string.

78
00:05:41,900 --> 00:05:48,380
And we are then we're assigning it to the colored tech variable that we created here and now we can

79
00:05:48,380 --> 00:05:56,360
just go ahead and call that set color method that we just created and passed the colored tag to it.

80
00:05:57,260 --> 00:05:57,710
All right.

81
00:05:58,130 --> 00:06:03,740
And of course, we also need to make sure that the image is set accordingly.

82
00:06:03,740 --> 00:06:10,250
So the image that is now selected here displayed pressed will be executed.

83
00:06:11,450 --> 00:06:14,810
So we can actually just take this whole part here.

84
00:06:15,470 --> 00:06:18,740
Copy that and put it here with a couple of changes.

85
00:06:19,340 --> 00:06:26,450
So now it's not going to be the current paint where we assign that, but we're going to assign that

86
00:06:26,450 --> 00:06:29,780
to our image button that we currently are working with.

87
00:06:30,350 --> 00:06:35,750
So now we are assigning the public press to it.

88
00:06:39,220 --> 00:06:43,490
And then to the one that we had pressed before.

89
00:06:43,960 --> 00:06:51,520
So the M button or image button current paint that we had assigned before.

90
00:06:51,790 --> 00:06:53,590
We also need to set it Strobl.

91
00:06:53,590 --> 00:06:58,480
But because this is a Nullarbor, we need to add the question mark and we can just do the same thing.

92
00:06:58,480 --> 00:07:05,260
So let's copy that part here and then just not use palette press, but pellet normal.

93
00:07:05,800 --> 00:07:11,670
So what we're saying is the button that would just press on should now become the press button.

94
00:07:11,680 --> 00:07:18,640
So we'll use this trouble that says pellet press and the one that is unselected should be said to pellet

95
00:07:18,640 --> 00:07:19,030
normal.

96
00:07:19,840 --> 00:07:24,400
Now, of course, we need to also store that we made this shift, right?

97
00:07:24,550 --> 00:07:31,930
So now our M image button, the current paint needs to be overwritten with the view that we are getting,

98
00:07:31,930 --> 00:07:37,840
which means with the image button that we currently press on so that this will work the next time again

99
00:07:38,140 --> 00:07:42,550
because otherwise the button would go by step by step.

100
00:07:42,560 --> 00:07:45,520
Once we click on them, each of them would be ending up pressed.

101
00:07:46,210 --> 00:07:52,480
So what we're doing here is we are setting the current button that we clicked on to be pressed.

102
00:07:52,720 --> 00:07:59,380
We are deactivating or making the old button that we had on press, and we are making sure that this

103
00:07:59,920 --> 00:08:03,520
property, which will just hold the current button that we clicked on.

104
00:08:04,030 --> 00:08:10,510
Be ready so that the next time we do this, execution will still do the trick and will allow us to make

105
00:08:10,510 --> 00:08:11,050
this run.

106
00:08:11,890 --> 00:08:13,900
So let's check it out.

107
00:08:13,910 --> 00:08:22,990
Let's see if the paint clicked will be executed and we can see that it actually is being executed.

108
00:08:22,990 --> 00:08:26,170
So all of those beautiful colors are working flawlessly.

109
00:08:26,860 --> 00:08:28,510
So now a little challenge for you.

110
00:08:28,960 --> 00:08:36,100
Please go ahead and add a white color here as a final option or is another option here on the right

111
00:08:36,100 --> 00:08:40,870
hand side and then make it clickable and accordingly.

112
00:08:40,870 --> 00:08:45,130
While you won't need to make a clickable because our code works perfectly already, so we can basically

113
00:08:45,130 --> 00:08:51,970
just copy the other image buttons and then just use it to basically draw white paint on top of what

114
00:08:51,970 --> 00:08:52,450
we have here.

115
00:08:52,450 --> 00:08:57,130
So it's not going to you the other paint, but it's going to be like somebody draw drew, for example,

116
00:08:57,130 --> 00:09:01,390
graffiti on the wall and you need to paint over it with white color.

117
00:09:01,390 --> 00:09:02,740
So that's what would happen here.

118
00:09:03,610 --> 00:09:06,100
OK, so I hope you pass the video and you tried it.

119
00:09:06,580 --> 00:09:12,220
So interactivity, man, I'm just going to add another image button here, and I'm going to use the

120
00:09:12,220 --> 00:09:13,510
color white here.

121
00:09:14,580 --> 00:09:21,540
And here I'm going to use White as well, and then I just need to create this color white inside of

122
00:09:21,540 --> 00:09:22,200
my colors.

123
00:09:22,320 --> 00:09:25,020
So let's jump over to colors.

124
00:09:25,920 --> 00:09:27,740
Let's create another color.

125
00:09:27,750 --> 00:09:28,980
Let's call this one white.

126
00:09:30,230 --> 00:09:38,270
And White will just be a bunch of F's six f's here will do the trick, you see, we have white now and

127
00:09:38,780 --> 00:09:39,980
then this error disappears.

128
00:09:39,980 --> 00:09:40,670
That's great.

129
00:09:42,200 --> 00:09:43,910
And that should pretty much be it.

130
00:09:44,510 --> 00:09:46,060
So let's check it out.

131
00:09:48,330 --> 00:09:52,320
If we can now have this additional color, you see we have this additional color here.

132
00:09:52,740 --> 00:09:56,730
Let me draw something and I'll let me use white and draw over it.

133
00:09:56,850 --> 00:09:58,790
So you can see is as simple as that.

134
00:09:58,800 --> 00:10:01,770
That's how easily you can add new colors to it.

135
00:10:02,100 --> 00:10:07,890
And now, by the way, let's say you wanted to add a color picker to your application.

136
00:10:07,920 --> 00:10:10,530
I would recommend you follow this tutorial.

137
00:10:10,740 --> 00:10:11,220
All right.

138
00:10:11,580 --> 00:10:16,770
So geeks for geeks how to create a color picker tool in Android using color, wheel and slider.

139
00:10:17,190 --> 00:10:23,670
So it's going to really allow you to basically just select a color, see the tax code and all of the

140
00:10:23,670 --> 00:10:29,130
good stuff, and then imported into your application where you will then use this color that you're

141
00:10:29,130 --> 00:10:29,950
getting from there.

142
00:10:29,970 --> 00:10:37,320
You just need to get the string color and then use it in the format that we have used in our applications,

143
00:10:37,320 --> 00:10:42,270
or basically just assign it at the point where you set the color.

144
00:10:42,660 --> 00:10:43,080
OK.

145
00:10:44,040 --> 00:10:44,480
OK.

146
00:10:44,520 --> 00:10:46,140
So that's pretty much it.

147
00:10:46,620 --> 00:10:54,360
I hope you enjoyed this video and the next one, we're going to add the background image to our application

148
00:10:54,360 --> 00:10:59,460
so that we can try to draw on top of it because we're going to be such amazing draws.

149
00:11:00,150 --> 00:11:01,320
All right, so see you there.