Draw A Graphic To A SurfaceView Using Native Android

There are many ways to create mobile Android games. For example you can use a framework like Unity3D or Unreal Engine, or you can use native APIs like the SurfaceView canvas or OpenGL. All the different methods have their pros and cons.

In this particular example we’re going to see how to render graphics to the Android screen by extending the SurfaceView class and a canvas.

The Android canvas is not a good solution for every scenario. It is very easy to work with, but can be very slow when it comes to many animations. It is great for slower paced games such as Minesweeper, Solitaire, or anything similar with minimal animations.

Let’s start by creating a fresh Android project from the command line or terminal:

android create project --activity GameActivity --package com.nraboy.canvasapp --target android-19 --path ./canvasapp --gradle --gradle-version 0.11.+

As you can see, we are going to be using Gradle as our build tool rather than Apache Ant.

We’re going to be coding in two different files in our project. We are going to loosely touch the activity that gets loaded when we open our application, and create a view to contain our graphics.

Now we’re going to start with the simplest of our two files. Open the src/main/java/com/nraboy/gameapp/GameActivity.java file and add the following source code:

package com.nraboy.canvasapp;

import android.app.Activity;
import android.os.Bundle;

public class GameActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new GameView(this));
    }

}

As you can see, we’re only creating a new view which will be the GameView class of our next file. Next we’re going to open our src/main/java/com/nraboy/gameapp/GameView.java file and add the code necessary for configuring our drawing canvas and preparing our graphics.

package com.nraboy.canvasapp;

import android.content.*;
import android.view.*;
import android.graphics.*;

public class GameView extends SurfaceView {

    private SurfaceHolder holder;
    private Bitmap bmp;

    public GameView(Context context) {
        super(context);
        this.bmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
        holder = getHolder();
        holder.addCallback(new SurfaceHolder.Callback() {

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) { }

            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas canvas = holder.lockCanvas();
                if (canvas != null) {
                    draw(canvas);
                    holder.unlockCanvasAndPost(canvas);
                }
            }

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

        });
    }

    public void draw(Canvas canvas) {
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(this.bmp, 25, 25, null);
    }

}

In the above code we are rending the Android launcher icon to the screen by first loading it and then drawing it to the canvas. Not much to it.

As you’ll see in future tutorials, it is recommended you create a dedicated thread for managing your canvas so you don’t lock your UI thread and crash your application.

To see this in action, run the following from the command prompt or terminal to build the project:

./gradlew assemble

Then you can install the APK file generated in the build/output/apk directory.

Conclusion

There are a ton of different ways to render graphics to the screen for a game. The SurfaceView is just one of many and probably the easiest to use in my opinion. It won’t give you the best performance, but if you’re doing something with few to no animations, it won’t matter since lag won’t be noticeable.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.