Welcome back.
By the end of this video, we are going to have this little button here at the bottom, which allows
us to select different thicknesses for our application here for our stroke.
So you can see I can have a very thin line.
I can have a very thick line and a medium one, which was this 20 TPE that we saw earlier.
All right.
So I'd say let's start implementing that.
And the first thing we need to do is to create a new layout.
So I'm just going to create a new layout Rizos file and I'm going to call this one dialogue on the score
rush on the score size.
And everything else can stay the same.
So this precise example should take care of this plane, the three buttons, so this should be the dialogue,
right?
So if you want to create a custom dialogue, as I did, now you need to create a custom XML file and
in a custom XML file, you can now design how it's going to look.
All right.
So as you can see, it has a with a height of match parent, which is fine, then the XML namespace
is in there.
But what I also want to add here is the gravity.
I want it to be centered.
So Android gravity and it doesn't accept it directly.
So I need to enter manually Android gravity and then the orientation which I will set to vertical.
So then in there I would like to have image buttons and to be precise, I want to have reimage buttons,
one for and small brush size, then one for the medium and the last one for a large one.
So I'm going to create an image button and to what should be wrapped content.
So it should only take the space that it really needs.
I'm going to give you an idea.
So I'm going to say that it should be IBM, which stands for Image Button, small underscore brush.
And of course, this image button needs to be close at one point, so I'm going to do that there as
well, then that image button needs to have a source.
And before I add that, I'm going to add a contact description, which is just going to be image underscore
small.
So this will be the text that will be displayed or will be read to people who will see.
And then I need to add a source.
So the source that I'm going to use here is drawable, and I'm going to call this one small.
And as we had last time, this doesn't exist.
But I'm going to add that later on.
And then I want to say where it should be.
OK, where this thing should be.
But we need to add that in a second.
Let's first add this small thing.
OK, so hover over it and then create trouble resource file called small dot example.
And I'm just going to leave it as it is, even though I'm going to change it straight away.
So it's not going to be a selector that I want to have here, but it's actually going to be a shape.
So let's change that to shape.
And here I'm going to set the data to.
True.
So this was the shaking finger and then the shape to oval.
So I want to have an oval shape, which means it's going to be a circle in the end because I said the
width and height to be the same.
So I said the size property to your height being ten density pixels for the small one right there in
the small amount and the width to also ten density pixels.
And then I want this to be a solid color, so I want to set the background here, which will be a color.
Of course, you could create a new color property for this.
But I'm just going to keep it simple, because I'm going to use this gray color that you can see here
at the left hand side again.
So if you look at the design, this is how it's going to look.
So if you ever wondered can split here, you can see ten times 10.
So it's an oval, which is actually a circle because height and without the same and then just great
color.
All right.
Now that I have small smell and I need to close it here as well.
So that made it real quick so that it stops complaining here.
Now, I can go ahead and.
Reproduce it, so copy and paste it duplicated, so to speak.
All right, so I'm going to use copy and paste here on the small one copy paste, and I'm going to change
that to medium and then I'm going to copy paste that one as well.
And I'm going to change that to large.
Now, the only difference between small, medium and large should be the width and height.
OK, so for medium it should be twenty twenty and for large it should be thirty 30.
Of course you can also create dimensions, file here and store the dimensions in there so that you can
change them any time.
But I'm just going to keep it simple for now.
All right, now that we have that, we can go back to our dialogue, brush aside, for example, because
in there I wanted to have three images, right?
So I have this image button and it's still complaining because it doesn't know what the constraints
are.
So you can see here it has missing constraints.
Now, what I can do is I can go ahead and add another image button underneath it.
And of course, I'm going to change the name here to medium brush and it should use the image medium
here.
And now.
What's also important is that.
We change the travel to medium, but what's even more important is the actual constraints because it's
still complaining and if it's complaining, we need to change something about it.
And what you can do here is you can add the constraint to top of constraint, bottom to top and so forth.
So I'm just going to paste it in here because I think it's a little boring to watch me type for ever.
As you know, I've prepared all the code, so I have this layout.
To top off parents to or to the left of parents, to the right of parent and then the bottom to the
top of the medium one.
All right.
So I have one too many, one closing Prickett.
And in my case, it even complained about this, even though it's going to work so I could see what
I just did is I just created the layout here for any of them to lay out constraint thingy here, baseline
to baseline or bottom to bottom.
So any of them.
And as you can see, once I added them.
The herher disappeared.
So this is a weird area that still appears, but, well, it's not there anymore in our case now.
OK, so the next thing I want to add, of course, is to have the same thing for now.
You're not being medium brush, but large brush.
So that should be at the bottom, should be the top at the top of the large brush here.
All right.
So I can get rid of this here and I can copy and paste the whole image button.
Of course, we need to change it to a large brush.
The image should be the image large as well as the drawable should be the large image.
And and then here we have to be very careful with the the reactions here.
So this one should be at the top of your to the bottom of.
And it should be to the bottom of the small brush, so then we have to be careful with the positioning
here, because if we do it incorrectly here, then our whole program could crash.
So here we need to be careful.
So what I'm going to say is constrained top to bottom off.
And here is not going to be the parent, but it's going to be at idee, medium brush.
And then here at the bottom bottom to.
Bottom off, and it should be to the bottom of the parent.
OK, so which just means that at the bottom of this image button, there should be the parent and on
the top of the button should be the median brush.
So the medium brush shows bottom is at the top of our image button, which is the image button large.
And I have to double check here because.
There is something incorrect about this one as well, so here it should be the same concept.
So to bottom of the small boat or a small brush spot.
So now this just means that our medium brush should be between the small brush and the large brush.
The large brush should be underneath the medium brush and the small brush should be on top of the medium
brush.
So if we look at the design now, we can see that we have those three buttons here, the button, one
button to add button three.
So now, of course, we need to open up this dialogue, brush size XML and we can add it to our activity
in XML.
And to be precise here.
Instead of two top of parent outdrawing view we want to have.
Our brush rush the brush.
Now, what is this I.B. brush?
You might wonder?
Well, it's an image button that I want to add underneath my drawing view.
All right.
So I'm going to add another image button here.
The image button.
With a width of 50 density pixels and a height of 50 density pixels, and it's going to have the idea
of I.B. brush.
So this one here, so it didn't even recognize correctly or in time, I even fixed it before it recognized
that this thing didn't even exist.
OK, so this image button, of course, needs a background, and I'm going to use a source here as our
see at drawable.
And now this image doesn't exist yet.
So we need to add an image here.
Now, of course, you can go ahead and download the project.
And in there, you will find a file in the drawable folder, which is called Icey Brush, and I'm going
to drag it into the drawable folder here.
And as you can see, it will automatically be added.
And now I can select it.
I see brush.
Now we need to give some more settings here to our image button, so I'm going to add a constant description,
which is going to be Prush image.
Then I'm going to set the scale type to fit x y.
So it should just fit into whatever we set as X and Y values, so with the tonight and in this case,
it's just going to make it a square.
Of equal sizes or equal borders and then later hold margin and want to have some space in between.
So I'm going to set up to five density pixels and now we need to look at the positioning.
OK, so I'm just going to paste it in here so you don't need to watch me type.
As you can see, layout constraint left to left of parent, right to right of parent and bottom to bottom
off parent.
So this thing should be at the bottom of the screen.
So if we look at our design, you can see here does this where our button will be?
It's a little small here.
So let me get rid of this.
You can see here is where the buttons should be.
All right, so this by itself is, of course, not going to cut it.
We, of course, need to at one point display this whole thing, right.
So the image button is going to be there.
But we want to display this pop up here, this dialogue brush size.
So in order to do so, we're going to go to our main activity.
And in there, I'm going to create a new function.
So I'm going to write a private function, which I'm going to show, call, show, brush size, choose
or dialogue.
So in there, I'm going to create a new variable called brush dialogue, which should be a dialogue
with this context.
And of course, we need to import it.
So I'll shift enter.
In order to import this dialogue.
Glozier.
Next, I need to set variables of this brush dialogue so the dialogue has certain variables that we
need to set, for example, the content view.
So what should be displayed in there or what should be the layout that we're going to use?
And it's going to be our dialogue, dialogue, brush aside that I want to use as the content view of
our dialogue and then I need to set its title.
So brush dialogue that said title.
So each time that you want to go ahead and create your custom dialogue, you can of course create the
XML file.
And then what you need to do is you need to create a dialogue like we see here.
You need to pass the context in which it should be displayed.
And in our case it should be displayed in the context of our main activity.
Then you need to set the layout that you want to display the title that you want to display as well.
So I'm just going to call this one brush size.
And then you can go ahead and add the different buttons so each of the buttons, when we click on them,
they should do something right, because if we look at our dialogue process, we have an image button,
we have another image button.
And the third one, they all have names.
Right.
So what I want to do is I want now to.
Give those buttons a value, so I'm going to say Volke small button, it was brushed dialogue that be.
Small brush.
All right, so this value should be the small button, and if one clicks on the small button, which
is actually an image button to be more precise, and we use set on Click Listener here in order to.
Run something.
So what is the code that I want to execute in here?
Well, as you can see, there are multiple One-Click listeners that we can choose from.
I could see one with you on Click Listener and then one with view, and I'm going to use the one with
that's where curly brackets here.
And I'm just going to say that the drawing view that set size four brush should be set to tend to float
and then brush dialogue, dismiss.
OK, so the idea here is once we click onto the small button, the dialogue should disappear.
But at the same time, the size of the brush should be changed to, for example, 10.
As you can see here, it's still complaining.
So there are multiple cluelessness that I can choose from and I want to actually choose the second one
here.
So what I'm going to do is I'm going to change up the code a little bit.
This is supposed to be in there like that.
So what we can do is we can actually check.
If this is going to work, but before we do so, we, of course, need to call this function here.
So what would be a good point to call this well and uncreate?
So I'm just going to say here, Ivy Brush set on Click Listener and in there it should just call this
function here, should brush or brush sides, choose dialogue or choose a dialogue so that we can see
if the small button works before we implement the other buttons.
But before we can do so, you can see I'm getting a little Android source, a link, so that's what
I was talking about.
You have to be super careful here because it says it cannot be at the top of the eye brush.
Because actually, the bottom is at the top of the ivy brush, so bottom is at the top of at idelalisib
brush, and then there's one more thing that we need to add, and that is to add a little bit of space
for our image button there at the bottom, because currently we have no space for it at all.
Only five density pixels, actually.
So what we need to change is we need to add a layout margin bottom here of at density pixels, and then
we need to make a change here because now currently as at the bottom of the bottom, and it actually
should be a top to top off parents.
This is something that is really tricky about these constrained layouts because they are really nice
when you want to drag something together and drag it onto the screen and see if it looks good.
But they become very complicated when you actually write the code for it, it can be very confusing.
So in this case, just follow along with the specific examples that we have here, but otherwise you
really need to look into that and really think, OK, where is stuff?
So where is our element positioned in comparison to its parent, in comparison to other elements on
the screen and so forth?
All right.
So in this case, it has top left, right and bottom.
So it has to have all those four if they are not specified somewhere else.
So here it's not necessary because we already say that this drawing view is going to be at the top of
our IDE brush, which is this image.
But.
All right.
And then there is one really last thing to do, and that is to actually show this dialogue so rushed
dialog that show.
So we need to go back to our main activity.
And in our show, brush sides choose or dialogue.
That's where we need to display the brush dialogue.
All right.
So now let's see if it's actually going to do what we want, if we can change the size of our brush.
So I'm going to make one stroke here and then I'm going to change the size to this thin one and it's
working.
So the problem is, of course, that the other two are not working.
So let's implement those as well.
And I'm just going to paste two buttons here.
So this one will be the medium button.
And here it should use the medium brush.
And then the size should be 20.
Of course, you could create additional dimensions for this, so in the values folder, you could create
Dimond's file where you stored the thickness and this one will be the large button.
So here it should also be the large brush.
We're going to use and of course, the buttons should be larger.
And then, of course, we need to replace the part.
So we're doing this on listening from.
So now let's test the application again.
Now, a fixed rope that's test a medium one and the middle.
At the small one, OK, small one seems to work.
Let's look at the medium one, the medium, it was the 20.
Now let's look at the thick one.
OK, so the general one was, of course, the 20.
But now you can see it's all good.
It's working.
So we have this little smiley with a little knife.
And his hand.
All right, cool.
So that was it regarding the brush sizes.
It was a long one because we needed to implement a lot of code, as you can see.
But now you can select the different sizes and you know how to use a bunch of new stuff.
So see you in the next video.