Welcome back in this video, we're going to take care of the UI that you can see here where we can select
the different colors and then we'll draw with those colors.
Currently, at this point, we will not be able to then actually draw in the color, but we will at
least prepared the UI for it.
And then in the next video, we're going to add the actual functionality.
So let's get started.
Therefore, inside of our activity, Maine, where we have our image button and our growing view, we
will require a linear layout in between which will contain all of those colors.
All right.
So therefore what I'm going to do is I'm going to start creating a linear layout and then I'm going
to make changes to the constraint stuff here.
So the linear layout with rep content and rep content in both directions.
Now this linear layout should contain a couple of elements, but before that, I'm going to give it
an idea so that I can actually adjust the UI accordingly, so allow paint colors.
So I'm going to call it El-Al standing for linear layout.
All right, the orientation should be horizontal because I want to make sure that the items inside of
it, so those image buttons.
So this will be image buttons that they are next to each other.
And this is what I get by using the horizontal orientation accordingly, of course.
And then I need to add constraints.
Okay, so the constraints, the thing is, what we want this to be is we want this to be to the bottom
of our.
So let me see constraint bottom.
To top of the brush, so this should be underneath our iby brush.
OK, so this should be on top of the brush and then it should be to the start of the parent and to the
end of the parent.
So end to end, start to start.
So it should be directly on the edges of the parents on both sides right, left and right.
And then it should be underneath this drawing view.
OK, so that's what I want to have.
That's why I need to add top to bottom of here and use the drawing view as the bright element.
The thing is, if I do that now, I get an arrow because I say that this linear layout should be in
between the brush and the drawing view.
But the drawing view thinks that it should be on top of the brush, and the brush thinks that it should
be well.
It doesn't even have the definition where it should be in terms of the drawing view itself.
So we need to change that because now our drawing view should be at the top of our linear layout.
So here, let's add help paint colors here.
And also, let's make sure that our image button at the very bottom, which was our selector, you can
see the image here is going to be top to bottom of the al paint colors.
So if you're top to bottom of El Al paint colors, and that should do the trick.
So now if we look at the design, we can see, well, it's it's barely stable.
There's just a little dot because our linear layout doesn't have any content yet.
So let's make sure that we add an image button in there, and I'm going to copy this image button in
here.
Get rid of all of the constraints change to ID to no idea at all, because I don't need an I.D. for
those image buttons.
I'll tell you why in a bit, and I want those buttons to be 25 density pixels towards both directions.
Okay, Lisa, much buttons with a little bit of margin.
I'm going to keep its two density pixel this time, and the image that I want to use is going to be
a different draw.
So I'm going to create a palette underscore normal.
So what is palette normal?
Well, let me quickly create a new resource for that because it will just be a new file that we're going
to create an image view that we are creating here.
So let's create that palette normal and let's design it.
So it's not going to be using a selector as the parent view.
It will be a layer list because I want to have a list of items that are layered.
And in order to achieve that, what I will need, first of all, is, of course, going to be the namespace
of Android.
OK, let me look at the code only and then let me.
Add the loyalist items in there, so how that works is inside of a loyalist, you can have multiple
layers and each layer is an item that you're creating.
So I'm just going to create a new item which will have a certain shape and this shape will be.
And let me put that inside of the opening bracket of the shape will be a rectangle.
So here shape, property, rectangle.
And then I want to have a stroke inside of it, and the stroke will have a whiff and not the color will
add the color in a second, but a width of two density pixels and then a color of a gray color.
So here hashtag FSF and then a couple of nine six nine, the total that will create the stroke for me
here.
And this will just be a great line.
OK, so it's a rectangle and has great line.
You can see that here.
That's the form that it has currently.
And then I will have another item in there.
So with a shape, so.
You see, we have a loyalist where we use two items and each of the items has a shape or is a shape.
And here I'm going to have a stroke with a width of two density pixels as well, as well as a color
of this great as well.
So I'm just actually copy this stuff here and then I want to have a solid background.
So the solid background should get a color.
We're going to overwrite manually.
OK, but for now, it's just going to be this color having eight zeros, which will just be black.
OK.
And I want to have corners.
So here corners with a radius of 10 density pixels.
OK, so this is basically going to be the structure here.
Let me clean it up a little bit here.
Get rid of unnecessary line breaks.
So here we have the list with an item and another item, and each item is just a shape.
And you can see that while I can barely see it here, but there's just this little corner around here,
and this is really just basically going to create this effect that you see here where we have a square
with a circle inside of it.
And yeah, that's basically it.
So that's what we created here at the Circle does look like a circle here, pretty much because of the
size that we have, because it's the same width and height for each of the individual items that we're
using.
So that's a palette normal.
But then there is also the palette pressed.
And by the way, what we can also do.
But in order to make sure that the padding is going to be zero towards all directions, we can add padding
zero dpi towards all directions like so because otherwise the thing is the padding could be ending up
by default being not zero, and that would create a way to distorted view.
OK, so here I'm just going to add padding being zero for the main item.
So for this first rectangle shape, and that is pretty much going to be it.
So let's go ahead and duplicate this.
This new resource trouble that we just created.
So copy paste give the second one the name of pressed.
You could also call it selected because this second one will just be the selected version of it.
And I want to make one small change here.
And that is that the color here will be a bunch of three or six threes after the double f's, as well
as here as are here at the bottom.
This will also be this color.
With six threes.
So the idea behind this is that this will create a different effect where we then see which of the colors
was selected.
OK, so it will be highlighted, so to speak, and that's what this palette presto should then take
care of.
All right.
So instead of our activity main, we can now use this palette normal.
And now what I want to happen is for every single item, I need to assign a tag.
So and by the way, is this the right I image for you?
It's fine here.
We don't need to fit, by the way.
That's just something we did for the image view that we created earlier.
And what I'm going to add here is the tag, which will be a color that I'm assigning to it.
OK, so I'm going to create a bunch of colors.
Let's go over to the colors XML file what you see.
We have a couple of colors by default, and I'm just going to add my own colors in here.
And this is really going to be the colors that we are going to use in our app could see that here we
have the skin color black, red, green and so forth.
And you can use the same colors if you want to.
You can, of course, also use very different colors.
OK, so just play around with the colors that you like and put them into your application.
Of course, you could go as far as adding a color picker where the user then can select a color from
a palette, but that is something that you would need to use a third party to.
For that, or I would recommend to use in third party API for that.
Either way, coming back to our activity made.
So now we have our first image button and now what we will need to change here is going to be to assign
a color because currently it has a tag that has a certain color, but the color of the button itself.
So the background of the button itself is not going to be that color, but we can do that so we can,
of course, assign the color.
So here at color and it was this yellow color.
OK, so this would be our first image button, and we're going to require multiple ones of those.
So let me add the second one or actually let me start in the same order that we have in our app.
So this one will be the color skin.
So the first one will be skin.
Then the second one will be black.
And we need to change that for the background as well as the tank, because we're going to use the tank
in cold than later in order to figure out which button or image button was pressed and the change to
color accordingly.
So the color of our stroke, because otherwise we would have to add IDs here and we would have to individually
create a set on click lists and those for each of those buttons and so forth.
But luckily, we have a good way around that and we'll see how to do it later.
So you will find another way of handling click events.
So that's pretty useful.
All right.
So then that will be read.
Yeah.
Another color that one will be.
Green.
And you see that using linear layouts, right, where items just are next to each other.
By the way, this is what we're getting as of now.
You can see it here.
OK, so this is the form that we are creating, by the way, this is what this pellet normal looks like.
All right.
So then we have green.
Now, let's add blue.
And for that color as well, for the background, then.
Let's use yellow at this point.
Well, we had it there.
We didn't have to add that.
And then I'm going to add the color lollipop in here.
Lollipop makes me think of a song.
OK.
Lollipop.
And then, of course, the final, which I'm going to call random, and we called this color random
as well, but it's going to be this purple color.
OK.
But later.
So you see here at random later.
What I want to happen is once we click on this button, it will just give us a random color.
That's the idea behind this button or this tag random or color random.
OK, so at this point, if we look at our design, you can see we have all of our colors in here.
OK, so how do we get access to these individual buttons?
Because it's, well, quite a lot to process there, and we have so many different image buttons and
we are not using their ID.
Well, the cool thing is we can use their position inside of a linear layout.
So a linear layout is basically being treated like a in a raid that we can access its indexes off.
So let me show you what I mean with this.
So I'm going to create a new variable, an image button, current paint.
So it's going to be a global variable, which is going to be of type image button.
And at the beginning, it will be now.
OK.
So then when we want to use it, and that would be, for example, inside of our own create where we're
going to set the default color at the beginning, I'm going to set up the AM image button.
Current paint to be.
Using our linear layout colors, so in order to use them, we need to make sure that we are preparing
the linear layout.
OK, so let me just quickly set that linear layout up.
So while linear?
Lay out.
And the name will be paint colors.
Will be found by outside.
And this time I'm going to use linear layout like so.
And I'm going to find it via all ID dot l l paint colors.
OK, so this will be the linear out paint colors, which is this entire linear label that contains all
of those colors, right?
It's this linear layout which, if you look at it, is on top of the image button, which contains all
of these different image buttons.
So this linear layout, all of that I would like to get the position one which will be black.
OK, so linear layout paint colors at position one as an image button because the thing is inside of
a linear layout, you can have all kinds of stuff.
And here what we're saying is we want to use the item at position one, but we want to make sure that
it's going to be treated like an image button, which two items inside of the linear layout are all
of them.
And at the same time, we need to import something, so here we need to import.
This view get Android core you get, which will now allow me to get a view inside of a linear layout,
and the view that I'm looking at is the image button at position index one.
So if we look at our activity maximal, what is index one?
So image button here this one with a skin color will be index zero.
And this image button here, which will be the black colour, will be index one.
OK, so that's what we are getting here.
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.
So here.
We can set the image drove all.
To be.
And human need to pass a drug bill that we want to use so we can get that from the context, compact
gets droll.
And we need to pass a context as well as the drug bill that we want to use.
So the job that I want to use is the pellet pressed.
OK, so what is the oppressed?
Well, it's this.
Layered item, this trouble item.
And what does that even mean like this press, let me show you real quick.
And I believe with one, it's not going to be super visible.
So currently black is pressed.
Let me select a different one and look specifically at how the red surrounding sort this gray around
the red.
So the palette looks like so.
Now if we select two now the red one is selected.
So you can see now here we can see that it has a different grayish color, which means that now it is
selected, even though, of course, the color itself is not set yet.
But at least we set the image view for that image button to be this double palette press.
So we overrode it from being the normal palette to be the palette pressed.
OK, so that's it for this video.
And yeah, that's it for this video and the next video, we're going to then implement how we can click
on those buttons and then accordingly change that they are pressed as well as make sure that the others
aren't pressed.
And also actually select the color so that we can draw with that color.
So see you, they.