Welcome back.
In this video, we are going to start with our kids drawing up and therefore we are going to build the
first feature, which is to draw something on the screen.
And I would always try to start with the main feature because building the main feature already gives
you this sense of accomplishment.
And you actually can see something like in this case, I can already start drawing something on the
screen, which is pretty cool, even though it is not persistent, which is no problem.
We are going to take care of that in the next video, but for now we will see how we can draw something
on the screen.
Therefore, let's go ahead and create a new project.
So create a new project and there please select the empty activity.
So.
Create a new project with an empty activity press next and call this one as you like, but I'm going
to call this one kid's drawing app.
Then as you can see, I'm using the API 21 version and everything else is default so we can click finish.
The first thing I do once the project is loaded, I go to the manifest because what I want to do is
I want to change the orientation or fix the orientation of this app.
And I wanted to constantly be portrayed.
So I'm going to add Android screen orientation and here I set it to portray it.
So I think that creates a little error, or at least it's complaining here.
But I'm just going to keep it as that because it's still going to work.
So what this will do is it will set the screen orientation to always being portrait mode, even if we
turn around the iPhone.
So it will not change the orientation.
And this is very helpful, especially because then you don't need to make your UI flexible, especially
with this example that we're going to use here where we are going to work with views.
It's going to make our life a lot easier.
So we're going to keep it at that for now.
You will later on see how you can create apps that will easily scale and work perfectly in different
orientations.
But we're just going to keep it simple and use Hawtrey only now.
Next thing we need to do is we need to create another class in here.
So I'm going to create a new kotlin class and I'm going to call this one drawing view.
And it's going to be a class.
All right, now, this drawing, you will need to be extended quite a bit.
So the thing is we are going to use this as a view.
So we're not going to use this as an activity, because if we look at it, this year, for example,
is an activity which is inheriting from combat activity, which contains a lot of functionality that
we can use, for example, uncreate, which takes care of whatever should be displayed straight when
their activity started.
And in our case, it's just going to use this activity main XML file, which we have.
Right.
So this fine file here and now what I want to do is I want to create a class which will be visible inside
of this main activity, but which we will define as a view.
So you will see the power of use once we get there, because the thing is, usually you have a UI where
you have a bunch of buttons and text views and those kind of things, that that's great for an activity.
But if you want to draw something, then you need to do that on something that is of type view.
All right.
So that's why we need to go ahead and create a class which will inherit of this class called view.
All right, and when we want to inherit from you, we, first of all, need to import it.
So here, hover over it, import.
And then we also need to pass the right variables here, so I'm going to pass.
Context and attributes, or at least I'm going to create those parameters here in the definition, once
we've done it, we are going to add a primary constructor to our drawing view class.
So, first of all, I need to pass a context when creating a drawing view.
Then I want to have the attributes which will be of type attribute set so I can pay a person some attributes.
As you can see here, it's expecting attributes.
So we need to import this class here, attributes set and we need to import context here as well.
So you can see Android or content or context and Android or Dujayl attributes set for those two classes
that we are using here.
And then we can use this.
All right.
Now, we can use this view.
As you can see, we're not getting any complaints anymore.
We can go ahead and create all of the variables that we need, all of the methods that we need and so
forth.
So what we want to do with this view is we want to be able to draw on it.
And if you want to draw, then you, first of all, need to know what type of color you want to have,
what kind of paint you want to have.
So paint is not really a color itself.
It's really a higher level class, which we will create and paint class that holds the style color information
about how to draw geometry, text and maps and all those kind of things.
We're going to use that.
Then we going to use a bitmap that we can draw on.
Maybe you have worked with bitmap before, which is a file type and it's the same kind of concept way
of a pixel by pixel image.
And we need to know the thickness of the brush.
We need to know which path we want to draw all those kind of things.
And when we need all of those, it's a good idea to create variables for them.
All right.
So let's go out and do that.
Let's create a private variable here called and draw path.
And that one will be of a custom path type.
So what is custom path?
Well, custom path is a class that we need to create because it's not available here.
So I'm going to create a class called Custom Path and I will create it inside of my drawing view.
So it's going to be a nested class, as you can see here.
So it's a nested class.
But I actually wanted to be an internal inner class.
So this custom path class should only be usable within my drawing view.
And I wanted to have access to its variables back and forth.
But the only thing that I really need to do in here is I need to.
Follow a certain structure.
So this custom path would just be of type path.
All right.
So there is a class called Path and I wanted to be of type path, so I need to import path here as well.
So import path.
And here we're using Android graphics.
Because of different types of classes, so we're using the one from the Android library and then I need
to say how I want to extend that path and how I want to do that is I want to use that extended by a
variable of type integer, which I'm going to call color, and another variable called brush thickness,
which will be of type float.
All right, so this is our inner class here, which are made internal and it's called custom path and
it's of.
Now, if you want to know more about path, you can keep the control key click and then click on Path
and that will then open up the path class here.
You can see that if you look at it here, the path class and capitulates compound multiple controlled
geometric paths consisting of straight line segments, quadratic curves and Kubic curves.
It can be drawn with canvas draw path either filled or stroked.
OK, so you have here different options, how you can draw it and you could see you need to draw it
on a canvas.
All right.
And so we need to use a canvas at some point.
All right.
Going back to our drawing view now, we have this class and we're going to use it later on.
We also have this object of this class that we created and it's a nullable.
So we have a question mark after it.
And now we need to think about all of the other variables that we need to create.
All right.
So when you built this yourself and you have no idea how to build it, it would usually always check
out some documentations or you would check out some tutorials on the Internet or websites.
Would you have done something very similarly and then you would go ahead and build that?
And I myself also got inspired by seven Soulsville or Sylvaine Surrell.
How are you going to pronounce it?
And he created it with Java.
So he created this little drawing app with Java, creating a bunch of stuff and his code is a little
more complicated than what we are going to build.
So you can check out this document here.
You can see this is what he has built, but we're going to build it differently.
As you saw, the final result is a little different, but in the end, it's going to be highly inspired
by his work.
OK, so this is something that you would usually do.
You check out, OK, where can you find something on the Internet?
And if you build something completely new, then you need to break it down to the different aspects
that this app has and then find tutorials on the different aspects or see if you can find a third party
library which will help you to build something.
All right.
So you can see he has some features that we're not going to add, but we have some features that he
doesn't add.
So if you want to have a blur mode or a ambo's mode, then you can get inspired by this tutorial.
All right.
Coming back to our example here, as I told you earlier, we are going to need a bitmap.
So I'm going to create a private variable called M Canvas Bitmap, which will be of type bitmap nullable.
And I'm going to set that to know.
So as you can see now, I will need to import bitmap here because it's, again, another class that
we are using and it's within the graphics library.
Then I will need to have a paint, so I will need to paint class that holds a style color information
about how to draw the geometry text and bitmap.
OK, so go ahead and create a private var.
And draw paint, which is of type paint nullable, and I'm going to set that to another as well.
So you can see we have a bunch of variables that are null at the beginning and which we need to import
here the types of and we will need to set them once we initialize our drawing view.
OK, so once somebody creates a drawing of you, well, we need to initialize all of those variables
because we're going to need them.
And then I have another private variable here, which I'm going to call canvas paint, which is also
of type paint.
And I'm going to make this a nullable as well here.
And this should be the instance of the canvas paint view.
All right.
Next, I need to know how thick the brush size should be.
So I'm going to create a variable here, private bar and brush a size which is of type float.
And here I set it to zero to float.
All right, so it should just be the thickness of nothing, so I'm just going to set that to zero straight
away and then I need the color with which I want to draw.
And I'm going to start with the color black here.
Keep it super simple, like color at the start.
And later on, we will see how we can change that.
Now, at that point, you can, of course, go ahead and check out what a bit Mados.
You can see all of the functions that it has.
As you can see, it has a bunch of functions and over 2000 lines of code.
Then you could check out what the paint is.
A paint class holds the style and color information about how to draw geometry, text and bitmap.
All right, perfect.
So we want to do that.
We want to draw something.
So we are going to that.
And then you can, of course, also check it out if you want to.
We've seen that and then color as well.
If you want to see the different colors that there are.
So you can see there's black, gray, like gray, green and so forth.
So a bunch of colors are prepared there already and you can use them any time.
All right.
So the next thing that I need to hear is a canvas that I want to draw on.
So canvas is pretty much the background, the white background that I want to draw on.
OK, so I'll need to have a canvas variable.
So I'm just going to create one here.
And of course I need to imported that as well, so.
Old shift enter should be imported, as you can see now, it's been summarised to Android, the graphics
star, because now at that point we're using multiple.
Libraries from our graphics, our multiple classes from our graphics library, and that's why it said,
OK, I'm going to sum it up and I'm going to give you all of the graphics classes that there are.
All right.
OK, so the next thing we need to do is we need to set up the whole variables that we have here so we
have a bunch of variables which are null and we need to set them so we can, of course, go ahead and
create an input here.
So in this in it, we could go ahead and put all of those together, but then what makes sense is to
have a special method which will take care of that, where you just need to call the method in here.
So I'm just going to say set up drawing should be called in here.
Of course, it doesn't know set up drawing is.
So we need to create a function here.
So I'm going to create a private fun function called set up drawing.
And in there I'm just going to set all of the variables that I had up there.
So I need to set to draw paint and I'm just going to say it's of type paint.
So it's just going to be a paint object and draw paint then.
And draw path should just be a.
Custom path.
Which has a color and a brush size and here and brush size.
As you can see, these two variables are the ones that we created up here.
So these are the only two variables which weren't empty.
As you can see, there are not nullable, so we can directly use them.
That's why I could directly pass them to our custom path.
And here our Andropov's now is not going to be null anymore.
Then I need to set the color of my draw paint.
All right.
So and draw paint has a color.
Attribute.
And I want to set that to the color, so now the problem is and drop paint could be empty, right?
So that's why it says you need to add Nundle asserted call so I can do that with double exclamation
mark here.
And that is only possible because we said to drop paint before.
So we know at that point that it's not empty.
But if you wanted to be super sure, you could of course, go ahead and add and if and draw paint not
empty or not null, something like that, then you would be on a super safe side.
But in our case, we know, OK, we just set it to be of type paint.
All right.
Or paint object.
Next we need to set the style, the stroke joint and stroke QEP of our and draw paint.
All right.
So you can see that there are a bunch of variables that we need to set for it.
So the next one would be the style.
So here style will be off type paint style stroke.
OK, so there are multiple styles.
You can check them out.
You can see here there is Phil, Phil and stroke and stroke.
And I'm just going to use a stroke which is just going to be a line.
And then you can say how the beginning and the end of the stroke should be.
So should it be rounded or should it not be rounded?
Should it be squared, for example?
So here I'm just going to set the on and draw paint, dot stroke, join.
To be rounded, so paint.
But join Dart Round.
And they do the same thing for the stroke cab, right, and draw paint.
Stroke kept is going to be paint that kept that.
And you can see there is but round and square and I'm just going to round here.
But of course, as I said, you can play around with those and you can even find out what this stroke
kept us so kept sets to paint things like cap style used whenever the paint style is stroke or stroke
and feel.
All right.
So because we're using stroke, we are also setting the cap.
And then how many variables do we still have which are empty?
Well, we have our canvas bitmap, which we will set later on once we need it, but we still need to
set our paint and we can change the brush size.
All right.
So let's do that real quick here.
We can go ahead and set our end canvas paint.
And here I'm going to create a paint object, but here I can use different flags so you can check out
what those flags do, a dithering flag paint a flag that enables dithering when letting.
And for me personally, as a non-native speaker or non English speaker, these two terms were completely
new.
So dithering as some type of shaking so enables shaking when letting.
Is to copy bits from one part of a computer graphical memory to another.
All right.
So that's what Bulleting is.
If you want to know more about it, of course, you can check out the Wikipedia article here.
What is bulleting and graphics?
And you will find the bullet explanation here.
And that is generally what I would recommend to you.
So if there's any term that you don't know, just Google it, because I can, of course, explain every
single thing that we see here on the screen.
But then it will be boring for all of those who already know all those terms.
And that's what makes sense to sometimes just look something up if you don't know what it means and
what it does.
All right, and then there is one last thing left to do for this video, and that is to set the brush
size.
So I'm just going to set it to 20 for the beginning.
Of course, you could argue that you could set it to 20 straight from the get go here, but I just started
with zero and then I set it in my setup drawing so that this function here or this method setup drawing
will always be taken care of, setting up everything that we want to have at the start of our application.
All right.
So it's all at one spot right now, so you can do it as you prefer.
And now we have this in it, which will set up the drawing.
Now, of course, we cannot test this yet, and that is something that we will need to set up.
And there's still quite something to add in this drawing view.
And we're going to do that in the next video because otherwise this video would be way too long.
So here you there and see you there.