Creating custom Views in Android

Hi All ,

Today we’ll discuss on how to create a canvas using views.

Step 1>

We’ll start off by extending our class by the android.view.View

example:

public class DrawView extends View {
  /**
   * Constructor
   */
  public DrawView(Context context) {
   super(context);
  }
 }

Step 2>

Next we’ll use the onDraw() function provided by the View class.

( Tip: In Eclipse Ganymede 3.4.1 ,

use Ctrl+space to see the available methods and select onDraw(…) )

It will look something like this…

public class DrawView extends View {

  /**
   * Constructor
   */
  public DrawView(Context context) {
   super(context);
  }

  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
  }
 }

Step 3 >

Lets draw some Text in it..

For that we’ll need the paint class.

Let’s create an object of Paint..

private Paint paint = new Paint();

( Android javadoc :

The Paint class holds the style and color information about how to

draw geometries, text and bitmaps. )

Let’s set its properties..

// set's the paint's colour
paint.setColor(Color.WHITE);
// set's paint's text size
paint.setTextSize(25);
// smooth's out the edges of what is being drawn
paint.setAntiAlias(true);

Step 4>

Let’s draw the actual text…

 canvas.drawText("Hello World", 5 , 30 ,paint); 

The final code will look some thing like this…

public class DrawView extends View {

  private Paint paint;

  /**
   * Constructor
   */
  public DrawView(Context context) {
   super(context);

   paint = new Paint();
   // set's the paint's colour
   paint.setColor(Color.GREEN);
   // set's paint's text size
   paint.setTextSize(25);
   // smooth's out the edges of what is being drawn
   paint.setAntiAlias(true);
  }

  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);

   canvas.drawText("Hello World", 5, 30, paint);
   // if the view is visible onDraw will be called at some point
   // in the future
   invalidate();
  }
 }

Step 5>

Now we need to display this View ….

For that we need to create an activity and set its content view as this DrawView.

One way is to suclass DrawView or create a new class file of DrawView..

The final code looks something like this…

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;

public class temp extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(new DrawView(this));
 }

 private class DrawView extends View {

  private Paint paint;
  /**
   * Constructor
   */
  public DrawView(Context context) {
   super(context);

   paint = new Paint();
   // set's the paint's colour
   paint.setColor(Color.GREEN);
   // set's paint's text size
   paint.setTextSize(25);
   // smooth's out the edges of what is being drawn
   paint.setAntiAlias(true);
  }

  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);

   canvas.drawText("Hello World", 5, 30, paint);
   // if the view is visible onDraw will be called at some point in the
   // future
   invalidate();
  }
 }
}