Welcome back.
And this video we are going to add to color palette that we have here at the bottom of which we can
then let Ron select the color and draw with it.
For now, we're just going to prepare the UI and then the next video, we're going to then add the functionality
which will allow us to draw in the different colors.
All right.
So let's get started.
Therefore, we are going to move over to our layout here, to our activity, main layout, and here
we are going to create a new linear layout because I want to position those elements next to each other
and they need to be on top of this image pattern that we had this ID brush.
So as you can see here, this is the brush that we had.
And I wanted this to be on top.
So what we can do is we can create a linear layout which puts the two lines, so to speak, on top of
each other, and then another linear layout, which puts the individual pellets here or these little
buttons next to each other.
All right.
So one of them will be horizontal and the other one will be vertical.
All right.
So let's get started for now.
We are just going to create a linear layout for our pellets and later on we will adjust it accordingly.
So we are going to add an additional linear layout that we're going to need.
So now on top of this idea brush, but below my drawing view is where I'm going to add my new linear
layout.
So let's create one here.
Just hear a linear layout.
And the weather should be wrapping the content.
Might as well have the orientation should be horizontal.
And then one point, we'll need to close this linear layout.
So I'm just going to do it right here already.
Then we need to set where it is going to be positioned.
OK, so we need to have layout constraints here.
And instead of typing them all in here, I'm just going to paste them in here for my project because
it's going to take a lot of time to type all of that so you can see into constraint bottom to top of
the ID brush and easily brush is going to be our image button here.
And it should be to the bottom of our drawing view.
Now, you might wonder that this idea that we have here in Russia or this constraint bottom to top off
for our growing view is not going to fit anymore.
Well, that's correct.
So we are going to change that.
So I wanted it to be.
To the top of this linear layout here.
All right, so the view to drawing view should be on top of our palette, as we saw earlier.
So we need to add an idea for this then, because otherwise it's just not going to work.
So I'm just going to add an idea called L.
L paint colors.
And that's going to be the idea that our.
Layout constraint bottom to top of should be using.
All right, so that was the preparation for our linear layout and within the linear layout, I would
like to have image buttons and many of them, each of them will be one of those little buttons that
we had there.
So these colors that we can choose from.
So I'm going to say it's going to be an image button here.
And this image button should have a width.
Of twenty five density pixels, as well as a height of twenty five density pixels, then I'm going to
add a little margin so that there is enough space around it of, let's say to density pixels and we
can add a constant description so people will know what it is.
And I'm just going to call this one color palette.
OK, then we need to give it a background and I'm going to give it the background, cold at color slash
and this one will be color skin.
So we don't have this color yet.
So we will need to create a color called skin.
Now, let's go to our project folder here or to the project tab here and then go to the values and hear
colors, because here in those colors, we are going to need a lot of colors.
So let's just go ahead and create them.
And you can, of course, copy them from the projects that you can download where you can just type
them in.
So these are the colors that I'm going to use skin, black, red, green, blue, yellow, lollipop
and random, even though random is just going to be purple.
All right.
But you can later on changed at any time.
But for now, you can see that these are the color names that I'm going to use.
And these are also going to be the color names, of course, for my image patterns that I want to use.
But now that by itself will not be enough.
So we need to still make some more changes here.
For one, we need to add a source so a source for this image button so that it will display an image.
And I will add a Drogo, which I'm going to call pellet normal.
All right, so this doesn't exist yet, so we will need to create it.
So let's hover over it and create a draw.
The reason I called paranormal.
And we can just do it as a default.
The Selecter, because we're going to change it anyways.
So what I'm going to need here is a layer list.
Which is used if you want to layer things on top of each other, so items on top of each other, which
is what I want to do.
So I want to have a rectangle and I want to have a circle.
OK, so I'm just going to create an item in there and this is how you can do it in loyalist's so you
can create multiple items.
So I'm going to create two items and one of them will be my item that I'm going to use for a shape which
will be of type rectangle.
So here, let's create a shape Android's shape.
And here we set it to rectangle.
And in there I want to have a line.
So a stroke.
And I'm just going to create a stroke, which will be of a rectangle type, and I'm going to give it
a with of two density pixels and a color of a great color.
So I'm just going to use a grayish color here.
And of course, you could again, go ahead and create a great color in here and then use it.
So feel free to do so.
All right.
So this is our stroke and then.
I want to have a solid background, so I'm going to add a solid in here, which will be quite so andred
color and I'm just going to use.
Eight 00.
All right, that's item number one, and we might change a little more later on in here, but for now,
we're going to keep item number one like this.
And then item number two should also be a shape.
And within that shape, I want to have a stroke.
And that stroke should have an IV width of two density pixels, a color of gray.
So, again, I have nine nine nine nine nine, and by the way, I forgot the hashtag, so I always use
hashtags when using colors.
That's a very tricky one, because if you forget that, it's not going to work and then I'm going to
add a solid in here.
And also use a white color.
All right, so another white color, which is going to be.
The color for my solid, but now you might wonder you're using a shape here, Dennis, and before you
set the shape to be a rectangle.
So why don't you do it here?
Well, here, I'm not going to use an oval as a shape or things like that.
But I'm going to show you another way to create a rounded element.
So I circle, so to speak.
And I'm going to do that with corners and I'm going to set a radius so you can create a circle like
that.
So I'm just creating a corner here where we say I want to have a radius of 10 density pixels.
So it's going to be rounded up.
All right, so this is our normal, but then we can go ahead and duplicate that because we're going
to need it twice.
So I'm going to copy and paste it normal here with Control C and Control V, and I'm going to rename
this one Pallot.
Pressed, of course, you can also call it pelleted selected, because that's what it's going to be,
that's going to be the selected color, so to speak.
And I wanted to look slightly differently.
OK, so it looks pretty much the same.
The only difference is that I want to have a bunch of threes in here so that the color will be slightly
different and the same goes for the stroke here in the second item.
So coming back to what is actually is is it's these elements that we can see here at the bottom.
So this is the squared element and then we have this little circle which is in there.
All right.
So that's the whole idea behind these Pallot Normal and Pelote press.
So the public press will be the one where it's actually going to be selected and then the color will
be slightly differently.
So we will know which color we have selected.
Of course, we can then draw and see what color we have selected, but it's still useful to just know
it by having a visual cue here.
All right, so now we have the pilot now the next thing is we need to go back to our activity, man,
because here you see the arrow disappeared.
So we have a source here now and then.
What we will need to add is a tag.
So we need to have a tag later on in order to know which color was pressed or which image button was
pressed, because we're not going to give each image button and I.D. and then read the idea of it and
have individual clicks or click events for every single button.
But we're going to make it so that we have the same method which will just adjust based on the tag.
OK, so I'm going to use the tag here and here.
It's going to be at color.
And this one will be skin.
And now the next thing is, of course, to duplicate that, so we will need to have multiple image buttons
here and I'm going to put one underneath here.
And the second color should be black, for example.
So I'm just going to use the color black here.
As well as here.
Then we have another image button, this one should be red.
So I'm going to use the color red.
Another image button.
Which will be green and so forth.
All right, so I guess you already see what is happening here.
So it should be rather clear, but it's still a lot of typing involved.
But at least we can copy and paste here so we don't have to type everything manually.
Then we have a lollipop is how I'm going to call this one, although it's some sort of blue.
Lollipop.
And then finally, our purple color, which I called random.
OK, so we can make it random later on so that it will be a random color each time you click on it,
it might become a different color.
So that's something that you can, of course, adjust or add later on or just add more buttons.
If you want to have more buttons, then I'm using here or more colors that you can adjust it.
You can change the width and height accordingly.
But then you also have to look into the palette and see if things are still going to look fine there.
All right, now we can go back to our main activity and here we are going to need a variable and I'm
going to create a private variable called image button current paint.
And it should be of type image button nullable.
Because I want to set it that much at first, because I will not know which current paint is selected.
I will only know it later on.
So we need to import image button here at this point.
And what would be a good point to initialize this image button, this image button, current hand?
Well, a good point would, first of all, be in our own create function.
OK, so in our uncreate here, because we need to know which color should be drawn with at first.
So I'm just going to say that it should be an image button.
Current paint.
Will be held on the score, paint colors at the position of one as button or better said image, but
because it is an image button, right?
So why am I using one so at the first position?
Well, because the first position was black.
OK, so because if we look at our layout here, activity in here, we will see that.
The second image button is, in fact, black, the first one has the skin color, right?
So still complaining here.
So what we need to do is we need to import and once we've done that, you can see Heberlig has been
imported to our project.
And then one other thing that I had is I had an error here too many.
So I closing brackets here.
And that one was not necessary, of course.
So I needed to get rid of it.
So now what is happening here?
What is this, 11 colors one?
Well, I told you that it's color number one, which is color black.
But why is that?
Well, because I'm accessing I'll paint colors, which is an array list, which then is in fact the
linear layout.
Right.
Because if you look at it.
That's the Alpine colors, so you can see that you can access elements of a linear layout based on the
position within the linear layout, just by using the square brackets here and using the index.
So the position, so to speak, of it in the linear layout.
And in our case, skin is index zero, like it's the next one radice index to and so forth.
All right, then there's one less thing to do, and that is in our main activity, I need to tell my
image, putten how it's supposed to look, because if we look at our activity, I mean, we can see
that we said that it should have a source per normal, but.
Once we click on it, I want to change this to be pilot pressed, so how do we do that?
Well, I can go here and say that my image button current paint.
Set image drawable should be called so I can set the image of a image button via code by using this
image drawable, there are other types of set image.
So you can see here said image bitmap set image icons at image resource.
So if you had a resource in your project, you could directly also set that resource.
So I could say, is that image resource here?
And then our DOT idea and an idea of the resource, for example, the button, large brush or small
brush or whatever.
So I could use all of those elements that are prepared here.
But I don't want to use an image resource that is predefined.
But what I want to do is I want to actually set an image.
Drawable.
So what is an image problem?
Well, in our case, it's something that I get from Context Compact's.
Get drawable and.
There in Egypt has the context and the trouble that I want to use are not drawable that Pilate pressed.
So what I'm doing with this is I'm actually getting this XML file, which is within my drawable folder,
which is in fact a drawable.
So you can see a drawable can either be an image or it can be an XML file as we have created ourselves.
So here you have full flexibility.
And what I'm doing is I'm just saying here, once we define one color, that is going to be the one
that is selected.
I also want this to be visible on the screen.
So I want this to be the selected color by using the image petal press or in our case, it's not an
image, but it's this drawable file here to be created.
So now there is one thing missing here, because this is a nullable I need to add a double exclamation
mark to.
Had a no no, no asserted call.
And now, again, the moment of truth has come because we have developed a lot of credit, a lot of
code.
So now let's see how it's actually going to look on our emulator.
And there we are.
So this is how it looks looking on our emulator and the black one is currently selected thing is on
the black one, we can barely see it, but we will see it later on once we select a different color.
OK, because for now we only have black as being selected and there it's difficult to see the difference
and it will be visible as soon as we implement the functionality that we can actually select the color
and then also draw the color because so for now we only created the UI.
But in the next video we are going to add the functionality of changing colors.
So you there?