Prerequisites: How to run a Hello World program for android.
So here you should know how to create a new project in eclipse with the following values as shown in the figure below.
Project Name: DisplayImage
Target Name: Android 2.1
Application Name: DisplayImage
Package Name: com.MobileAppsDev.DisplayImage
Create Activity: DisplayImage
Now under your source file of the “DisplayImage” project you will see the following code in DisplayImage.java file
This is the same code you have seen several time as automatically generated by eclipse.
Now to display an image we need a custom view for this we will create an inner class called DrawingBoard.java. This class will extends the view class and we override the onDraw(Canvas) method to draw our image on the screen. Our class will looks like this.
class DrawingBoard extends View {
public DrawingBoard (Context context) {
super(context);
}
@Override
public void onDraw(Canvas canvas) {
//code for drawing
}
}
Now we are ready to draw image on the canvas. For this we place the image in drawable folder under the resource folder. In our case its name is “hut.png “
Now add the following lines to the onDraw(Canvas) method.
public void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.hut);
canvas.drawBitmap(_scratch, 5, 15, null);
}
Here the first line is to set the background color to white.In the second line we are getting our “hut.png” image from drawable under resources folder using BitmapFactory. Where in the third line we are finally drawing our image keeping (x,y) coordinate as (5,15). You should know that here at the top left of the screen we have coordinates (0,o).
To use the our inner custom view class in our main activity, we will modify the method setContentView in DisplayImage.java class as shown below.
setContentView(new DrawingBoard(this));
So finally our complete code will be like this as shown below.
(just copy and paste the below code to have working project)
package com.MobileAppsDev.DisplayImage;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
public class DisplayImage extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new DrawingBoard(this));
}
class DrawingBoard extends View {
public DrawingBoard (Context context) {
super(context);
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.hut);
canvas.drawBitmap(_scratch, 5, 15, null);
}
}
}
After executing the code we will have the output like this.
Addition to this on canvas you can draw lines, rectangles, circles and other many graphic items.
For example now we draw following items on the same screen addition to our hut.png.
1) Two red circles circles of radius 10 on (30,160) and (200,160)
2) A line from (5,150) to (225,150)
So for this add the following lines to onDraw(Canvas) method.
Paint paint=new Paint();
paint.setColor(Color.RED);
canvas.drawCircle(30, 160, 10, paint);
canvas.drawCircle(200, 160, 10, paint);
paint.setColor(Color.BLUE);
canvas.drawLine(5, 150, 225, 150, paint);
In the first line the paint object is to set the look and feel. As in our case we will use it to change the our stroke color. Rest of the code is self explanatory. After adding these lines our screen display will be like this.
Here are saveral methods associaate with canvas. Readers are encourage to see API references provided by google at http://developer.android.com/reference/android/graphics/Canvas.html or check the possibility using eclipse as you can see below.
