Using Bitmap to store canvas paint to optimize UI fluency in Android

This week, I was writing an android program where I have an ImageView that is being updated very frequently. The MVC pattern is used there. Basically, I have a model that stores the location and color of many circles and the ImageView will repaint each of them on its onDraw method, which looks like this:

	@Override protected void onDraw(Canvas canvas) {
	canvas.drawColor(Color.WHITE);
	Paint paint = new Paint();
	paint.setStyle(Style.FILL);
	for (int i = 0; i < model.size; i++) {
	for (int j = 0; j < model.size; j++) {
	int level = model.state[i][j];
	int blockSize = (int) Math.pow(2, level);
	int pixelBlockSize = blockSize * model.SMALLEST_SIZE;
	if ((i % blockSize) == 0 && (j % blockSize) == 0) {
	Log.v(TAG, "level, x, y, size are " + (model.maps.length - level - 1) + ", " + (i / blockSize) + ", " + (j / blockSize) + ", " + model.maps[level].getHeight());
	paint.setColor(model.maps[model.maps.length - level - 1].getPixel(i / blockSize, j / blockSize));
	Log.v(TAG, "level is " + level + ", pixelBlockSize to circle is " + pixelBlockSize);
	canvas.drawCircle(i * model.SMALLEST_SIZE + pixelBlockSize / 2, j * model.SMALLEST_SIZE + pixelBlockSize / 2, pixelBlockSize / 2, paint);
	}
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Unfortunately, this scales badly and gets really slow when the circle list in the model gets large. The key to a better solution is that the model only changes a little each time in most cases. In my case, I am removing one circle and adding 4 new circles each time. A better solution will be creating a Bitmap and store it either in the model or the view, so that it is regularly updated when the model changes. Each time the model is changed, we only need to erase one circle and draw another 4 on this Bitmap. For the ImageView, the onDraw method simply load the bitmap, which internally is just a memcpy and takes only a few millisecond. In other words, you don't redraw what is not changed.

	@Override protected void onDraw(Canvas canvas) {
	canvas.drawColor(Color.WHITE);
	Paint paint = new Paint();
	canvas.drawBitmap(model.map, 0, 0, paint);
	}

view raw gistfile1.java hosted with ❤ by GitHub

Finally, you can draw circle on the Bitmap easily by first create a Canvas onto it then draws on the Canvas in exactly the same way you normally do in an onDraw method. The following code snippet is what I used in my program. When I create a Bitmap:

	map = Bitmap.createBitmap(size * SMALLEST_SIZE, size * SMALLEST_SIZE, Bitmap.Config.ARGB_8888);
	canvas = new Canvas(map);

view raw gistfile1.java hosted with ❤ by GitHub

When the model changes:

	paint.setColor(Color.WHITE);
	canvas.drawRect(x, y, x + size, y + size, paint);
	paint.setColor(color);
	canvas.drawCircle(x + size / 2, y + size / 2, size / 2, paint);

view raw gistfile1.java hosted with ❤ by GitHub

This will modify the underlying Bitmap. Of course, the Bitmap must be mutable.