Skip to content
September 13, 2010 / Daniel Freeman

Dr Android Answers: Graphics

Mei Ling sent me the following question:-

I’m trying to create an Android Color Book application.

I’ve tried using the library but it doesn’t seem to work. I believe the idea is to create an area which is recognizable by the application and by clicking on the area, the library would populate the selected area with the selected colors.

But I’m not sure which library should I use. As such, could you please advice me on the correct approach/library I should use?


Let’s talk about the approach.

At the outset, there’s a decision.  Bitmap or vector?  While it is possible to define your shapes as bitmaps, and alter their colour.  (Note the British English spelling with a “u”).  I want to pursue the vector way of doing things.

In the course, we used Canvas graphics within the onDraw() method of View or SurfaceView, like this:-

public class GraphThing extends View {

	protected static final float POSITION = 40.0f;
	protected static final float RADIUS = 32.0f;

	public GraphThing(Context context) {

    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        canvas.drawCircle(POSITION, POSITION, RADIUS, paint);

For your colouring book, I think it’s best to use View, not SurfaceView, and draw all the shapes as outlines initially. When the user clicks on a shape to colour it in – redraw it, ( invalidate() ) but with a colour filling.

How do we know if you’re clicking on a particular shape? You’ll have to but in some logic to make a decision based on the co-ordinates of your touch event. No need to be precise. Use a rectangular (x>x0 && x<x1 && y>y0 && y<y1), or circular ((x-x0)*(x-x0)+(y-y0)*(y-y0) < r*r ) or elliptical hit area.

I think the main issue is where you get your pictures from? Take a look at

These are .svg files. Although there are libraries for displaying .svg files, we probably want control over every path. We probably want to put each path inside a different view, and initially just draw black outlines. So we’ll be extracting the information we need from an .svg file, and using it inside our own drawing code. For example, a path that is defined like this:

d=”m -696.68139,700.23613 c 2.01698,-7.28388 20.55513,-7.05909 25.63256,-8.77305 0,0 -1.91288,38.43437 3.0606,57.65155 -7.68767,-0.42893 -8.41665,-1.67106 -8.41665,-1.67106 0,0 -11.47727,-41.7765 -20.27651,-47.20744 z”

This example describes a closed shape with starting point, and a lot of relative cubic splines.

You might make this into an array of values to create a Path. You can do this manually, or automatically. (Parse the XML file, and use regular expressions to insert commas, and then split into an array.)

Anyway, I hope I’ve given you some clues. We can discuss this in much more detail at the Android clinic tomorrow.


To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: