Question

I’m not sure I’m doing this the “right” way, so I’m open to other options as well. Here’s what I’m trying to accomplish:

I want a view which contains a graph. The graph should be dynamically created by the app itself. The graph should be zoom-able, and will probably start out larger than the screen (800×600 or so)

I’m planning on starting out simple, just a scatter plot. Eventually, I want a scatter plot with a fit line and error bars with axis that stay on the screen while the graph is zoomed … so that probably means three images overlaid with zoom functions tied together.

I’ve already built a view that can take a drawable, can use focused pinch-zoom and drag, can auto-scale images, can switch images dynamically, and takes images larger than the screen. Tying the images together shouldn’t be an issue.

I can’t, however, figure out how to dynamically draw simple images.

For instance: Do I get a BitMap object and draw on it pixel by pixel? I wanted to work with some of the ShapeDrawables, but it seems they can only draw a shape onto a canvas … how then do I get a bitmap of all those shapes into my view? Or alternately, do I have to dynamically redraw /all/ of the image I want to portray in the “onDraw” routine of my view every time it moves or zooms?

I think the “perfect” solution would be to use the ShapeDrawable (or something like it to draw lines and label them) to draw the axis with the onDraw method of the view … keep them current and at the right level … then overlay a pre-produced image of the data points / fit curve / etc that can be zoomed and moved. That should be possible with white set to an alpha on the graph image.

PS: The graph image shouldn’t actually /change/ while on the view. It’s just zooming and being dragged. The axis will probably actually change with movement. So pre-producing the graph before (or immediately upon) entering the view would be optimal. But I’ve also noticed that scaling works really well with vector images … which also sounds appropriate (rather than a bitmap?).

So I’m looking for some general guidance. Tried reading up on the BitMap, ShapeDrawable, Drawable, etc classes and just can’t seem to find the right fit. That makes me think I’m barking up the wrong tree and someone with some more experience can point me in the right direction. Hopefully I didn’t waste my time building the zoom-able view I put together yesterday :).

Answer 1

First off, it is never a waste of time writing code if you learned something from it. 🙂

There is unfortunately still no support for drawing vector images in Android. So bitmap is what you get.

I think the bit you are missing is that you can create a Canvas any time you want to draw on a bitmap. You don’t have to wait for onDraw to give you one.

So at some point (from onCreate, when data changes etc), create your own Bitmap of whatever size you want.

Here is some psuedo code (not tested)

Bitmap mGraph;

void init() {
    // look at Bitmap.Config to determine config type
    mGraph = new Bitmap(width, height, config);
    Canvas c = new Canvas(mybits);
    // use Canvas draw routines to draw your graph
}

// Then in onDraw you can draw to the on screen Canvas from your bitmap.
protected void onDraw(Canvas canvas) {
    Rect dstRect = new Rect(0,0,viewWidth, viewHeight);
    Rect sourceRect = new Rect();
    // do something creative here to pick the source rect from your graph bitmap
    // based on zoom and pan 
    sourceRect.set(10,10,100,100);

    // draw to the screen
    canvas.drawBitmap(mGraph, sourceRect, dstRect, graphPaint);
}

Hope that helps a bit.