Android Development

Playing with graphics in Android – Part I

by Martin on May.06, 2009, under tutorial

The first part of this series will show you, how to display an image in a normal View.

First we create a new Project with the activity named Tutorial2D.
We will see this:

1
2
3
4
5
6
7
8
9
10
11
12
13

package com.droidnova.android.tutorial2d;
 
import android.app.Activity;
import android.os.Bundle;
 
public class Tutorial2D extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

This should look familiar to you.

The first thing we should add is our custom view. Lets create an inner class named Panel which extends from the View class and override the method onDraw(Canvas) because we want to draw a bitmap per default.
The inner class looks like that.

1
2
3
4
5
6
7
8
9

class Panel extends View {
    public Panel(Context context) {
        super(context);
    }
 
    @Override
    public void onDraw(Canvas canvas) {
    }
}

The next step is to program our onDraw(Canvas) method. We will use the default application icon for displaying.
To get the icon as bitmap, we have to use the BitmapFactory class.

1

Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.icon);

To make the background black, we will use the drawColor(Color) method of our Canvas object.

1

canvas.drawColor(Color.BLACK);

Finally we draw our bitmap on the coordinates 10/10.

1

canvas.drawBitmap(_scratch, 10, 10, null);

Finally the method will look like that:

1
2
3
4
5
6

@Override
public void onDraw(Canvas canvas) {
    Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
    canvas.drawColor(Color.BLACK);
    canvas.drawBitmap(_scratch, 10, 10, null);
}

Now we have to use our custom view to be displayed, so lets change the setContentView() (line 5). Additionally we want to have a window without a title (line 4).

1
2
3
4
5
6

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(new Panel(this));
}

Finally we will have this code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package com.droidnova.android.tutorial2d;
 
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;
import android.view.Window;
 
public class Tutorial2D extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(new Panel(this));
    }
 
    class Panel extends View {
        public Panel(Context context) {
            super(context);
        }
 
        @Override
        public void onDraw(Canvas canvas) {
            Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
            canvas.drawColor(Color.BLACK);
            canvas.drawBitmap(_scratch, 10, 10, null);
        }
    }
}

Start this on your Emulator / Device and it should look like that:
Simple graphic with Android

Go to Playing with graphics in Android – Part II

  • Share/Bookmark
:, , , ,

27 Comments for this entry

  • Danesh
    June 18th, 2009 on 6:34 am

    Hey how do i implement ur program into a program where i can move a pic using the scroll wheel ?

  • Martin
    June 18th, 2009 on 1:45 pm

    I would recommend to read the other parts of this series.
    Event handling will be discussed later. The onTouchEvent in part III.

    There you will find anything you need.

  • Danesh
    June 18th, 2009 on 10:35 pm

    Hey so i got that figured out…now im following a tutorial regarding splash screens..ne idea how to implement them in ur code ?

  • Martin
    June 19th, 2009 on 6:45 am

    The easiest thing would be to use different Activities and call our Activity after your Splash-Screen finished.

  • John
    June 20th, 2009 on 7:12 pm

    Hey man im tryin to play 2 pics one after another…n if i use the sleep function in middle..it lagss but the pictures still appear together not one after another ? wht to do

  • Martin
    June 20th, 2009 on 9:45 pm

    If you want to do an animation, I recommend you the sample from google: Frame animation
    Another way is to read the other parts of my series. The things you need should be handled there.

  • liuhello
    July 13th, 2009 on 5:04 am

    hello, this series are very good,and i wish you can continue it.
    thanks.

  • shashank
    July 21st, 2009 on 8:19 am

    Hey Thanks for This Post Its awsome
    I am Facing one Problem
    i have a raw folder inside res and inside that raw i have one PNG file i am opening it with Inputstream and i am creating a Drawble Object using that Inputstream and i m setting it to Imageview object USing view.setDrawableImage but i am getting exception every time
    can u tell me what is the solution
    Inputstream and Drawble object are not null i have checked it allread

    Thanks and Regadrs
    Shashank Shekhar

  • Martin
    July 21st, 2009 on 8:45 am

    Hi Shashank,

    I am sorry, but assistance for coding problems is not part of my blog. I only help on forums like Anddev.org. I am active there so please post your problem there and the community will find a solution and I will help, too.

  • Ates Goral
    August 18th, 2009 on 8:23 pm

    Thanks for this concise crash course! The rest will come easy, digging into the API reference, snooping around forums etc. I find the initial start to always be the hardest part of learning dev on a new platform.

  • polocks
    September 25th, 2009 on 11:33 pm

    Hey i was wondering. can i use a transition animation on that?

  • samuh
    October 7th, 2009 on 9:45 am

    You might want to move the BitmapFactory.decodeResource(..) call outside of onDraw(). You wouldnt want to create a new Bitmap on every onDraw call.

    Nice tutorial though!

    Thanks!

  • LinXiT
    October 18th, 2009 on 7:50 pm

    Thanks man, this tutorial series is exactly what I was looking for, you are going to make my life easier!

  • asdefi
    November 5th, 2009 on 3:38 am

    Thanks for the tutorial man.

  • Dev
    January 8th, 2010 on 7:20 am

    Thanks Dude!!
    Nice tutorial

  • Kiran PMS
    January 12th, 2010 on 10:38 am

    simply superb TX for sharing

  • Manolo
    January 15th, 2010 on 7:29 am

    How can i create background color using canvas, can anyone share some codes. Thanks

  • Martin
    January 15th, 2010 on 9:37 am

    Have you read the tutorial? Try to use canvas.drawColor(Color.BLUE)

  • Manolo
    January 15th, 2010 on 11:55 pm

    Thanks, I created a class for canvas. How can i do that, I have errors appeared (uncaught exception) when selecting button to display the canvas class. Anyone can help me about this because it’s my first time developing android apps,thanks again

  • Martin
    January 16th, 2010 on 12:15 am

    Ok, because of what you described, i really really recommend you to do the tutorial series which started above. There you will learn the basics. As long as you don’t understand canvas and drawing, you should do my tutorial… it will save you nervs and time and the reward will be knowledge!

  • Manolo
    January 16th, 2010 on 12:20 am

    Ah ok thank you Martin.

  • Manolo
    January 16th, 2010 on 1:02 am

    I tried the tutorial thanks a lot, If i’m using the Image background on canvas it is possible. How?

  • Martin
    January 16th, 2010 on 1:09 am

    You can try it with this method:

    1

    canvas.drawBitmap(yourBitmap, 0, 0, null);

    This will be used in the sixth part.
    You should read the next parts of the tutorial :)

  • mnish
    February 1st, 2010 on 3:44 pm

    Hi,

    Thank you alot for your great tutorials. I learned alot from them.

    Althogh I followed the tutorials but I still can’t draw a line between two points on google map.

    Could you please make a small tutorial for this matter?

    Thank you very much

  • Martin
    February 1st, 2010 on 7:01 pm

    Well, thats on my ToDo list because I have done exactly that on the last project.

  • Shankar
    February 23rd, 2010 on 9:12 am

    Hi Dude..
    Very useful basic graphics functionalities here.I’m new for android graphics.Its very useful for me..

    Thanks Lot

Leave a Reply