Breaking News
Home / Android / Android Tutorials / Building Paint like Application in Android

Building Paint like Application in Android

For this tutorial I am going to create a simple paint-brush app. This app is very simple but it will give you a basic idea about how to use the Android API to make a paint app. So lets get it started!!

Step-1: Create the Project in Eclipse

As seen in the previous tutorials the project can be created in Eclipse after you have installed the android plugin for eclipse.

Creating the Paint brush project

The maifest file is the default one. It should look like this:


<?xml version=“1.0” encoding=“utf-8”?>

<manifest xmlns:android=“”



   android:versionName=“1.0” >



       android:targetSdkVersion=“17” />





       android:theme=“@style/AppTheme” >



           android:label=“@string/app_name” >


<action android:name=“android.intent.action.MAIN” />

<category android:name=“android.intent.category.LAUNCHER” />






Step -2: The View

For the paint brush application, view is the most important element. Here we are not going to rely on the XML view and we will create a custom view instead. To create a custom view, we need a Java class which extends android.view.View. Initally the class should look like the following code:


package org.developerfeed.ankita.mypaintbrush;

import android.content.Context;

import android.view.View;

public class BrushView extends View {

public BrushView(Context context) {





Paint and Path

The magic ingredient in this app is the class. This class has the methods we will need to use to paint on this canvas. Also we need an object of class According to Android documentation, this class is responsible for encapsulating compound geometric paths consisting of straight line segments, quadratic curves, and cubic curves. Sonds complicated but really for our app it will just tell us the path user draws using the touch screen.


private Paint brush = new Paint();

private Path path = new Path();


Along with these two objects I think we should also add a simple reset button for now. So take an object of Button class too. And a LayoutParams object to setup the button parameters. So now your view should look like



package org.developerfeed.ankita.mypaintbrush;

import android.content.Context;




import android.view.View;

import android.view.ViewGroup.LayoutParams;

import android.widget.Button;

public class BrushView extends View {

private Paint brush = new Paint();

private Path path = new Path();

public Button btnEraseAll;

public LayoutParams params;

public BrushView(Context context) {







btnEraseAll=new Button(context);

btnEraseAll.setText(“Erase Everything!!”);

params = new LayoutParams(LayoutParams.MATCH_PARENT,






Click Event of the Button

Next thing that you need a simple click event for the button so you can add that to the constructor like this:


btnEraseAll.setOnClickListener(new View.OnClickListener() {


public void onClick(View view) {

//reset the path


//invalidate the view





Wow we are making progress aren’t we? But still the output is nowhere to be seen! Patience dear friends, we shall achieve our goal soon.

The Making of the Path

A Path object just encapsulates a path. We need to add points to the path as the user touches the screen and drags his/her fingers. So we need to handle some event of the View which can tell us about the area being touched by the user. That event is called onTouchEvent and we need to add a method to out view for handling it. Here it code to get it started.



public boolean onTouchEvent(MotionEvent event) {

return false;



This method will help us in creating the path which will later be painted using another method. MotionEvent will be hadled like this:

We start creating a path when the user first touches the screen (ie MotionEvent.ACTION_DOWN). As he/she drags it we keep adding the points into the path (ie MotionEvent.ACTION_MOVE) and when the user stops, we stop adding points and invalidate the view forcing it to repaint. Let us see the implementation:


public boolean onTouchEvent(MotionEvent event) {

float pointX = event.getX();

float pointY = event.getY();

// Checks for the event that occurs

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

path.moveTo(pointX, pointY);

return true;

case MotionEvent.ACTION_MOVE:

path.lineTo(pointX, pointY);



return false;


// Force a view to draw again


return false;



The Actual Painting

Now for the view the last element is the actual painting. That will be handled by overriding onDraw like this:



protected void onDraw(Canvas canvas) {

canvas.drawPath(path, brush);



So far so good. Now on to the next step!

Step-3 Using the View

Any view can be used by associating it with an activity. And that is what we are going to do. So create an Activity class named PaintActivity. And in the constructor set the layout of this activity as an object of our custom view class.

Th activity looks as follows:


package org.developerfeed.ankita.mypaintbrush;

import android.os.Bundle;


import android.view.Menu;

public class PaintActivity extends Activity {


protected void onCreate(Bundle savedInstanceState) {


BrushView view=new BrushView(this);


addContentView(view.btnEraseAll, view.params);



protected void onPause() {






Voila! We are done. Now lets see the output shall we. Run the project in you AVD and look at your handy work.

The Output

the output of me saying hello

Wow we are done. Onwards to the next conquest!

The complete Android project for this tutroail is attached to the post.

Attachment Size 1.06 MB

Check Also

Building a TODO List app in Android using SQLite

Storing data locally in Android is very easy. Here are few ways we can do …

  • Agyl Reza Ismail

    thanks bro….like your post (Y)

    • Danielle Gormley

      I think the admin is not a “bro”. Judging by she referenced herself as “her”. :)

  • brahmy

    unique tutorial..excelent

Advertisment ad adsense adlogger