Paint applications are become famous thanks to Microsoft Paint, well known as simply Paint or Paintbrush. It was a simple computer graphics application included with all versions of Microsoft Windows. In this tutorial, you are going to discover how to create a Paint Application for Android which will let users to draw on the screen with their fingers.

Our Paint Application for Android will offer the following features to users :

  • Draw paths with fingers on the screen
  • Normal mode
  • Emboss mode
  • Blur mode
  • Clear option to remove all paths on the screen

Note that you can discover this tutorial in video directly on YouTube :

Even better, you can enjoy the demo of this Paint Application directly on your Android smartphones and tablets by downloading Tiny Paint on the Google Play Store :

 

Finger Path Object

The first step is to create a FingerPath Object to represent a path drawn with the finger on the screen. Our FingerPath class will have several fields letting us to define :

  • Color of the path
  • Emboss mode or no
  • Blur mode or no
  • Stroke width of the path
  • Path object from the standard SDK representing the path drawn

Our object will be just like that :

 

Create the Paint View

With the possibility to represent a path drawn with the finger of the user on the screen, we need now to define a custom view to draw these paths on the screen. For that, we are going to create a PaintView class.

Obviously, our PaintView class will extend the View object from the standard SDK. The PaintView class will have some constants like the size the stroke width for the path also known as brush size or still the color of the path drawn.

The PaintView will store several FingerPath objects inside an ArrayList field. Besides, the PaintView object has a field for the Canvas used to draw the paths represented on the screen to the user.

In the constructor of the PaintView, we initialize the Paint Object used to draw the paths on the Canvas. We need to define the style of the Paint Object as STROKE. Then, we set the stroke join and stroke cap to ROUND. Finally, we create an EmbossMaskFilter Object for the emboss mode and an BlurMaskFilter for the blur mode.

This gives us the following code for the PaintView at this stage of the tutorial :

Now, we add an init method on the PaintView class. This method will take a DisplayMetrics Object in parameter and will be responsible to define the height and width of the PaintView. Furthermore, we initialize the Canvas and its underlying Bitmap used to draw paths on the screen.

The PaintView will expose three methods to switch between the three modes of drawing : normal, emboss and blur. The clear method will let us to clear the PaintView by clearing the list of Finger Paths. To let the users to visualize the changes on the screen, we don’t forget to call the invalidate method to redraw the PaintView.

Then, we override the onDraw method of the View class. First we save the current state of the Canvas instance before to draw the background color of the PaintView. We iterate on the list of Finger Paths and we draw the Path Object contained in the current FingerPath Object on the Canvas.

To apply the specific effect defined by the user, like emboss or blur, we set the corresponding mask filter on the Paint Object used to draw the FingerPath if needed. Finally, we draw all these elements on the Canvas of the PaintView and we restore the current Canvas.

At this stage, we have the following code for our PaintView :

 

Manage the users’ touches on the screen

Now, we need to manager the users’ touches on the screen to save the paths drawn on the screen with their fingers. We override the onTouchEvent method and we define three methods to manage the three following actions :

  • ACTION_DOWN with a touchStart method
  • ACTION_MOVE with a touchMove method
  • ACTION_UP with a touchUp method

In the touchStart method, we start by creating a new Path and a new FingerPath Objects. We save the current coordinates (x,y) of the finger of the user and we call the moveTo method of the Path object.

In the touchMove method, we check if the move on the screen if greater than the touch tolerance defined as a constant previously. If yes, we call the quadTo method of the Path Object starting from the last point touched and going to the average position between the first position and the current position.

In the touchUp method, we end the line by calling the lineTo method of the Path object with the last position touched on the screen.

With these methods implemented, you can access to the complete code of the PaintView below :

 

User Interface of the Paint Application

With the PaintView Object created, we can define the User Interface of our Paint Application for Android. This UI will just display a PaintView matching its parent for width and height :

 

Implement the Main Activity

Last step is to implement the Main Activity and writing its Java code. In this activity, we just need to make the link between menu displayed to user with options (normal, emboss, blur or clear) offered by the PaintView.

Besides, we need to load a DisplayMetrics object for the Main Activity and the initialize the PaintView Object with it in parameter.

It gives us the following code :

 

Enjoy Paint Application on Android

Now, you can run your Paint Application and enjoy painting on Android.

By using the base of our Pain Application, you can add a lot of new features like a color picker or the possibility to save your creations. It’s your turn to play !

To discover more tutorials on Android development, don’t hesitate to visit the SSaurel’s Channel : https://www.youtube.com/user/sylsau