Pr.Pg Next Pg

Custom SurfaceView tutorials

 

Introduction

  • 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 Graphics_ext.java.

  • 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().

 

Graphics_ext.java

  • Below is the code for our activity.

 

Graphics_ext.java

 

package com.example.helloandroid;

 

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

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;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

surfaceView = new MySurfaceClass(this);

surfaceView.setOnTouchListener(this);

x = 0;

y = 0;

setContentView(surfaceView);

}

 

@Override

protected void onPause() {

// TODO Auto-generated method stub

super.onPause();

surfaceView.pause();

}

 

@Override

protected void onResume() {

// TODO Auto-generated method stub

super.onResume();

surfaceView.resume();

}

 

@Override

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

super(context);

 

holder = getHolder();

}

@Override

public void run() {

// TODO Auto-generated method stub

while(running){

if(!holder.getSurface().isValid())continue;

Canvas mycanvas = holder.lockCanvas();

mycanvas.drawRGB(120, 254, 36);

if(x!=0&&y!=0){

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

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

}

holder.unlockCanvasAndPost(mycanvas);

}

}

public void pause(){

running = false;

while(true){

try{

mythread.join();

}catch(InterruptedException e){

e.printStackTrace();

}

break;

}

}

public void resume(){

running = true;

mythread = new Thread(this);

mythread.start();

}

}

}

 

 

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