Hello, and welcome to this new Android development course. This is part one on how to make a drawing app for Android.
If you will enjoy reading and contributing to the discussion for this post, will you please join us on the YouTube video above and leave a comment there because I read and respond to most comments on YouTube?
If you find anything helpful in this video or funny, will you please leave a like because you will feel great helping other people find it?
In this video we will set up the basics and continue with our applications. We open or Android studio IDE and click on start a new Android studio project. Here we click an empty activity and then we click on next.
Here in my application we’ll change the name to Drawing App, for example. We’ll set the language to Java and we will set the minimum API level to 17 this time. Now we will click on finish and we will wait for the IDE to load our application.
We have set this time to 17 because 17 almost targets the whole Android market share. Right now, we have our Android studio project set up right here and we have to continue to create or draw an application. To do this we will open our manifest file and we will set the activity orientation to portrait. So we have set to portrait because our drawing app will be in portrait mode.
Before running we will change the default layout file with linear layout. So we go under the res folder, and then under the layout folder, and we right-click on the activity_main.xml file and we will click on delete.
Make sure you have these two options unchecked and then click on ok.
Now that we have deleted we will create a new one. So right click on new, layout resource file.
Here we will also say set the name to activity_main as you can see, but the root element will be changed to linear layout as you can see. We click on OK and the IDE will generate this new code for us.
If we switch to the text mode we can see that we have the linear layout we requested.
If we run this, I will run this on the emulator we will see how it’s looking like on the device. Now, I’m compiling and I will run the app on the emulator in the left side of the screen, so you can see. We wait for the app to be compiled and I will switch to the emulator to wait for the app to run. Right here will be the emulator which was set up using Android studio and it’s taking quite some time.
Maybe the first time takes a little bit more time than usual but it’s already installing and launching the app, and here is our drawing application. We have this top bar which shows the time and all the notification icons, and we have also this title bar which is showing the title of our app in this case Drawing App.
We want to hide these two bars. To hide those bars we go back to the IDE and on the left, under the res, and then values folder will open the styles.xml file and as you can see here we can change the items of our current app theme. To hide those bars we will create a new item. The first being windowNoTitle which is the title bar, and we’ll set this to true, so we don’t want a title. We will also create a new item that will say windowFullScreen as you can see, and we will also set this to true. After we’ve done this we will run the app again to check if the changes took effect on the emulator device.
Right now it’s installing and as you can see there’s nothing shown, so both bars are hidden. All we have is a white rectangle which is exactly what we want for now.
To draw on the application what we have to do is to create a kind of paint view which will use the canvas object to draw into the display. To do that we will create an external class. Our external class will be called paintView actually. So to create an external class we go and right-click under the Java folder, and we will click on the package name. In my case is com.example.drawing app. I will right click on that and click on a new Java class.
The name of this class I will set that to PaintView, and then I click on OK. Now, the IDE has created this new class for us.
It says public class PaintView and we will continue to improve and modify this class to our drawing app needs.
First thing we want to do is to extend the view class. To extend the view class is pretty simple we will just type right here extend View. As you can see, of course, we have to import the view object as you can see right here, and now we have extended the view.
As you can see we have a warning right here which tells us there’s no default constructor available.
If we click here which will create the constructor matching super. We can do that or we can also do it later manually. But if we go and do this and choose the first, for example, we have this constructor just silence this warning.
Doesn’t really matter because we will write it anyway later. This is the main method but we will also kind of pass the attributes set if I’m not wrong. We will create a global variable of paint in which will be called mPaint. For that we go and say private Paint. We have to import this. This class will enable us to draw. So private Paint mPaint. We created the paint object.
Right here we will start setting up that object. So we’re going to say mPaint = new Paint and then we will start passing the parameters we want. For example, we can set different styles, strokes, lots of really useful stuff.
Since we want to draw something, we will do the following so we’ll say mPaint.setAntiAlias, we will set this to true to enable anti-aliasing. Great. We will set dither to true. To do that we’re going to say mPaint.setDither to true. This is basically a small setting that we have to set in order for the app to draw. It isn’t really important to go in deep for every one of this so we’ll continue right now. mPaint.setColor and we will we will set this to black maybe. So this is the kind of the color we are drawing with. We’re going to say Color.BLACK. You want to set that as default. As simple as that.
We’re going to set the style of mPaint, so I’m going to say mPaint.setStyle, and as a style we will pass Paint.Style.Stroke. Because we will be drawing. Now, we will set the strong stroke style maybe. So mPaint.setStrokeJoin, and here what we will do will be Paint.Join.ROUND. Because we want kind of rounded endings as we draw. We also set the stroke cap which is again just aesthetic changes that are not that important. So, setStrokeCap(Paint.cap.ROUND). We’ve done this and now we’re going to say the mode. The extra mode which we won’t use that match so we can set it to null. mPaint .setXfermode mode will be set to null right now. The last one will be set to alpha. mPaint.setAlpha we will set that to 0XFF to make it able to see what we’re doing. That’s it for the constructor method.
That’s the kind of main method but we want also to create an initialization method in which we will pass the size of the user of the device screen. We have to know which size we will be drawing into. So you’re going to say public void. Of course, we will have to call this from our main activity class. We will call init and we will pass the display metrics we get which are the screen is size. Display metrics metrics and we will pass this stuff right here.
Right now we have our kind of paint view. We’ll still have to implement some more stuff but it’s extending the view. In order for us to complete this design we will go to our activity_main.xml file right here, and we will actually get the view from code. The view that we created in this place right here and specify it as xml. How can we do this? Well, we will basically set this inside the frame layout in order for us to later be flexible for us to change some stuff. We create a frame layout. We will set the width to match parent. The height to 0 DP. We want to create two views with two different weights in order for us to simplify our life. So we want in this case to make the paint view show the 90% of the screen. At the bottom we will have a bar which will use the 10% maybe. We can change this later. It’s not that important.
We’re going to set this weight to nine which will represent the 90% for us, and inside this frame layout we will actually specify our paint view which we access it as com.example.drawing app.PaintView. The width of this paint view will be match parent and the height will also be match parent.
In order for us to access this from code we have to assign it an ID, so you can say ID. Maybe we will set to this will be paintView. Now we have to created our paint view right here and we also will create the bottom bar I was just talking about. The bottom bar will be a linear layout the width will be match parent and the height will be 0 DP and the weight will be 1. This is weight one and the other was weight 9, so this occupies 10% and the other 90%. Just a simple trick to avoid doing lots of code and all of that. We solve everything here.
Now we can create some buttons right here. Maybe something that will enable us to change the colors of what we’re drawing with or something like that. May be to clear the current drawing but we will do that later. We’ll just leave it as it is and I will actually set this background to black. To create a black color for that we go under colors.xml file, and down here we’ll create a new black color. For that, I open and say color name will be black and here I will specify number sign followed by six zeros which is black in hexadecimal.
I have the black color. I can now close this file and go to activity_main.xml and this background of this linear layout, I will set this to black.
That’s our linear layout and if I run the app now I can have an idea of what I just did right here. I mean the 90-10%. The app is running. Let me run it again. It didn’t run for some reason. The app is running and we have sort of error maybe because we have not finished coding.
Maybe you have some sort of error right here so let’s check in logcat to see what’s going wrong with our application. Whenever something goes wrong we can go to logcat as I’m doing and finding the actual line of code that’s causing problems. Right here we have some error on our binary XML file. That’s great because we haven’t finished writing this class and we are already using it right here. If we select this and comment this or delete for a moment, and run the app again, we will see that it is solved.
I am installing the app and as you can see it’s solved and as I was telling you this white thing which will be our paint view will occupy 90% percent the whole screen height, and the rest 10% remaining will be occupied by bottom bar. That’s what I wanted to show you as a quick thing right here, and now we can uncomment this again.
We have to keep in mind that before running the app we have to actually end right in this class. To write this class, we will continue to be in the init method. We will get the height and the width of the metrics we are passing right here. To do that, we’ve got to say int height will be set to metrics.heightPixels, but this will return the whole height of the device which we don’t really want. We want the 90% of the whole height of the device, so we multiply this with 0.9 in that way we get the 90%. We will cast this to double. As you can see it says method cast it to double. Cast to int actually. From double to int. So if we cast it to int then everything works. W e also want to get the width. The width doesn’t change so we’re going to say int width. We’ll say metrics.widthPixels as you can see right here. Now we have our height and our width which is great and we want to create our bitmap.
So a bitmap will enable us to store the information of our canvas where we draw our stuff. We will create our bitmap and we will access it and initialize it.
We’re going to say bitmap, I will call it mBitmap, for example, and I will set this object to Bitmap.createBitmap, and we will pass the parameters. First we will pass width, then we’ll pass height, then we will pass the configuration of our bitmap. We want it to be able to display colors. For that the most useful configuration is Bitmap.config.ARGB_8888. Right now we have set up our bitmap and we also want to set up our canvas. I will call this mCanvas and I will set this to new canvas and I will create a new canvas with the bitmap I set up previously. I will pass mBitmap which is great. We have created our canvas with our bitmap.
This is basically what we have to initialize in this method. We’ll have to deal with colors and all those sort of things but for now, we will leave it there and we will create another method which will be the onDraw method. To do that, we will override the onDraw method, so override protected void onDraw, and we will get the canvas right here, so canvas.
Right here we will save the canvas in order for us to draw a new color or something like that. You’re going to go and say canvas.save. This enables us to save the state of the canvas.
We have to access our previously created canvas which is this canvas right here, so you have to create this as a global variable, okay? Go before the paint view method and type private Canvas mCanvas.
Now, that object can be accessed from the onDraw method. We want to say mCanvas and we will set kind of the background color. So, drawColor and this background color we will set it to Color.WHITE. The background of our drawing application will be white.
We will define how our finger moves through the screen in order for us to draw on the canvas.
We will have to define that.
To define that we will go to our main_activity.java file and we will define something that we will call our finger path. We’re going to go after the onCreate method, we are going to create a static class or rather say static class FingerPath. We open the element right here. This class will have its own color the stroke width and the path itself. First we’ll go and say int color. We’ll have int StrokeWidth. Here as Path we will import the graphics one as you can see right here. I’m importing the graphics path.
Everything’s great. Now path we’ll call it just path. We will create a constructor method which will be FingerPath and we will pass color, of course, in order for it to set the color. We’ll pass, of course, the strokeWidth and will also pass the path. Inside this we will just set them, so you can say this.color equals color. The same with the other one. So this.strokeWidth equals strokeWidth. So we’re setting new parameters to our finger path. What we do when we touch with our fingers.
This.path will be set to path and now we have created our finger path which is awesome. So right now we can go back to our paintView.java. Now, we can finish with our onDraw method. Right here what we will do is we will get the finger path we have on our activity main or main activity, and we will set the color and the stroke and all of that. We’re going to say for MainActivity.FingerPath,we’ll this fp, for example, and we will switch it with paths.
What are those paths? Right here. Those paths will store the actual path of our application, so how can we actually define those paths? Well, these paths will be created as an array list of finger paths. We go and create it as a global variable. Go ahead and say private array list as you can see and the data type of this arrayList will be MainActivity.Fingerpath and we will call this paths. We will set this to new ArrayList.
Now, we have our paths global variable right here. So what we have to do now is continuing writing the for loop. We open this loop and we’re going to say mPaint.setColor and will be set to the path color in this case, fp.color. Now we’ll set the stroke width. I’m going to go mPaint.setStrokeWidth and we will set to fp.strokeWidth. We also will set the mass filter to normal for us to make the draw mask look how we want. We will set mPaint.setMaskFilter to null. We will actually draw the path right now. To draw the path you can say mCanvas.drawPath and we will pass, of course, fp.path, and we will also pass mPaint. T his is how we do this for every loop right here but now we have to actually display these changes to the screen.
To do that we’re going to say outside the for loop, of course. Canvas.drawBitmap and inside it we will say m Bitmap which is not accessible again, so we have to mBitmap accessible. For that we go to or int method and make m Bitmap a global variable the same we did with mCanvas. We can go here and go private Bitmap mBitmap.
Now that can be accessed from the onDraw method and to draw path we will pass mBitmap right here and also pass where we want to start from. In this case, will be 0, 0 so we want to start from scratch.
We have to pass the paint of this. To pass the paint of this we will create a new paint for this that will be called mBitmap paint, and we all create that as a global variable. We can create it right here. We go ahead and say private Paint mBitmapPaint. We will create this new paint and we’ll pass the parameter paint.DITHER_FLAG, so we can have it ready. We will use it as our last parameter right here so we’ll pass mBitmapPaint.
With this line of code we’re drawing the bitmap, and after we draw we will restore the canvas. You can say canvas.restore.
We have restored the canvas and now we have finished creating our onDraw method.
Part Two Of How To Make A Drawing App For Android.
In this video, we will continue working on our paintView.java class, so let’s start. In the previous tutorial we finished our onDraw method. Right now we have to set up a way in which we can get the event that the user generates when he or she touches the screen. For that, we will override the onTouchEvent. Go ahead and type @override public boolean onTouchEvent. As parameter we will have here MotionEvent and we will call it event. We open this and we will get the coordinates of this event. Since it has to return boolean we will return true. So this will be the last line of this method and we will continue working on the onTouchEvent.
This event is called when the user touches the screen. We’ll see how it works just right now so we will define two float variables. One of them will represent the coordinate at X and the other at Y.
You can say float X will be set to event.get X and float Y will be set to event.get Y. We will get the action. What do I mean with action? Well, when the user touches the screen, when the user does one action, when the user moves the finger around the screen that’s another action, and when the user stops touching the screen. That’s another action. You say for each action switch event.getAction to know which action we’re getting from the user. The first case will be case MotionEvent in the case it is action down. So it is case MotionEvent.ACTION_DOWN and here we’re going to say basically break. We will fill this later but for now, we will leave them empty. That’s the first case. Now next case will be action move, so you’re going to say case MotionEvent.ACTION_MOVE. We will break again. Break and end the line with semicolon.
The next one, the last one will be case MotionEvent.ACTION_UP, so when the user stops touching the screen. We will say also to break.
We have three kind of actions the user can take when he touches the screen and we will use this float to pass them to another method which will enable the drawing to be created. Which are those methods? Well, the first method will be called touchStart which will be set right here. After here we going to say create a method which is private void touchStart. And as parameters we will pass the coordinates right here. You’re going to get them here. For that we can say float X and float Y.
We will open this method and we will create a new path so when the user touches the screen we will start a new path. We’re going ahead and access the outer path to call that way. mPath will be set to new path so this means we have to create a global variable which is a path and it’s called mPath. It’s red because we don’t have that yet so we have to create it. Here we’re going to type outside the method, of course, private Path mPath. As path we have to import the correct path. In this case, it is Android graphics path. Now we have our mPath that we can use to draw.
So this is touchStart method and the first thing is we’ll set to mPath will be create a new path right. New path. The next thing we’ll do we will create a finger path which was created on our main activity. So we going to say MainActivity.fingerPath and we call this fp. This will be set to new MainActivity.fingerPath, and we have to pass the color of what we want the path to be. In this case, we want it to be black then we can change it. So color.BLACK. So we’ll pass the black color, and we’ll pass the strokeWidth.
How can we know how big should the strokeWidth be? Well, basically we will start with a basic stroke with size which in this case will be 10 which is kind of a slim stroke width. We can then increase the stroke width if we want or decrease. I don’t think it will decrease but if you want you can. In touchStart we pass the color, the strokewidt, the color is black and the strokeWidth will be 10 and we have to pass the new path which in this case is mPath.
In order for us to add this path to the place in which we stored the other paths we’ll go and say paths.add and we will say add fp. We have to reset the path and move to the coordinate the user is touching.
To do that we’re going to say mPath.reset and then we will say mPath. moveToX, Y). We have our new path.
If we want to keep track of the current movement of the user we will have to create global variables that will help us do that. For example, we will create two variables to store the current X and Y position. We can say private float mX, and we’re going to say private float mY. After we move to this path we will set and save those coordinates for later use, so we’re going to say mX is set to X and mY will be set to Y. This is basically what we will do with the touchStart method.
Where do we have to call this method from? Well we will call it from our onTouchEvent.
This is the first method transaction. I will go to our onTouchEvent which is just right here and in action down we have to call touchStart. So you can say touchStart and we’ll pass X and Y. After all this the view class requires us to invalidate previous view in order for us to make it look smooth. To do that they’re going to say just invalidate.
Next we have the action move so for this action we will create another method.
Which method will that be? Well it will be the onTouchMove method. For that we will go and create them right here.
We can say private void onTouchMove. This parameter again we’ll have X and Y. So float X, float Y.
Inside this we will have to get how much the finger has moved from the previous position which was saved with this variables I’m selecting right now.
To do that we will say the following float the X which means changing X will be set and with math library we’ll kind of calculate the distance between them. You’re going to say the difference between them. You can say math.abs(X -mX). The difference between the current X and the saved X. We will do the same with Y. So you can say float dY will be set to math.abs( Y-mY).
GET MORE OF THIS COURSE
Would you like to continue learning about the Program Your Own Drawing Application in Android Studio Course? If you are interested will you please buy the complete course, Program Your Own Drawing Application in Android Studio Course, on the Uthena Education Platform..
You can also get the first 45 minutes of the course completely for free on YouTube.
Thank you for reading the blog post or watching the course on YouTube.
I love you.
Thank you very much for checking out the Program Your Own Drawing Application in Android Studio Course and I hope to see you again in the next blog post or video.