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="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, 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) { super(context); } }  

Paint and Path

The magic ingredient in this app is the android.graphics.Paint class. This class has the methods we will 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. 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 this.   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 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() { @Override public void onClick(View view) { //reset the path path.reset(); //invalidate the view postInvalidate(); } });   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.   @Override 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); break; default: return false; } // Force a view to draw again postInvalidate(); 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:   @Override 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.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 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
MyPaintBrush.zip 1.06 MB