Welcome back.
And this video, we are going to get our app to the point where we can finally draw on the view and
because we are going to draw on the view, I also have The View class opened here and documentation.
And that is something that I highly recommend you to do as well, to check out the documentation each
time that you want to know more about a class and more about its different members.
So, for example, we have this class view and as you can see, it's a long file and a very long website.
The slides took it took so long to reload it when going from Java to Scotland.
And you can see here probably constructors and all those kind of things.
So a bunch of stuff that you can set in a view.
All right.
And what you can check here is a method that we're going to use, which is called onsides changed.
So you can see there is this method called ANSYS changed.
And here it says this is called during layout when the size of the view has changed.
So in here, we can create a bit bitmap.
So when the size of the screen is changed, we want to display the bitmap that because it will require
something to be displayed on our view.
And what we want to display in there is our canvas.
All right.
So let's have a look at that.
Let's create or overwrite this on size changed so you can see we can overwrite this function because
it exists in the UCLASS.
Right.
And as you know, our drawing view is inheriting from you so we can use its members and overwrite them.
That's what we did here.
So what I want to said is I want to set my canvas bitmap because you maybe remember we had not set that
one yet.
So still now.
So now at this point, I can set it.
I can just say create a bitmap with a certain with a certain height and a configuration.
So if you look at it, there are so many overlord's to get this create bitmap.
So there are a bunch of overlord's that you can use and we're going to use the one where it has a bitmap
config.
All right.
So with height and bitmap dot config, so we configuration and you can use a configuration as you like
and I'm going to use a B eight eight eight eight.
And you can see each pixel is stored on four bytes each channel, RGB four and Alpha four translucency
is stored with eight bits of precision.
So that's what we're using as the configuration for our bitmap.
So this is the amount of colours, so to speak, that we want to be able to use.
So not 8888, but two hundred and fifty six possible values for each of the three colours for red,
green and blue, which ends up being multiple millions of colours.
Right.
So a bunch of colours that we can use now.
And the next thing that I want to set here is to use this bitmap as the canvas bitmap.
All right.
So or as the canvas, to be more precise, I'm just going to use the canvas and year to canvas.
You can pass a bitmap or you have to pass a bitmap.
So I'm going to pass my canvas bitmap here because canvas bitmap is a no type.
We need to use the double exclamation mark here because we just said it.
It's going to be fine because it's happened.
Right?
So at this point, our canvas is set as well.
As I remember, we also at this canvas, which was null and we still hadn't set it because instead of
drawing, we didn't set it.
So we set it each time that the size has changed of our screen and it is called once the screen is inflated.
So once it's displayed, so to speak.
So once our view is displayed, our drawing view.
All right, the next thing that we need to add is what should happen when we want to draw.
And there is a specific.
Method for this, it's called on draw.
You can see overwrite fun on draw.
So this undrawn, it's a canvas on which it wants to write something or draw something.
That's exactly what we want to do.
We want to draw something on our canvas and what we need to do in here, in our canvas here.
We can go ahead and.
Set the canvas to be or to call draw bitmap.
Then we need to pass the permit that we want to draw on and we want to draw on our own bit, not that
we created, which was called canvas bitmap.
And because it's a nullable, we need to use that information, Mark, then we need to say it which
position we want to start.
And I'm going to say at zero zero.
So I want to start at the top left corner.
And finally, I'm going to pass and canvas paint.
All right, so if you're wondering where are all these values from, you can, of course, always check
out the documentation.
So either on the website or you can open it from here.
And if you want to know more about TROL bitmap, you can check out here what it does to the specific
bitmap with its top left corner at X and Y using the specified paint transformed by the current matrix
out of the paint contains a mask filler.
It generates a mask which extends beyond the original width and height.
OK, but we want to only draw on the original width in height.
OK, so that's what we're going to do here.
Now the thing is on drawing, says your canvas, that it's going to be of canvas nullable.
But I personally want this to not be a nullable.
OK, so I'm going to get rid of this question mark here.
And if it creates an error, we can fix it because.
We can add something like I here change canvas to canvas, questionmark fails, for example, because
then later on still check it.
But as you can see, at least the compiler are complaining so we can test it like that.
Of course, the alternative would be to make this one optional here or nullable, because that would
work as well.
All right, and then the next thing that we need to draw is our path, because that's what the path
is for, right?
So we created this path.
So canvas that draw path.
And, you know, draw paint, draw your path, and we need to pass a path and to paint.
So where do we get our path from?
Well, we get it from and draw a path.
And where do we get our painful wealth from and draw paint?
Now, the problem with those two is that they're both.
Multiple bubbles, so we need to use double exclamation marks here.
Now, the next thing that we definitely need to check is if dropoff is not empty, because if we look
at it, it's of type custom path.
But what if we didn't start drawing anything?
Well, what we can really make sure of is that our drop path is not empty.
OK, not so the exclamation mark here to start, not Andropov dot is empty.
All right, so only if that's the case, then draw something.
Now, the next thing we need to set is to strike with that we want to draw with because we set the width
of our brush size or we set the brush size here, but we need to actually say how thick the paint should
be.
And here we can set that, too, and draw paint.
Stroke with.
And it should be and draw a path that brush thickness.
So as you can see here, the brush thickness of our custom path.
Because Andropov is of type, custom part, that's why we can use the brush thickness here and now,
the next thing is we also want to set the color of our custom path.
So I'm dropping paint.
Color is going to be under a paint path.
Color and each time I have to use these exclamation marks, because, as you know, I'm path is a nullable.
All right, so now we have what should happen when we draw, but when should we draw?
Well, I want to draw something.
When I'm touching the screen, so what we actually need to do is we need to change the Andropov, so
we need to fill the Andropov's, so to speak, with a path that should be drawn because otherwise Andrle
doesn't have anything to do because Andropov is going to be empty.
So there's nothing in there.
So what you see here is I'm checking if it's empty.
I'm not checking if it's not.
So what we need to do is we need to implement the on touch event functionality.
So on touch event, I can see there is a function here.
We can override it and here we can.
Now go ahead and start.
Saying what should happen when we touch it?
So what I'm going to have is a variable which is going to store the X value of where it was touched.
So event X.
And then I will tell you when the event is touched, so as you can see, the emotion events and their
nullable here.
So I'm just going to add the question marks here, of course.
So this is something that has been added, actually, while I was recording or while I was preparing,
because before that motion event in this case was not a nullable.
So they have added it with the latest updates.
So what what could be the case is that they have actually added some more variables and made them nullable,
because I think they're still figuring out how to use Nullable and Cottan everywhere in the documentation
or in the whole code that they have prepared in their libraries.
Right.
So it's going to take a little while until their final version will be out.
So the next thing is we have multiple actions that can happen.
So Event can have multiple actions.
And this year.
Is very generic, it's always the same three things that you have when it comes to motion events.
All right.
Because we're using motion events here, right.
If you want to know more about motion event, just check it out, as you can see.
Motion event is a clause which takes care of motion events who would have known and to the three events
that are important, are action done?
So once we get put our finger on the screen, then action move.
Once we drag our finger over the screen and action up the moment when we release the touch.
So when we lift our finger, so to say, all right, so these are the three motion events that we have.
So here motion and it's actually capital motion event that action.
And you can see there are a bunch of other actions, but the three are the most important one.
So action.
Underscore down.
So what should happen when we.
Press onto the screen and as you can see, we're using an expression here, you maybe remember what
this is, it's a lambda expression.
So he's in lambda expressions here.
All right, so when we press on the screen, we want to set the agenda half color to be the correct
color, then we want to set the Andropov thickness.
Brush thickness to be him brush.
Sighs And by the way, this is not the same as what we did here.
So here we actually said how thick the paint should be and here we're saying how thick the path is.
It's two different things.
It's not the same.
And then we reset whatever we had.
So clear any lines.
From the and curves, from the path and making it empty and then we move our path.
Move to touch Y and touch X or to be more precise, touch X and touch Y, and as we see here, they
are knuckleballs, right?
So they have this question mark when the motion event.
And that's why we have to force it here.
All right.
Because at this point, we're saying, OK, there is actually going to be a touch, even if you want
it to be 100 percent sure.
Of course, you wouldn't need to add an if statement around it.
So double checking.
OK, so alternatively, you can also.
Uh, run over it, Sarabeth with Nalchik and the same for this one.
It's from Amalric.
OK, so now it's only going to move to that spot if touch and touch.
Why are not now?
All right, so this is what should happen when we have the action down.
Now, let's add the motion event.
But action move.
So this one here, what should happen when we drag over the screen?
Well, then I want to set my moral path to be a line to.
And here.
We do the same thing.
We said touch X and touch Y.
And of course, it's going to complain again so we can add no checks to be 100 percent certain.
And then finally, what should happen when we released the touch?
Well, we do it again, motion events.
Action, this time it's action up.
So here again, a lambda expression with and drop half being a custom path with the color.
And the brush size.
So then I'm going to add in default case here, so else return false.
So for this when expression here went even because as you saw, there are a bunch of other motion events
that are possible.
I'm just going to say for all the other ones, just return false.
So don't do anything.
All right, and then there are two more things left to do here, otherwise I'm going to return.
True.
So if none of the cases is the case, then it's going to return.
True.
But just before that, I want to invalidate.
So now what does invalidate do?
Well, you can hover over it, click on it and you can see.
Invalidate the whole you, if the view is visible and on draw will be called at some point in the future.
This must be called from your threat to call from the nuclear threat.
You can alternatively use this post invalidate method.
All right.
But we're going to use to invalidate method.
All right.
So now we have prepared this view and it took us quite a bit.
Right.
But we still wouldn't see it.
So we still need to add it to our activity main.
So here, instead of having our helliwell TextView, I'm going to get rid of that and I'm going to use
my you dot.
And we are tutorials that kids drawing up drawing view.
And now I can, of course, set all of the settings for our drying view, so first of all, I need an
ID and I'm going to use the ID drawing on the score view, then I'm going to set the layout with.
Layout's.
With.
To zero density pixels, layout height.
To zero density pixels.
And then some constraints.
So I want this to be in the middle of the screen, so I'm just going to use all of the loud constraint
bottom to bottom of parents, left to left of parent, right to right of parent, on top to top of parents.
All right, and once all of that is done, we can finally check our application and see if it's running
and if we can finally draw something on the screen.
So that we are let's see.
And as you can see now, we can draw on the screen.
All right.
So this was quite some work, but I promise you that the other features will come a lot quicker.
So it's going to be a lot easier to add all the new features in the next videos.
And they're all going to be a lot shorter.
But this is just the effort that we need to put in to even see anything on the screen here.
Right.
Because our drawing view, it needed all of the setup in order to do anything.
All right.
So this untouched event, for example, we needed to implement that to even print anything on draw in
order to draw something on the screen, on size change to even just set to canvas to be correct.
And, of course, our set up drawing in order to set up all of the variables that we have prepared.
So now a very important aspect that I need to talk to you about is that you wouldn't have to come up
with all of this stuff by yourself and you wouldn't know all of these things.
You would build up step by step.
So you would check out some documentations, then you would check them some tutorials, and then you
would step by step build this.
So this is not something that I would expect you to be able to build already with the knowledge that
you have gained so far in the course.
So no worries there.
All right.
So now let's take care of the drawings or our lines to stay permanently or at least for the duration
of our activities lifecycle.
So see you in the next video.