Android : Custom 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: 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();


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…

package opensourzesupport.android.canvas

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();
        }
    }
}