How does one implement a horizontally scrolling countdown timer?

Question

Goal I'd like to implement a countdown timer that just scrolls numbers (not graphics) from left to right.

Effect The effect would look like the number zooms in from the left, slows down towards the middle, and then zooms off to the right.

Notes Since I'm already using a TimerTask to execute code every second, I could use that to trigger the next number to scroll across the horizontally-scrolling textview.

Could this just be implemented as a textview inside a scrollview ? Looking for a code sample to start off with....

Answer 1

Using Animations would be the simplest solution. You can create your own or try and combine multiple TranslateAnimations and ScaleAnimations.

This would mean putting each number into its own TextView instead of using a scroll view.

Then you could control the acceleration to the middle with an Interpolator. Interpolators are how Android handles easing. You would probably want the AccelerateDecelerateInterpolator for the speeding up / slowing down effect.

You can use an AnimationSet to apply multiple animations to the same View. Figuring out how to put together a good AnimationSet will be the most challenging part of the project. Make sure to pay attention to the "fill" property. In fact after playing around a little, I think a custom animation is simpler than using the ready made ones.

You can fork my GitHub project that implements a very simple version of this. April 17 and before I used multiple pre made Animations. If you look at the most recent version, you'll see the custom animation.

The timing for each Animation takes care of itself after you set the duration for one Animation. A Handler calls the next number after the previous one finishes. I think this is a little neater than having to call a function every X seconds to update everything.

The outline of functionality:

• An Activity (CountDownActivity.java) over sees everything.
  
  • The Activitiy's layout XML has a button that is used to start the count down.
  • Once the countdown starts, the button disappears. It reappears when the count down is done.
• The Activity contains a Handler (MotionHandler.java). The Handler controls the movement and timing of the numbers.
  • The Handler uses a AnimationSet to move the numbers
    • The AnimationSet is a passed in dependency
      • This is for flexibility. Simply pass in a different AnimationSet to change how the numbers move
      • The AnimationSet is made of four Animations a custom Animation (see below)
  • The AnimationSet uses a shared AccelerateDecelerateInterpolator, which seems to work decently. There are other options, including writing your own.
  • The Handler uses a delayed message to start the next number
  • The Handler notifies the Activity when the count down is done using a custom listener (MotionHandler >> CountdownListener)
• Rotating the device will restart the count down.

Note - previously I was using four ready made Animations in one AnimationSet, I've edited to include just one custom Animation... You can tweak its algorithm to your liking.

This custom animation uses a Cycloid to make the numbers appear larger and smaller.

/**
 * A custom animation to move and scale the numbers.
 * 
 */
public class NumberAnimation extends Animation
{
    final public static float MINIMUM = 3;
    private int mHorizontal;
    private int mScaling;

    public NumberAnimation(int horizontalMovement, int scaling)
    {
        mHorizontal = horizontalMovement;
        mScaling = scaling;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t)
    {
        // Cycloid repeats every 2pi - scale interpolatedTime to that
        double time = 2 * Math.PI * interpolatedTime;
        // Cycloid function
        float currentScale = (float) (mScaling * (1 - Math.cos(time))) + MINIMUM;
        Matrix matrix = t.getMatrix();
        matrix.preScale(currentScale, currentScale);
        matrix.postTranslate(mHorizontal * interpolatedTime, 0);
    }
}