Android Canvas - A Beginner's Tutorial

So you want to make a game, do you? Do you want to compete with the likes of Angry Birds? Well, learning the Android Canvas is the best place to start.

Many people want to make Android games. I would assume that is why you are at my page. I hope that my tutorial will help you grasp a beginner's understanding of the SurfaceView class and the underlying Canvas class. That way, you'll be making your game or custom view in no time! So, let's start.

Step 1 - Make A Class

In order to start working with the SurfaceView and all of it's functions, you are going to have to extend from it. Create a new class file, and define it as:

    class DrawingPanel extends SurfaceView implements SurfaceHolder.Callback {


    }

Extending the SurfaceView class will allow you to create a view based on SurfaceView and place it into your Activity. Implementing the callback interface will allow you to be notified when the surface is created and destroyed, starting and stopping any current tasks or threads that you may be running when the Activity is created or ended, respectively.

Step 2 - Construct the Class
The next step is to construct the class with many of the important parts. We're going to need a constructor:


    public DrawingPanel(Context context) { 
        super(context);
        getHolder().addCallback(this);
    }


    @Override 
    public void onDraw(Canvas canvas) { 
        //do drawing stuff here.
    } 


    @Override 
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
        int height) { 


    }

As you can see in this code, we are setting up the new SurfaceView. The call to getHolder().addCallback(this) allows us to set up the methods in step 3. The onDraw(Canvas canvas) method will be where you construct what you are going to draw on the canvas. To draw on the canvas, you can use many methods, including:

• canvas.drawColor(color) //Draws a solid color
• canvas.drawLine(params) //Draws a line
• canvas.drawRect(params) //Draws a rectangle
• canvas.drawBitmap(params) //Draws a bitmap image
• other methods available at the Android reference site

Step 3 - Create the Drawing Thread
In this step, we will create a thread that will draw whatever we put into the onDraw() method, as it won't call itself.



class PanelThread extends Thread {
        private SurfaceHolder _surfaceHolder;
        private DrawingPanel _panel;
        private boolean _run = false;


        public PanelThread(SurfaceHolder surfaceHolder, DrawingPanel panel) {
            _surfaceHolder = surfaceHolder;
            _panel = panel;
        }


        public void setRunning(boolean run) { //Allow us to stop the thread
            _run = run;
        }


        @Override
        public void run() {
            Canvas c;
            while (_run) {     //When setRunning(false) occurs, _run is 
                c = null;      //set to false and loop ends, stopping thread


                try {


                    c = _surfaceHolder.lockCanvas(null);
                    synchronized (_surfaceHolder) {


                    //Insert methods to modify positions of items in onDraw()
                    postInvalidate();


                    }
} finally {
                    if (c != null) {
                        _surfaceHolder.unlockCanvasAndPost(c);
                    }
                }
            }
        }
    }


Something to note is that this tutorial will use postInvalidate() instead of a direct call to onDraw(). This is because, in my experience, I have found this method to be better for the system and for performance.

The thread code is pretty much copy-paste-able, however, if you want to change positions of any of the drawings, you will have to modify their positions in the section above the call to postInvalidate(). This is also pretty straight-forward, and (usually) requires you to use class-wide variables, stated in the original DrawingPanel class.

Next, we will start with implementing the onSurfaceCreated and onSurfaceDestroyed methods supplyed by the implemented callback in order to stop and start our thread:



    @Override
    public void surfaceCreated(SurfaceHolder holder) {


    setWillNotDraw(false); //Allows us to use invalidate() to call onDraw()


    _thread = new PanelThread(getHolder(), this); //Start the thread that
        _thread.setRunning(true);                     //will make calls to 
        _thread.start();                              //onDraw()
    }


    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    try {
        _thread.setRunning(false);                //Tells thread to stop
_thread.join();                           //Removes thread from mem.
} catch (InterruptedException e) {}
    }


Step 4 - Implement the SurfaceView
This is the easiest step, by far. Simply create a new instance of your View in your activity, and add it. Easy! Now you're done! Go out there and make some good games!