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:

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 ?
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.
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 ?
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.
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
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.
July 13th, 2009 on 5:04 am
hello, this series are very good,and i wish you can continue it.
thanks.
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
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.
July 22nd, 2009 on 9:56 am
thanks
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.
September 25th, 2009 on 11:33 pm
Hey i was wondering. can i use a transition animation on that?
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!
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!
November 5th, 2009 on 3:38 am
Thanks for the tutorial man.
January 8th, 2010 on 7:20 am
Thanks Dude!!
Nice tutorial
January 12th, 2010 on 10:38 am
simply superb TX for sharing
January 15th, 2010 on 7:29 am
How can i create background color using canvas, can anyone share some codes. Thanks
January 15th, 2010 on 9:37 am
Have you read the tutorial? Try to use canvas.drawColor(Color.BLUE)
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
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!
January 16th, 2010 on 12:20 am
Ah ok thank you Martin.
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?
January 16th, 2010 on 1:09 am
You can try it with this method:
This will be used in the sixth part.
You should read the next parts of the tutorial
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
February 1st, 2010 on 7:01 pm
Well, thats on my ToDo list because I have done exactly that on the last project.
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