Welcome back in this video, we're going to set up this little button here that allows me to then,
well, pop up this dialogue where I can select the size of the stroke that I want to use here.
OK, so this is going to be what we're going to built in this video.
So let's get started.
Therefore, I'm going to start with a new layout file, and here let's create a new new layout resource.
I'm going to call this one dialog on this core brush on this core size.
Okay, and we can use a constraint layout that's going to be fine.
Basically, what I want to have are three buttons that are on top of each other.
So let's go ahead and create that inside of our constraint out.
So I'm going to use an image button here, Mike.
So the width will be wrapped content in both directions.
And I'm going to give it an idea directing because I'm going to need to be able to access it.
I'm going to call this one image button or I underscore small underscore brush.
All right.
And what else do we need to have what we need to have a source and I'm going to use it.
Draw slash small.
OK.
And small doesn't exist, so we will need to create that.
And how do I do that?
Well, I can hover over it and created robot resource file.
And this one will be a shape route element.
You can just select that here directly.
So I want this to be a shape.
And how is the shape going to look like?
Well, let me get rid of this part here and then the shape.
We'll be.
Oh, well, OK, so here can, said Oval, which will make it an oval shaped now, let's change the
size as well.
So there is a size property that we can adjust, and I'm going to set the height to 10 density pixels
and the width to 10 density pixels also.
OK, so this will be the size, and then I'm going to make it a solid.
Background colour and the background color should be great, so I'm going to use five with a bunch of
sixes.
And of course, I need to add the.
Hashtag at the beginning, and this will basically create this small oval shape for us, which will
be an image, so it will be treated like an image.
Then there is a property that I will set here as well, and that is to devour property.
And with this property, we can enable or disable dithering of the bitmap if the bitmap does not have
the same pixel configuration as the screen.
So, for example, if it uses the Ogbe configuration, but then the screen uses an AGP configuration
or something like that, then it would automatically adjust the image accordingly so that it will work
properly on different screens.
So here, let's set that to true.
So we want to make it dither.
All right now, we can use that here for our image button.
And now let's go ahead.
And at the time constraints, because as we are inside of a constraint layout, we need to add constraints
as always.
And I'm just going to paste it in here.
Basically.
You can, of course, try to set them up yourself, but in the end, I'm just going to say I want to
constraint up to the type of parent left to the left of parent and right to the right of parent.
And actually, if you want to use the latest way of writing it, you can you start to start off and
here end to end of.
OK, and in order to use app, you need to add the namespace declaration here, XML namespace, app
schema and the or so.
Otherwise, this would not work.
Now this, of course, complaints because it doesn't know what the I.B. medium brush is.
So let's go ahead and create that.
And here this will be the medium brush.
And the median brush will have a couple of different properties, so here, for example, I'm going
to not used a small image, but I'm going to use the medium image and this medium image will be basically
a copy of the small one.
So instead of our troubles holder, we now have the small XML file, right?
So let me copy and paste it and call it medium.
The only thing that I'm going to change is going to be the size of the.
Circle.
OK, so let me set it up to 20 times 20, so now the circle, the medium circle will be bigger and all
its copy and paste this once again.
And like so and call this one large.
And the large option.
We'll just use 30.
Density pixels, so let's go in here.
Set that to 30 dpi.
And now it will be all the same image, so to speak, but with different sizes.
All right.
Let's go back to our animal farm.
So now we can use this drawing medium and this medium will be on top of the large brush.
OK, let's copy this image button.
Let's put it in there once again, let's call this one I.B. large brush.
Let's use the large image here.
And then accordingly, we will need to change it here, top to bottom off or bottom to top off.
What will that be?
Well, I'm actually going to say bottom to bottom of.
The parent.
So this one will be top to bottom of.
The I.B. medium brush, which basically means that this image button should be underneath the medium
brush button, which is why we need to set the top of this image button will be to the bottom of the
image.
Medium brush button.
Now we also need to make changes here, I believe.
So let me just make this clear.
So here.
Top to bottom of the small brush.
Yes, small brush like so.
And then.
Start to start off parent, just to the right that should also be to the parent.
Bottom should be to the top of the large button.
OK, that's fine.
And here just double checking the medium brush.
So.
Let's just see, I still have an error somewhere.
Well, it just says there are no errors, but there are other complaints you can see now.
It shows me those three buttons, which will be on top of each other.
OK, so this will be the dialogue, and now we can go ahead and use this dialogue.
In order to do so, I'm going to go to my main activity.
And as you know, the main activity is the screen in which we are displaying everything.
So we're displaying the drawing view inside of the main activity, but the main activity is still going
to be the screen itself.
So here let's go ahead and create the new method, which will take care of showing the brush size chooser
dialogue.
OK, so.
Thing is, I'm using the show keyword because I want to display it right and then the dialogue keyword
because this is going to be a dialogue.
And the rest here is just the name because it's going to be both specifically helping us to select the
brush.
OK.
The brush size, to be precise.
So if you want to create a dialogue and the dialogue is as we saw earlier.
This thing year this year is a dialogue, so it's like a pop up on the screen what a user can select
something.
If you want to set that up, you just need to create a object.
So I'm just going to give it the name brush dialogue, and it's always good practice to call it dialogue
while have dialogue in the name.
So in this case, it will be brushed dialogue and it will be of type dialogue.
So if you want to create a dialogue, you need to import the dialogue class here.
You see, it's under Android app dialogue and then you need to pass in that context and the which the
dialogue should be displayed.
And now you can just go ahead and give this dialogue a couple of properties.
So first of all, you can say how it should look like and how should it look like what we just set up
an entire dialogue layout just for that purpose.
So at this point, we're saying the dialogue should look like this.
OK, then we can set the title for this dialogue.
So set title, for example, and I'm going to say something like brush size, colon, empty space,
and then the user can select the brush size.
So well, we don't even see that.
But in other dialogues, you can display the title.
Then we're going to set the small button.
To be the brush dialogue dot Ibe small button or small brush, because what we want to be able is to
actually click on this button, so we need to create a connection to the button.
And now we can go ahead and use that small button with an on click listener because while it is a button
on the right, buttons are there to be clicked on.
So here I want to call the drawing view.
Dot set for price.
I have four brush or set size for brush like so and then I can set that to, let's say, in this case,
10 to float.
And this has to be like so.
Now, of course, the drawing view is invaluable, as we see here.
So we need to make sure that we.
At the question mark here, and then at this point, I want the dialogue to be dismissed.
OK, so what will happen here is I can.
Well, let's let's show the dialogue first.
So brush dialogue and let's show it back.
So OK, so this method now will display the brush dialogue and then it will show the dialogue at the
end after having set up all of the settings.
So here we are creating the button, which we then will call the size for brush method that we just
created last video where we set up the size being what the stroke width of our brush to be the brush
size that we have defined here, which is based on the dimensions and the metrics and stuff.
OK, so now in the mean activity, we can call this method because we made it public and we already
call the chair by default and we set it to 20.
So now let's go ahead and actually call this method.
Once we clicked on the button now, which button?
Well, the thing is we need to set up the button for that as well.
And where do we get the button from what we get it from our activity?
Main.
So here currently, we don't have a button in our drawing view, but as you see, we want to have a
button here at the bottom of the drawing view.
So let's go ahead and create a button inside of the drawing view, and I'm going to be specifically
using an image button here as well.
So image button and it will have the width of, let's say, 50 density pixels and the height of also
50 vancity pixels.
And I want to set the little bit of margin for it as well of five density pixels towards all directions.
Let's give this an idea as well.
I'm going to call this one.
I I b brush, so I be sending four image button and then.
Let's go ahead and give it some more settings here, so first of all, we need to use an image.
So I'm going to use an image that I have prepared here.
Now you can use whatever image you want.
But in my case, I have this image of icy brush, which is this little pixelated brush so you can download
the project and use that same image if you want to.
But it's really up to you now.
At this point, we can use the icy brush here.
So this image view that we have inside of our Troubles folder.
All right.
Now this by itself is not going to be enough.
I also want to set the scale type, so that is going to fit the X and Y values.
So it's going to be dragged and scaled accordingly to the screen size.
OK.
This by itself is unfortunately not enough.
We need to add the constraints.
OK, and I'm just going to add them in here.
So basically, it should be to the bottom of the parent.
It should be to the left of the parent and to the right of the parent.
OK, so this button should be at the very bottom and centered, so to speak.
So the constraints are to the left and to the right.
And if you look at the design now, you can see that here it is.
And then accordingly, I will need to make a change to my.
Drawing view here, otherwise I'll run into errors here, because now the bottom of the drawing view
will be to the top of the brush that we just created.
So to the eye b brush like so.
So now we can see the view.
It's not going to overlap with our image and we can see, right?
That's pretty much how it's going to look like here.
OK, now we need to add the listener and the button while we have the button that we can now go ahead
and start the dialogue, and that will be the main activity.
OK, so here we need to make sure that we get access to our image button and therefore we need to use
find few by idea again.
And that means that I'm just going to go ahead.
And therefore, I'm going to create a new button, so I'm going to call this one brush, which will
be of type button.
And she will need to import button.
Like so and this will be found by its ID, DOD I.D. and we call it I.B. brush and which button brush.
And actually, this is going to be an image button.
So let's use image button here as well.
Let's import image button instead of button so I can get rid of that.
OK, so I said it would be a button, but it's actually an image button because if we look at it, this
IP brush and the code, you can see that's the view type image button, and therefore we need to follow
the structure.
So now we can use this image button brush to set an on clip and listen there for it and then show our
brush size chooser dialog.
So let's just test this and see if this is going to pop up.
We can see the UI works now.
Let's click on it.
You can see the dialog opens up and it's click on the small size and you can see now we have the small
size.
All right.
Now let's set up the same thing for the other ones.
And by the way, I'm using an approach here, which works.
But if you want to be really sure here, you might have to actually set the button based on fine view
by ID.
OK, so the small button is in fact brush dialog dot IBBI small brush.
But if you want to make it super safe, so to speak, you could go ahead and say This is going to be
a brush dialog dot fine view by ID.
And this will be of type image button.
All right.
And then here you use our Dot ID dot.
And it was IBBI small brush, I believe I'd be.
Small brush like so OK, so this is for the small button, and then we can use to unplug listener here
with our drawing view and we're setting the brush size.
Now we need to do the same thing for the medium button because currently, if we test our application,
we can see that the medium button doesn't do anything.
The small button, however, does make a change.
So clicking on the medium button, you see the brush dialog is never dismissed, so it's on the screen.
But luckily, Android has set up this feature where dialogs can just be dismissed by clicking next to
them.
But you see, this is what this brush dialog dismissed us.
It dismisses the dialogue once we have selected a brush size.
So let's go ahead and set that up for the medium button.
So here I'm going to call this one medium button and we want to use the medium brush here.
And then accordingly, we want to apply this on Click Listener for the medium button.
We want to set the size to 20.
And now let's do the same thing for the large button also.
So here we need to change that to a large button, according to hear the click listener as well.
We need to change this to the large brush and accordingly, we need to change the size of water brush
to be 30, for example.
So now let's test this again and see if we can actually dismiss and select different colors.
So let's click on the large one you see.
We have a large brush here.
Let's pick the small one.
This small works and you see each time that the brush dialog is also being dismissed with this brush
dialog.
Dot this method.
All right.
So at this point, you have already a drawing app, which you can now use to while drawing different
sizes, which is amazing.
And now you could, of course, add a lot more options here, like you could have like 10 or 15 different
options, or you could even have a selector what a user can scroll to the left and right in order to
change to size and then just set the value based on whatever is pushed to this set size for brush method.
So you really have a lot of options here, but I'd say this is it for this video and in the next video,
we are going to go ahead and set up the.
Colors.
So where we can select the different colors to choose from and then change the text color or the drawing
color.
So see you there.