Welcome back.
In this video, we are going to add the functionality where we can select the color now and then draw
with that color on the screen.
So I say let's get started with it.
Therefore, we need to go to our drawing view and I'm going to.
Get there by clicking on the drawing view, now we can select a spot where we want to create a new function
because we will need to have a function which sets the color.
And I'm going to create it in here.
I'm going to say fun set color, and I'm going to say that there should be a new color type string.
So we pass in the color as a string.
Why would we do that?
Well, if we look at our colors, XML file there, we have these names and these names can be used as
strings and then transformed into actual colors, which then can be used in order to run.
So here I'm going to say that the color and color is a property of this class or a variable here of
this class where we said color that the default value is black, that color should be overwritten and
it should be overwritten with a new color.
Which is going to come from colored dots pass color, so I'm using this function called parse color.
Now let's look at what it does to color.
Parses the color string and returns to corresponding color integer if the string cannot be passed through
an illegal argument exception.
So we have to, of course, be careful here that the type is correct.
So you can see these are the types that are accepted.
So with four values, so the alpha, alpha, red, green and blue value or the red, green and blue
value, each having two spots here or two characters, you can see that the following names are also
accepted, something like red, blue, gray, like gray.
So these default colors that aren't here are also accepted.
So you could even parse those in so you don't actually need to use those hexadecimal values.
But we're going to use the new color string, which is of type string, as we see here at the top.
And we're going to pass it into a color which we then can use as our and draw paint nullable color.
Because now color is actually of type color and this color here, except to have a color of the correct
type.
Of course, we could have summed it up and then it on one line that would have been the alternative.
But it's a little more relatable like this.
Also, by doing that, the color, if we use it somewhere else, will also be the correct color.
OK, now we just need to call this color at one point.
And a good point will be in our main activity, because this is where we take care of clicking on stuff
right here, we have this I.B. brush system, colorless enah and so forth.
So we're going to need a new function in here.
I'm just going to create a new function which will be here at the bottom just before the ending of the
activity.
And I'm going to call this one page clicked and I will need a view of view.
View.
So what is that?
Well, the view that is passed is going to be the button that was clicked on.
So I need to import view here.
But now the button that was clicked on, I can check if it is the current button that is selected.
So we had this extra variable here, an image button, current paint, so I can check if the button
was selected is the current button or not.
So if view is not equal, an image button.
Current paint.
What should happen then?
Well, then we want to make the button active, so.
The button should become pressed or get to the press as a background, and we should set it as a color
of our drawings, of our strokes, so whatever stroke we add afterwards, it should be of that color.
So in order to do that, we first of all need to check if the view that was passed is actually of type
image button.
So I'm going to create a new image button here, which will see if the view.
He's actually an image, but.
So we're using Asir in order to convert it, so because the view that will be passed will be an image
button as we will only use paint clicked as the unclick event for our image buttons.
This will work without a problem.
All right.
What I mean by this is if we look at our XML file before we finish implementing this, I want to show
you something.
So we go back to our activity main.
And here we have all of our image buttons.
Right.
And they will have a click event.
So I'm just going to add that here.
Actually, let me add it somewhere else, just underneath the margin here.
Click.
And I'm going to add this android unclick and to paint clicks should be executed then, so this phone
clicked method that we are currently implementing.
That's the one that I want then to run.
So here this one is so you can see now it's not gray anymore.
Now it's yellow because I'm using it somewhere and I'm using it in my activity meant for my image button.
So the view that is passed is this image, but that's why we can go ahead and say, all right.
Used the view that was passed, which is here as an image, but.
All right, and of course, we need to do that for all of our partners, right, so not just for the
first one, but also for the second one.
So I'm going to add that to the image button here to the next one.
To the next one and so forth.
All right, so once all of my buttons have this unclick event, each of the buttons will do the same
thing, but we don't want them to do exactly the same thing.
Right.
We want them to do slightly different things.
For example, we want to change it to a different color.
So in one case, we want it to be a yellow color and another case wants to be a blue color.
So it should be slightly different.
So how do we get there?
Well, we, of course, need to read to tag off our button.
That's why we created this text.
So I'm going to create another variable here.
Color tag is going to be an image button, dot, tag, dot to a string.
So this Coltec will be of type string.
And what I'm doing is I'm reading the tag property of my image button and the image button is the view
that I just clicked on.
OK, so here I'm looking at this tag here and I'm seeing that there is a string behind it and it's not
actually reading the string from here, meaning it's not going to read at Color Blue, but it will read.
This year, so this part in here.
And then we can use this color tag in order to pass it to our color function, so we have our drawing
view dot set color and here we pass our color tag.
So what is the culture, this dysfunction that we just created and you see it's not great anymore now
it's yellow because we are actually using it.
So now the color that we pass is of type string and now it's transformed into a color.
And our drop paint is set to this color that we've just selected.
But that by itself is not going to be enough, because I also want to change the appearance of the button.
I want it to be this palette selected, but the other ones should be unselected, so to speak.
OK, so what I need to do is.
I need to set this image button.
To be the image drawable of this.
Pettit's.
And pressed, so this one here.
Set amidst the rubble.
So it's pretty much the same thing here.
Only that it's not this image paint, but it's actually our image, but.
OK, so we're just saying, OK, get a button that you pressed on should be displayed, pressed and
the other buttons.
Now that's the important thing, is an image button or image button couldn't paint there.
I want to set the image drawable to be, again, some context here or something.
Context comput.
So I'm just going to put it in there and put it in another line to make it more readable and here it
should, of course, be pallette normal.
So the other button that we had pressed before that was selected before now should be of pilot normal,
so should look like all the other buttons, but the one that we selected should look like a selected
button, like pilot press.
And now, finally, we need to make sure that our image button current paint is set to view.
So the current button that we have now and I need to make sure that I'm in the right context here.
This will be a little earlier, so in here.
So this image and current paint will be set to the view, so to the button that was clicked on.
All right, so now we should be able to draw with different colors.
All right, so there's our app, let's change to a different color here or to a different button.
So this is the third button.
Now, you could see once I click on the blue button, you see that it looks differently now selected.
Now, let's click on this one.
You see now the yellow one is selected.
So it's this dark overlay that I'm putting on top of the color that is selected.
OK, so.
That's how we know which color is selected.
So let's test it, skin color works like we tested that already, but let's see if it works after we
change it again.
Now, Red.
Green, blue.
Yellow.
This lollipop color and then our purple random color, so to say, all right, so now you see now we
can draw out with different colors on your application.
Now, let's say you would like to add white as color as you can see here.
So I've added this white color and we can see it as soon as I draw over something else.
So I could call it actually a rubber, but it's not really a rubber because it just paints white over
something.
It's not really cleaning it away in order to do that.
Actually, let's make it a challenge.
So try to add another color to your application.
All right, I hope you tried it, so the first thing you'll need to do is add another color here and
I'm just going to call this one white and it will be hashtag and success.
And then you need to go to your activity main and add another image button.
With the same properties that we had here, and I put it underneath it, so it will be at the very right
and of course here I'm going to use white instead of random.
All right.
Now, if you run this, then we will get the result that I've just shown you where we have an additional
color.
Now, again, of course, go ahead and add as many colors as you want.
But you of course, I have also to be careful that it still fits onto your screen.
And then maybe if you really want to add justice to the next level, you can see how to create a color.
Pictures you can Google out, you had a color picture and then add a little button, which will open
up a color, pick up where somebody can choose from the millions of different colors directly.
And therefore, you can, of course, as I said, Google it, so either check out this tutorial card
tutorial.
Where you can learn how to create a color picker or you can use a third party library from GitHub.
So just follow their instructions.
So there are plenty of different examples of color pictures, as you can see so much as one person.
But multiple people have already created one.
And you can just use their prepared code and is pretty cool and it makes it a lot easier than to build
everything from scratch.
Sometimes they can be a little bit too much, so a little too complex and too advanced.
But in those cases you can just look for the next one.
So here this color, this cow, for example, by Alan Wang, he created this color picker.
If you scroll down, you can see what it does.
So a bunch of flexibility and a pretty advanced one, but maybe it's a little too much for your taste.
So then you can check the next one.
If you wonder how to use third party libraries, no worries, we're going to use them in future projects.
So if you're willing to do that, but it's a little too early for you.
No worries.
Just go ahead with the course and then later on, you can come back and then add the color picker,
if you like.
So now we still didn't test our changes, as you can see, so we have two colors in here and now I can
go ahead and draw with my whites, I can change the thickness.
So it's a little bit like a rubber, but it's not really it's really just drawing something white on
top of it.
All right, cool.
So that was it.
And see you in the next video.