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, uh, 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.
That's why it's 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 on.
Size changed.
So you can see there is this method called on.
Size 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 view class, right?
And as you know, our drawing view is inheriting from you.
So we can use its members and override 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 it was still null.
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 overloads.
Look at this create bitmap.
So there are a bunch of overlaps that you can use, and we're going to use the one where it has a bitmap
config.
All right.
So width, height and bitmap dot config.
So a configuration and you can use a configuration as you like, and I'm going to use Air G.B. eight
eight eight eight and you can see each pixel is stored on four bytes each.
Channel GB 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 colors, so to speak, that we want to be able to use.
So not eight thousand eight hundred eighty eight, but two hundred and fifty six possible values for
each of the three colors for red, green and blue, which ends up being multiple millions of colors,
right?
So a bunch of colors that we can use now.
And the next thing that I want to said 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 null type.
We need to use the double exclamation mark here because we just set it.
It's going to be fine because it's not null, right?
So at this point, our canvas is set as well as in remember, we also have this canvas, which was null,
and we still hadn't said 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 override fun on draw.
So this on drawn, it's a canvas on which it wants to write something or draw something.
That's exactly what we're going 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 will need to pass to admit that we want to draw on and we want to draw on our own commitment that
we created, which was called canvas, but map, and because it's another bill, we need to use the
ducks the nation mark, then we need to say at 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 straw bitmap, you can check out here.
What it does draw the specific bitmap with its top left corner at X and Y using the specified paint
transformed by the current matrix.
Motive to paint contains a mask filler that generates a mask, which extends beyond the bitmaps original
width and height.
OK, but we want to only draw on the original width and height.
OK, so that's what we're going to do here.
Now the thing is on draw, says your canvas, that it's going to be off canvas, Nullarbor.
But I personally want this to not be another Nullarbor.
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 a tier change canvas to canvas question mark if fails.
For example, we could then later on still check it.
But as it can seem, at least the compiler isn't complaining, so we can test it like that.
Of course, the alternative would be to make this one optional here or Nullarbor, because that would
work as well.
All right.
And then the next thing 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 she does not drop paint fraud path.
And here we need to pass a path and to paint.
So where do we get our path from?
Well, we get it from.
And draw path.
And where do we get our painful wealth from and draw paint?
Now the problem with those two is that their wealth?
No bubbles.
So we need to use double exclamation marks here.
Now the next thing.
But we definitely need to check if Andropov is not empty because if we look at it, it's a type custom
path.
But what if we didn't start drawing anything?
Well, what we can really make sure of is that our am draw path is not empty.
OK, not so the exclamation mark here to start.
Not Andropov.
That is empty.
All right, so only if that's the case, then draw something.
Now, the next thing we need to set is to stroke 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 two and drop paint.
Stroke with.
And it should be a draw path that rush thickness.
So as you can see here, the brush thickness of our custom puff.
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 draw paint.
Color is going to be under our paint path.
Color.
And each time I have to use these exclamation marks, because, as you know, Andrew Path is a Nullarbor.
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 her and drop her off, so we need to fill Dan drop
off, so to speak, with a path that should be drawn because otherwise on Draw does 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 on touch event functionality.
So UN Touch event, I could 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 value of where it was touched.
So even X.
And then a y value when he went, this touched.
So as you can see, they're motion events and they're Nullarbor 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 wasn't not another bill.
So they have edited it with the latest update.
So what?
What could be the case is that they have actually edited some more variables and made them numbers because
I think they're still figuring out how to use null votes and cut everywhere in the documentation or
in the whole quote that they have prepared in the 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 event here, right?
If you want to know more about motion event.
Just check it out, as you can see.
Motion event is a class which takes care of motion events, who would have known and the three events
that are important are action done.
So once we get with 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 is actually kept all motion event, but action.
And you can see there are a bunch of other actions, but the three are the most important one.
So action.
Underscored 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 no expressions here.
All right, so when we press on the screen, we want to set the agenda a path color to be the correct
color.
Then we want to set the Andropov thickness.
Brush thickness to be him brush.
Size.
And by the way, this is not the same as what we did here.
So here we're 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 out and drop half.
Move to touch and touch sex or to be more precise, touch sex and touch why?
And as we see here they are another bulls, right?
So they have this question mark when the motion event.
And that's why we have to force it here.
All right.
Because here at this point, we're saying, OK, there is actually going to be a touch event.
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, surround with Nalchik.
And the same for this one.
It's of Nalchik.
OK, so now it's only going to move to that spot if Touch X and Touch Y are not, no.
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 am drop have to be line to.
And here.
We do the same thing.
We used to Touch X and Touch Y.
And, of course, going to complain again so we can add null checks to be 100 percent certain.
And then finally, what should happen when we released the touch?
Well, we do with a again motion event.
Action this time it's action up.
So here again, Helen, the expression with and drop half being a custom path with the color.
And the brush size.
So then I'm going to add an default case here, so else, return false.
So for this when expression here, when 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 hold you if the Jew is visible and on draw will be called at some point in the future.
This must be called from UI threats to call from One UI thread.
You can alternatively use this post invalidate method.
All right, but we're going to use the 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 Hello World text you, I'm going to get rid of that and I'm going to
use my you dart.
And we are tutorials that kids drawing app drawing view.
And I can, of course, set all of the settings for our driving 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.
Lay out.
With.
Two 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 constrained
bottom to bottom of parent left to left of parent, right to right of parent and 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 there 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 are all going
to be a lot shorter.
But this is just the effort that we needed to put in to even see anything on the screen here, right?
Because our drawing view, it needed all of this set up 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 the canvas to be correct.
And of course, our set of 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
on 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've gained so far in the course.
So no worries there.
All right.
So now let's take care of the drawings or lines to stay permanently, or at least for the duration of
our activities lifecycle.
So see you in the next video.