GUI, widgets, UI: how would I go about creating a needle gauge?

Question

OK, Brief recap, Was asked to create an app for work that records data specific data and display it to the screen when finished. So it would function like so.

press start > press stop > display results.

However, I have just been told by the IT director of my company that he wants to display information in needle graphs (g-force, average speed, top speed) and also wants a flashy way of displaying the others (time taken, distance traveled)

My initial idea is this:

create a needle gauge like this, but on a smaller scale and have the digit value display below or beside the graph and to just display the distance traveled and time taken displayed as alarm clock style digits. This would all run down the left hand side of the screen in a thin column and then hava a map displaying the starting location and end location with the route taken for the journey

basically I would like it to look like this (sorry for the crudeness of the drawing) Something along these lines would be perfect!

I think I could work out the map business and the digits for the time and distance readouts but I have never done any really fancy UI stuff.

How would I get started making the needle gauge?

I was thinking of trying a horizontal bar gauge forst maybe? Incase I cant get the needle gauge to work.

Also, I only have a til tuesday! :S

Answer 1

invision the following very basic idea:

We have our Custom View with a background image which is the gauge without the needle!

So we first implement this using a class that extends View

public class ourGauge extends View {

    private Bitmap bgImage = null;

    public ourGauge(Context context, Bitmap bgImage) {
        super(context);
        this.bgImage = bgImage;
    }

    public ourGauge(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bgImage, 0, 0, null);
    }

}

Now lets add a needle

public class ourGauge extends View {

    private Bitmap bgImage = null;
    private int indicator;
    Paint paint = new Paint(); 

    public ourGauge(Context context, Bitmap bgImage) {
        super(context);
        this.bgImage = bgImage;
    }

    public ourGauge(Context context) {
        super(context);
    }

    public void setIndicator(int indicator){
        this.indicator = indicator;
        invalidate();
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bgImage, 0, 0, null);
        //you could set color based on indicator (speed or sth)
        paint.setColor(Color.BLACK); 
        canvas.drawLine(0, 0, 20, 20, paint);
        //you have to find the formula to get from where to where the line should drawn
    }

}

To make it better

1. Don't draw the needle using drawLine but rather make it a shape with dimensions
2. To create dynamic labels for speeds, you should draw them too
3. etc