A Basic Android Graphics Example

In this example we shall explore the basics of drawing in Android. In particular we shall learn the basics of the Paint class , the Canvas class and their methods.We shall also learn how to add pictures as resources, and how to access them.

The OnDraw Method.

This method is the exact equivalent of the paintComponent method in Java. This method is called automatically whenever the View needs to be redrawn. It has a parameter of type Canvas which can be used for drawing on the View. Like the Graphics class in Java the Canvas class provides drawing methods.

The Paint class provides facilities for managing the coloring, the strokes, fonts, and also measurements of Strings. The Bitmap class encapsulates a Bitmap, it also supports drawing.

We start by creating a new Project called Hypatia  Drawing  Basics

Then import a PNG file into resources

1)

 

2)

 

3)

4)

Next subclass the View class.     HypatiaDrawingView

public class HypatiaDrawingView extends View {

    public HypatiaDrawingView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

}

Now create the OnDraw Method inside the HypatiaDrawingView class

@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    Paint paint=new Paint();
    paint.setStyle(Style.FILL);
    canvas.drawPaint(paint);
    paint.setColor(Color.GREEN);
    int width=canvas.getWidth();
    int height=canvas.getHeight();
    int radius;
    if(width<height)
        radius=width/2;
    else
        radius=height/2;
   
   
   
    canvas.drawCircle(width/2, height/2, radius, paint);
    paint.setColor(Color.YELLOW);
    Path ph=new Path();
   
    ph.setLastPoint(0, height/2);
    ph.lineTo(width/2, height/2+radius);
    ph.lineTo(width, height/2);
    ph.lineTo(width/2, height/2-radius);
    canvas.drawPath(ph, paint);
   
   
     Bitmap bruno = BitmapFactory.decodeResource(getResources(),
             R.drawable.giordanobruno);

canvas.drawBitmap(bruno,width/2-bruno.getWidth()/2, height/2-bruno.getHeight()/2,null);
paint.setColor(Color.MAGENTA);
paint.setTextSize(40);
String headline="Hypatia Software Solutions";


 float textwidth=paint.measureText(headline);

canvas.drawText(headline,width/2-textwidth/2,height/4,paint);
   
   
    }

The methods we have used should basically be self explanatory. 

paint.setStyle(Style.FILL); Sets the drawing style. Fill means that closed surfaces are automatically filled.

paint.setColor(Color.GREEN); Sets the drawing color.

paint.setStyle(Style.FILL); Sets the drawing style. Fill means that closed surfaces are automatically filled.

The Path class represents a Polygon. The Last point is also the first point and are automatically joined. Other points are joined serially.

To set the last point we use

  ph.setLastPoint(0, height/2);

For other points
    ph.lineTo(width/2, height/2+radius);    To draw the Polygon
    canvas.drawPath(ph, paint);

Drawing the Bitmap

First we access the imported resource.

Then draw it

Bitmap bruno = BitmapFactory.decodeResource(getResources(),
             R.drawable.giordanobruno);

canvas.drawBitmap(bruno,width/2-bruno.getWidth()/2, height/2-bruno.getHeight()/2,null);

The last parameter represents the paint object.We are not using it, so it is null.

Here is the complete application as it looks in Eclipse

 

The Complete Code

HypatiaDrawingBasicsActivity.java

package hypatia.drawing.basics;

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

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

HypatiaDrawingView.java

package hypatia.drawing.basics;


import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Rect;
import android.view.View;

public class HypatiaDrawingView extends View {

    public HypatiaDrawingView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    Paint paint=new Paint();
    paint.setStyle(Style.FILL);
    canvas.drawPaint(paint);
    paint.setColor(Color.GREEN);
    int width=canvas.getWidth();
    int height=canvas.getHeight();
    int radius;
    if(width<height)
        radius=width/2;
    else
        radius=height/2;
   
   
   
    canvas.drawCircle(width/2, height/2, radius, paint);
    paint.setColor(Color.YELLOW);
    Path ph=new Path();
   
    ph.setLastPoint(0, height/2);
    ph.lineTo(width/2, height/2+radius);
    ph.lineTo(width, height/2);
    ph.lineTo(width/2, height/2-radius);
    canvas.drawPath(ph, paint);
   
   
     Bitmap bruno = BitmapFactory.decodeResource(getResources(),
             R.drawable.giordanobruno);

canvas.drawBitmap(bruno,width/2-bruno.getWidth()/2, height/2-bruno.getHeight()/2,null);
paint.setColor(Color.MAGENTA);
paint.setTextSize(40);
String headline="Hypatia Software Solutions";


 float textwidth=paint.measureText(headline);

canvas.drawText(headline,width/2-textwidth/2,height/4,paint);
   
   
    }
}

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">Hypatia Drawing Basics Activity!</string>
    <string name="app_name">Hypatia  Drawing  Basics</string>

</resources>

The app as it appears in the emulator.

 

Next we shall attempt moving graphics.