Mei Ling sent me the following question:-

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

I’ve tried using the android.graphics.drawable 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?

Thanks!

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) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(3);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        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 http://www.openclipart.org

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.

Advertisements