For this tutorial, we are going to create a simple Paint Brush like application. This Android 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 let's get started.

Step 1: Create the Project

As you may have seen in the previous tutorials,  create an Android Application Project in Eclipse. For Android Studio users, do the same.

As part of the project, an application manifest file is also created. Your app manifest file should look something like this:

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

<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
   package=“org.developerfeed.ankita.mypaintbrush”
   android:versionCode=“1”
   android:versionName=“1.0” >
<uses-sdk
   android:minSdkVersion=“8”
   android:targetSdkVersion=“17” />
<application
   android:allowBackup=“true”
   android:icon=“@drawable/ic_launcher”
   android:label=“@string/app_name”
   android:theme=“@style/AppTheme” >
<activity
   android:name=“org.developerfeed.ankita.mypaintbrush.PaintActivity”
   android:label=“@string/app_name” >
  <intent-filter>
    <action android:name=“android.intent.action.MAIN” />
    <category android:name=“android.intent.category.LAUNCHER” />
  </intent-filter>
</activity>
</application>
</manifest>

Step 2: The View

For the paint brush application, the view is the most important aspect. Here we aren't going to rely on the XML view but we'll create a custom view instead. To create a custom view, we need a create a Java class which extends android.view.View. Your class should look like below:

package org.developerfeed.ankita.mypaintbrush;

import android.content.Context;
import android.view.View;

public class BrushView extends View {

  public BrushView(Context context) {
  super(context);

  }
}

Paint and Path

The magic ingredient in this app is the android.graphics.Paint class. This class has the methods that we'll need to use to paint on this canvas. Also, we need an object of class android.graphics.Path. According to Android documentation, this class is responsible for encapsulating compound geometric paths consisting of straight line segments, quadratic curves, and cubic curves. Sounds complicated but for our app, simply we want to use it just tell us the path user draws using the touchscreen.

private Paint brush = new Paint();
private Path path = new Path();

Along with these two objects, let's add a simple Reset Button along with the LayoutParams object to allow us to set up the button in the view. So now your view should look like:

package org.developerfeed.ankita.mypaintbrush;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
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) {

  super(context);
  brush.setAntiAlias(true);
  brush.setColor(Color.BLUE);
  brush.setStyle(Paint.Style.STROKE);
  brush.setStrokeJoin(Paint.Join.ROUND);
  brush.setStrokeWidth(10f);
  btnEraseAll=new Button(context);
  btnEraseAll.setText(“Erase Everything!!”);
  params = new LayoutParams(LayoutParams.MATCH_PARENT,
  LayoutParams.WRAP_CONTENT);
  btnEraseAll.setLayoutParams(params);
}
}

Click Event of the Button

Next thing, we need to add a simple click event listener for the button, so add the following code:

btnEraseAll.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//reset the path
path.reset();
//invalidate the view
postInvalidate();
}
});

Wow we are making progress, aren’t we? But we haven't run our app yet, so we haven't seen how it looks! We are almost there, keep reading!

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 their 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 our view for handling it. Here is code for the same:

@Override
public boolean onTouchEvent(MotionEvent event) {
return false;
}

This method will help us to create the path which will later be painted using another method. 

Let's see how we handle the MotionEvent. We start creating a path when the user first touches the screen (i.e. MotionEvent.ACTION_DOWN). As they drag it we keep adding the points into the path (i.e. MotionEvent.ACTION_MOVE) and when the user stops, we stop adding points and invalidate the view forcing it to repaint. Let's see our 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);
    break;

    default:
    return false;
  }

  // Force a view to draw again
  postInvalidate();
  return false;
} 

The Actual Painting

Now for the view, we need to perform the actual painting. That will be handled by overriding onDraw method like so:

@Override
protected void onDraw(Canvas canvas) {
  canvas.drawPath(path, brush);
}

 So far so good. Lets' move on to the next step.

Step 3: Using the View

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

So your activity should look as follows:

package org.developerfeed.ankita.mypaintbrush;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class PaintActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  BrushView view=new BrushView(this);
  setContentView(view);
  addContentView(view.btnEraseAll, view.params);

}

@Override
protected void onPause() {
  super.onPause();
  finish();
}

}

Voila! We are done. Now let'run and try out the application. Run your project in your AVD and look at your handy work.

The Output


We are done, go ahead and unleash your creative drawing skills with your new paint app!

The complete Android project for this tutorial is attached below:

MyPaintBrush.zip