animate number change

Question

i want to build a component that will be able to show a integer number max 5 digits in the style of the old analog car counters and animate the digit change.

that looks something like this maybe...

i have tried searching for this kinda of examples but i couldn't find anything so far.

in your opinion what is the best approach to achieve this?

i looked at the iphone alarm time picker and as far as i can tell there is only a fixed background and they push the numbers in or out the view. but how do i place the digits in this case and reference them to a particular value?

tnx.

Answer 1

You can try to create your own view, extending view and overriding onDraw(). Here you can use rows of numbers in bitmaps and editing their position based on the number you wish to show. Dont forget to call invalidate() after setting new numbers to redraw the view.

I will paste an example containing a start for your project. The bitmap number is a vertical image with numbers from 1-9 (and 0&.)

Ex.

class TickerView extends View { .. 


public void setDouble(double d) {
        value = d;
        invalidate();
    }
        protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int startx = 0;
        int starty = 0;
        DecimalFormat df = new DecimalFormat("#0.00");
        String str = df.format(value);
        String original = Double.toString(value);

        Bitmap nums = BitmapFactory.decodeResource(context.getResources(),
                R.drawable.numbers);

        for (int i = 0; i < str.length(); i++) {
            int num = 0;
            try {
                num = Integer.parseInt(str.charAt(i) + "");
            } catch (Exception e) {
                num = 10;
            }
            int numbefore = 0;
            try {
                numbefore = Integer.parseInt(original.charAt(i -1) + "");
            } catch (Exception e) {
                numbefore = 0;
            }

            canvas.drawBitmap(nums, startx + (i * 40), (starty + 40)
                    - (num * 50) + (numbefore), paintY);

        }
        paintY.setStrokeWidth(10);
        canvas.drawLine(startx, starty+36, startx + (str.length() * 40), starty+36,
                paintY);
        canvas.drawLine(startx, starty + 90, startx + (str.length() * 40),
                starty + 90, paintY);
        invalidate();
    }


}