What would be a method for creating a number counter in Android?

Question

I want to create a scrolling counter that rises at a rate I give it for an Android app, I feel like there is no Android widget that does this well in the SDK and I wanted some idea how this should be accomplished, or even better an open source project around this idea.

Picture example:

Answer 1

This might not be a perfect answer, but at least a starting point. Discounting the animation and general fanciness, you can get most of the way there just by decorating a TextView with some fancy XML. I'll share what I did a few years ago to make a similar-looking screen area for a tip calculator:

Here's the XML. Each single digit is one TextView so you can change them individually. I'm showing two here but obviously there were 5 for the screenshot below.

 <TextView
    android:id="@+id/tv1"
    android:layout_width="60dip" 
    android:layout_height="140dip"
    android:background="@drawable/gradient"
    android:textSize="64sp"
    android:gravity="center"
    android:typeface="serif"
    android:textColor="#FFFFFF"
/>
<TextView
    android:id="@+id/tv2"
    android:layout_width="60dip" 
    android:layout_height="140dip"
    android:background="@drawable/gradient"
    android:textSize="64sp"
    android:gravity="center"
    android:typeface="serif"
    android:textColor="#FFFFFF"
/>

And the "drawable/gradient" I created as a separate drawable file:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1dip"
        android:color="#fbbb"
/>
<solid android:color="#600000"/>
<layout_margin android:layout_margin="1dip"/>
<gradient
    android:startColor="#000000"
    android:centerColor="#6D6D6D"
    android:endColor="#000000"
    android:angle="270"
/>

Here's the final result (inside a linearlayout):

Answer 2

In Addition to raggedToad's answer: You can use the ViewAnimator class to add animations to your counter. Its easy to use. You can extend it, add all the digit textviews in onCreate(). Implement a method increment that handles the increment operation. Just call showNext to flip to the next view.

Answer 3

I'm pretty sure that this particular counter in your screenshot has some short animations (about 5 or 10 frames) for each transition from one number to the next. Maybe there are also some more for showing rapid transitions without actually stopping at the particular number with more blurring.

So the main task would be creating the graphics. Then it's just a matter of displaying the right frame at the right time.

Answer 4

There's an open source project that does the exact thing you are trying to do. Check: http://code.google.com/p/android-wheel/