Welcome back.
And this video, we are going to start with our kids drawing app and therefore we're 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 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 fixed the orientation of this app, and I wanted to constantly be
portrayed mode.
So I'm going to add Android Auto screen orientation, and here I set it to portrait.
So adding that creates is a little arrow.
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 be in portrait mode, even if we
turn around the phone.
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 all different
orientations.
But we're just going to keep it simple and use portrait 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 Scotland class and I'm going to call this one drawing view, and it's going
to be a class.
All right, now, this drawing of 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 reuse.
For example, on Create, 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 example 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, and 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 off 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.
Press 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 two attributes
which will be of type attribute set so I can place 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 to context and Android duty of the attribute 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 geometries texts and bitmaps and all those kind of things.
We're going to use that, then we're going to use a bitmap that we can draw on.
Maybe you have worked with bitmaps before, which is a file type, and it's the same kind of concept.
We have 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 ahead and do that.
Let's create a private variable here, call 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 want it 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.
Followed a certain structure, so this custom path would just be of type path.
All right.
So there is a class called path, and I want it to be of type path, so I need to import path here as
well.
So in Port Perth.
And here we're using Android graphics.
Because of different types of path classes.
So we're using the one from the Android library.
And then I need to say I want to extend that path.
And how I want to do that is I want to extend it by a variable 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 entire class here, which I made internal.
And it's called the custom path and it's of type.
If you want to know more about path, you can keep the control key, click it and then click on path.
And that will then open up the power class here.
You can see that if you look at it here, the puff glass encapsulates compound multiple controlled geometric
paths consisting of straight line segments, quadratic curves and Kubica's.
It can be drawn with canvas drop have either filled or stroked.
OK, so you have your different options, how you can draw it and as you can see, you need to draw
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 another tool, 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 build 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 similar?
And then you would go ahead and build that.
And I myself also got inspired by as well or Sylvain Sorrell.
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 in boss 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 canvas bitmap, which will be of type bitmap Nullarbor.
And I'm going to set that to no.
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 and information
about how to draw the geometries, text and bitmaps.
OK, so go ahead and create a private VAR.
And draw paint, which is of type, paint, Nullarbor, and I'm going to set that to null 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 view, 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 indelible as well here.
And this should be the instance of the canvas paint view.
All right, the 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 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 only the color with which I want to draw.
And I'm going to start with a color black here.
Keep it super simple.
Black 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 Matt does.
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 a paint is.
A paint glass holds the style and color information about how to draw geometries, text and bit maps.
All right, perfect.
So we want to do that.
We want to draw something, so we are going to need that.
And then you can, of course, also check float 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 import to that as well.
So.
Hold shift enter should important, as it can see now, it's been summarized to Android graphics star
because now at that point, we're using multiple.
Libraries from our graphics are multiple classes from all 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 edit here.
So in this in it, we could go ahead and put all of those together.
But then what makes sense is to have an especial 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 what 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, they are not malleable so we can directly use them.
That's why I could directly pass them to our custom path.
And here I am.
Draw path now is not going to be null anymore.
Then I need to set the color of my draw paint.
All right, so I'm 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 non-oil asserted coal, so I can do that with double exclamation
mark here.
And that is only possible because we said drop paint before.
So we know at that point that it's not empty.
But if you want it to be super sure, you could of course go ahead and add and if and draw paint, not
empty or not know something like that, then you would be honest about a super safe site.
But in our case, we know, OK, we just set it to be of type paint.
All right, or be a painter object.
Next, we need to set the style.
The stroke join and stroke cap of our AM 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 of 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 arm and draw paint that stroke join.
To be round it.
So paint.
But join thought round.
And they do the same thing for the stroke cap.
All right, Andrew Rob Paint.
Stroke cap is going to be paint that cap that.
And you can see there is, but round and square.
And I'm just going to use 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 paints like cap style used whenever the paint style a stroke or stroke
and feel.
All right.
So because we are 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 and canvas paint.
And here I'm going to create a pained 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 bloating is if you want to know more about it, of course, you can check out the Wikipedia
article here.
What is bloating and graphics?
And you will find the blit explanation here, and that is generally what I would recommend to you.
So if there is 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.
I just started with zero and then I set it in my set up drawing so that this function here or this method
set up 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.