A number of Android applications that are designed for creating sketches and illustrations regularly increase in Google Play. Among them, there are various solutions for painting that are either paid or free ones. These apps are similar in general but have some different features. The need for some specific possibilities that are absent in such applications prompts developers to create their own apps with the set of particular functions. So, in this article, we will discuss how to make a drawing app for Android platform.
At this moment, the most popular digital painting application in iOS is Procreate. Apple Inc. developed this app specifically for iPad. Why do so many people like Procreate drawing app so much and are ready to spend £5.99 to download it? The thing is that Procreate offers functions of desktop analogs including a wide set of drawing tools, advanced layer support, and a lot of color effects.
This app is not just a digital alternative for traditional sketchbooks and colorful pencils, this is a powerful tool for those people whose lives are tightly connected to art. So we decided to show how to build android drawing app without deep knowledge in programming using an ordinary integrated development environment (IDE) called Eclipse.
Project Settings
The first step of app development in Eclipse is creating a new project. You have to select the minimum API level by default, choose a Blank template, and keep default names of Activity and Layout or create your own ones. Leave a navigation type line as “none”. In the manifest, select portrait orientation of the Activity.
Adding Sizes
On this stage, you have to set the necessary dimensions for the future app you are going to develop. To do it, open the folder “res/values” and add the opened and closed tag “resources” to the “dimen.xml” file. If you did not find such file in this folder, you have to create one and paste the tag there. These dimensions will help the app understand and show brush sizes when the user begins to draw using one of the available tools.
Adding Colors
Now it is time to add a set of colors. This process is quite similar to adding dimensions. In order to add colors, just paste the contents to the colors.xml file in the folder with the destination res/values. To make your pallet trendier, use the set of Google’s Material Design colors.
Custom view
What you need to do at this stage of Android drawing application development is to create a new class and name it with java extension. This class is a derivate from the Android.view Class. Such class structure will allow to make an Android drawing app with the interface and work principle like ordinary Android apps.
Creating a New Java Class
In the root project folder, create a Java class file with the same name you have done it before with java extension and extend the View class of the framework (android.view).
Constructor Implementation
Now you have to implement a constructor which will match the Android.view Class. You can add the second option using a shortcut Alt+Enter. This option will accept the following parameters: Context and Attribute Set.
Updating the Layout
It will be useful to make our custom view root for the Activity. To do so, just open a layout file named content_main.xml and replace the root component with the custom view. In addition, it is necessary to specify the package of your custom view. Then you better test your new view by launching the application. If the screen is blank, no errors appeared, then you are on the right way and you can proceed to the next development stage.
Components
At last, we have reached the stage when it is time to implement the main function which is obviously drawing. In order to create drawing apps for Android or iOS, you have to understand basic components of drawing solutions. Basic components of drawing apps:
- Path;
- Paint.
- Canvas.
The Path is a direction and a schema of tool moving while drawing. The Path consists of straight lines and various types of curves meaning how a chosen drawing instrument moves: left or right, up or down.
Why do we need to save the path in the storage? Every drawing app or software has a feature “undo” or “cancel the last action” which is actually the same function. So to let the user cancel the last action, the application has to remember what his or her last action was.
Paint is a tool for creating objects. Technically, the Paint keeps in its memory the selected style, shape, font, and color.
Canvas is a drawing surface for creating objects on or at least, we see it like that. In fact, technically, canvas is the interface which receives user commands and displays them in a structured view.
Implementation of components
Open your created class with java extension and declare variables at the top of it to define what to draw, how to draw, to define an initial color, canvas, and its bitmap, and a default brush size. Then you have to initialize these variables by adding a new initializing method in the class with java extension that you have created at the beginning. This method (let’s call it “init()”) must define parameters for drawPath, drawPaint, and canvasPaint. Creating a new method will help call it faster from the constructor by adding the line “init ()” to it.
Adding new methods
OnDraw() is a place where View object drawing happens. So now you have to let the Custom View know how to draw itself via the inDraw() by overriding it. Taking into account that the view size is 0 during creation, we have to add a new OnSizeChanged method which will be called when the rendering engine will generate the size of your screen. This method will update the screen size.
On this stage of development, your app can build objects if you set coordinates through the code. This is why you have to override the current onTouchEvent() method in your initial class to allow users to draw with their fingers but not by inserting code commands.
Adding a Toolbar
A good app for drawing pictures has a wide range of features allowing to create art right on the smartphone screen. Some of the required components of any cost-effective application for creating pictures are:
- Erase;
- Undo;
- Redo;
- Change Brush Size.
Whatever tool you implement in your drawing app, each of them has to be placed in a toolbar.
Tool icons
The Activity layout file uses Coordinator layout and it leads to incorrect placement of your future toolbar because Coordinator layout uses content_main.xml. That is why you have to edit the activity_main.xml file to place a toolbar at the bottom of the interface. Then copy the code for the set of icons for your toolbar instruments and add it to the res/resource folder.
Creating a menu
Now you have to create a new file with xml extension and place it in the menu folder with the res/menu path to it. This file has to contain entries that will cover all the drawing operations you need. In order to place the menu in a toolbar, you have to update the root Activity file with java extension using Java code.
Adding functions
If you accurately followed the tips above, then now you have buttons with icons that will allow users use standard drawing options. Now, this is the time to implement functionalities for these buttons.
Erase
Erasing works in two ways:
- If we want to erase everything and click on “Erase” button, technically, we get back to our starting point.
- If we want to erase our picture partially (only some objects or lines), technically, we paint white color on top of drawn lines or objects.
In the first case, warning the user about deleting everything he or she has drawn before and asking for confirmation is a simple but very important feature. That is why do not forget to update the Activity file with an alert dialogue code.
Undo and Redo
At the top of your custom view class file with Java extension, insert the Path list to let the application remember the order of user commands and update the touch event handler to record path history. Create the following methods to perform particular commands of user finger moves:
- Touch Start Method;
- Touch Move Method;
- Touch Up Method.
Then update the onDraw Method to let it draw from the path list, create Undo/Redo methods that will call the corresponding functionality, add them to the custom view file, and update handleDrawingIconTouched() method in your Activity file to trigger these functions after a click on the button.
Change Brush Size
This opting will allow users to change the brush size while drawing. They must see a dialogue to drag right or left to choose the needed size. To implement this function, you have to create new methods in a Custom view class file and add two packages: “listeners” and “dialogues”, then update your Activity file and handleDrawingIconTouched() method.
So now your Android drawing app has a set of basic features of standard drawing solutions and you can test them all right now. In case your business needs assistance with app development, please contact our company at any time. We will be more than happy to be useful for startup owners. Make your apps user-friendly with Lunapps.