Lavekush Agrawal Lavekush Agrawal - 6 days ago 8
Android Question

Android TextView counter with Top/Down Animation

We have got a TextView that I would like to count down (9...3...2...1...0 or 0...1...3..6..9 stuff happens).

Like this(As any kind meter is working):

enter image description here

To make it a little more interesting, I want each digit come from top to bottom or bottom to top ?

Right now I using listview for achieving this, I have also tried with

TextSwitcher
but its have a limitation of two child only.

I'm using
getListView().smoothScrollToPosition(0...3...6...6...n)
;

Is there a simple way of doing this? because right now , we need to maintain 3
ListView
and
Adapter
as well for maintaining this.

Please refer link to more understand this question

Display StopWatch Timer animated like the petrol pump meter using NSTimer

Answer

ListView's might be good enough solution, but I've implemented it with a custom View (FrameLayout), which contains inside 2 TextViews, which are animating based on the value changes:

enter image description here

The idea of code is very basic:

  • You pass to setValue desired value;
  • If it's bigger than current one - start animation from from bottom to top (and vice versa) to increment/decrement current value by 1. Here, we animating two TextViews to replace each other;
  • In AnimationEnd listener, check if we reached desired value - if not - do one more run (recursively);

        public class DigitTextView extends FrameLayout {
    
            private static int ANIMATION_DURATION = 250;
            TextView currentTextView, nextTextView;
    
            public DigitTextView(Context context, AttributeSet attrs) {
                super(context, attrs);
                init(context);
            }
    
            public DigitTextView(Context context) {
                super(context);
                init(context);
            }
    
            private void init(Context context) {
                LayoutInflater.from(context).inflate(R.layout.digit_text_view, this);
                currentTextView = (TextView) getRootView().findViewById(R.id.currentTextView);
                nextTextView = (TextView) getRootView().findViewById(R.id.nextTextView);
    
                nextTextView.setTranslationY(getHeight());
    
                setValue(0);
            }
    
            public void setValue(final int desiredValue) {
                if (currentTextView.getText() == null || currentTextView.getText().length() == 0) {
                    currentTextView.setText(String.format(Locale.getDefault(), "%d", desiredValue));
                }
    
                final int oldValue = Integer.parseInt(currentTextView.getText().toString());
    
                if (oldValue > desiredValue) {
                    nextTextView.setText(String.format(Locale.getDefault(), "%d", oldValue-1));
    
                    currentTextView.animate().translationY(-getHeight()).setDuration(ANIMATION_DURATION).start();
                    nextTextView.setTranslationY(nextTextView.getHeight());
                    nextTextView.animate().translationY(0).setDuration(ANIMATION_DURATION).setListener(new Animator.AnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animation) {}
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            currentTextView.setText(String.format(Locale.getDefault(), "%d", oldValue - 1));
                            currentTextView.setTranslationY(0);
                            if (oldValue - 1 != desiredValue) {
                                setValue(desiredValue);
                            }
                        }
                        @Override
                        public void onAnimationCancel(Animator animation) {}
                        @Override
                        public void onAnimationRepeat(Animator animation) {}
                    }).start();
                } else if (oldValue < desiredValue) {
                    nextTextView.setText(String.format(Locale.getDefault(), "%d", oldValue+1));
    
                    currentTextView.animate().translationY(getHeight()).setDuration(ANIMATION_DURATION).start();
                    nextTextView.setTranslationY(-nextTextView.getHeight());
                    nextTextView.animate().translationY(0).setDuration(ANIMATION_DURATION).setListener(new Animator.AnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animation) {}
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            currentTextView.setText(String.format(Locale.getDefault(), "%d", oldValue + 1));
                            currentTextView.setTranslationY(0);
                            if (oldValue + 1 != desiredValue) {
                                setValue(desiredValue);
                            }
                        }
                        @Override
                        public void onAnimationCancel(Animator animation) {}
                        @Override
                        public void onAnimationRepeat(Animator animation) {}
                    }).start();
                }
            }
        }
    

And it's XML:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="56dp"
    android:padding="8dp"
    android:background="@drawable/rounded_blue_rect">
    <TextView
        android:id="@+id/currentTextView"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/nextTextView"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

And it's very easy to use:

Add to layout:

<klogi.com.myapplication.DigitTextView
    android:id="@+id/digitTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

And set Value in code:

DigitTextView digitTextView = (DigitTextView) findViewById(R.id.digitTextView);
digitTextView.setValue(5);

Upd:
Another option to use, from what I see, is to set up a bit customized NumberPicker

I hope, it helps!

Comments