Text color animation

Question

Is there a way to animate a text color change (from anycolor to white)?

The only variant I came up with, is placing two textviews (with the same text) in one place, and fading the top one, so the bottom one (that has a white color) will become visible.

P.S. I scrapped the variant of the 2 TextViews since it looked weird (edges weren't smooth and, since I have a lot of such elements on the screen it was really lagging the scrolling). What I did, was a crazy hack that does the animation with the use of a Thread and setTextColor (that also forces redraw of a textview).

Since I needed only 2 color changes (from red to white, and from green to white) I hardcoded the values and all of the transition colors between them. So here's how it looks:

public class BlinkingTextView extends TextView {
public BlinkingTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public void animateBlink(final boolean red) {
    if (animator != null) {
        animator.drop();
    }
    animator = new Animator(this, red);
    animator.start();
}

public void clearBlinkAnimation() {
    if (animator != null) {
        animator.drop();
    }
}

private Animator animator;

private final static class Animator extends Thread {
    public Animator(final TextView textView, final boolean red) {
        this.textView = textView;
        if (red) {
            SET_TO_USE = RED;
        } else {
            SET_TO_USE = GREEN;
        }
    }

    private TextView textView;

    private final int[] SET_TO_USE;

    private final static int[] RED = {
        -2142396,
        -2008754,
        -1874854,
        -1740697,
        -1540490,
        -1405563,
        -1205099,
        -1004634,
        -804170,
        -669243,
        -469036,
        -334879,
        -200979,
        -67337,
        -1
    };
    private final static int[] GREEN = {
        -6959821,
        -6565826,
        -6106293,
        -5646758,
        -5055894,
        -4530309,
        -3939444,
        -3283042,
        -2692177,
        -2166592,
        -1575728,
        -1116193,
        -656660,
        -262665,
        -1
    };

    private boolean stop;

    @Override
    public void run() {
        int i = 0;
        while (i < 15) {
            if (stop) break;
            final int color = SET_TO_USE[i];
            if (stop) break;
            textView.post(new Runnable() {
                @Override
                public void run() {
                    if (!stop) {
                        textView.setTextColor(color);                       
                    }
                }
            });
            if (stop) break;
            i++;
            if (stop) break;
            try {
                Thread.sleep(66);
            } catch (InterruptedException e) {}
            if (stop) break;
        }
    }

    public void drop() {
        stop = true;
    }
}
}

Answer 1

You can use new Property Animation Api for color animation:

Integer colorFrom = getResources().getColor(R.color.red);
Integer colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        textView.setTextColor((Integer)animator.getAnimatedValue());
    }

});
colorAnimation.start();

For backward compatability with Android 2.x use Nine Old Androids library from Jake Wharton.

Answer 2

The Easiest solution will be to use Object Animators :

ObjectAnimator colorAnim = ObjectAnimator.ofInt(yourTextView, "textColor",
            Color.RED, Color.GREEN);
            colorAnim.setEvaluator(new ArgbEvaluator());
            colorAnim.start();