Pr.Pg Next Pg

Custom SurfaceView tutorials



  • Views are all drawn on the same GUI thread which is also used for all user interaction.

  • So if you need to update GUI rapidly or if the rendering takes too much time and affects user experience then use SurfaceView.

  • In this tutorial we are going to implement animations using the SurfaceView instead of the View.

  • We demonstrate this using class for the activity named

  • In this class, we will also e having a nested class named MySurfaceClass, which implements Runnable

  • The inner class will have a thread basically handling the animations instead of the invalidating and calling the onDraw() method again and again which was the case with View.

  • The outer class will create an object of the Inner class which will run the thread that will draw on the surface.

  • The code will be explained later.


Surface Holder

  • Abstract interface to someone holding a display surface.

  • Allows you to control the surface size and format, edit the pixels in the surface, and monitor changes to the surface.

  • This interface is typically available through the SurfaceView class.

  • When using this interface from a thread other than the one running its SurfaceView, you will want to carefully read the methods lockCanvas() andCallback.surfaceCreated().

  • Below is the code for our activity.


package com.example.helloandroid;



import android.content.Context;




import android.os.Bundle;

import android.view.MotionEvent;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.View;

import android.view.View.OnTouchListener;


public class Graphics_ext extends Activity implements OnTouchListener {

MySurfaceClass surfaceView;

float x, y;



protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub


surfaceView = new MySurfaceClass(this);


x = 0;

y = 0;





protected void onPause() {

// TODO Auto-generated method stub






protected void onResume() {

// TODO Auto-generated method stub






public boolean onTouch(View arg0, MotionEvent arg1) {

// TODO Auto-generated method stub

x = arg1.getX();

y = arg1.getY();

return true;


public class MySurfaceClass extends SurfaceView implements Runnable {


SurfaceHolder holder;

Thread mythread = null;

boolean running=false;

Bitmap bm;


public MySurfaceClass(Context context) {

// TODO Auto-generated constructor stub



holder = getHolder();



public void run() {

// TODO Auto-generated method stub



Canvas mycanvas = holder.lockCanvas();

mycanvas.drawRGB(120, 254, 36);


bm=BitmapFactory.decodeResource(getResources(), R.drawable.extra);

mycanvas.drawBitmap(bm, x-bm.getWidth()/2, y-bm.getHeight()/2, null);





public void pause(){

running = false;




}catch(InterruptedException e){






public void resume(){

running = true;

mythread = new Thread(this);







Code Explanation

  • Now we will go throught the code.

  • First we set up a class named Graphics_ext.

  • In this class we set the ContentView to our custom Content View which we have defined in the class MySurfaceClass which is an inner class.

  • Then we have initialised the variables like x and y whose purpose is explained later.

  • We have overriden the onPause() method for the activity so that we stop the thread that is drawing on the surface when the activity goes into the paused state.

  • Similarly we have overriden the onResume() method.

  • We have an inner class whose object we have made earlier named surfaceView.

  • Inside this class we have a Surface Holder and a thread which draws on the surface..

  • We also define a variable named running which shows whether the thread is active or not.

  • Inside the run method of the thread, if the surface is valid, we lock the canvas using the holer so that no other activity or instance can use the canvas.

  • Then we draw in it. In this case we also draw a BitMap at the location specified by the parameters.

  • The X and Y variables are float values which get the pixels where the touch was made.

  • This is extracted using the getX() and getY() methods within the onTouch() method.

  • After drawing on the surface we unlock the canvas using the holder.

  • In the final part of the code we have defined the pause() and resume() method of the thread.

  • In the pause() method we destroy the thread and the resume() method we restart the thread.

  • The image icon will apear wherever u touch on the screen and it will also drag if u do so.


Pr.Pg border                                              Next Pg