How to apply color transition for textview from left to right android?

Question

Hi i need to apply color transition for textview and then move to next screen. What i have tried is I tried with static color in textview using spannable string, but I couldn't apply dynamic color transition moving on textview. Here is what I have tried.

public class AppActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    TextView tv = (TextView) findViewById(R.id.text);
    Spannable text = new SpannableStringBuilder("Loading..");
    setSpan(tv, text);
    tv.setText(text);
}

private void setSpan(TextView tv, Spannable text) {
    int blueColor = 0xff0000ff;
    int redColor = 0xffff0000;
    ForegroundColorSpan blue = new ForegroundColorSpan(blueColor);
    ForegroundColorSpan red = new ForegroundColorSpan(redColor);
    HalfColorApply o = new HalfColorApply("o", tv, blueColor, redColor);
    text.setSpan(blue, 0, 1, 0);
    text.setSpan(o, 1, 2, 0);
    text.setSpan(red, 2, text.length(), 0);
    }

 class HalfColorApply extends DynamicDrawableSpan {
    private final static String TAG = "DrawableSpanTest";
    Picture mPicture;

    public HalfColorApply(String text, TextView tv, int c0, int c1) {
        super(ALIGN_BASELINE);
        mPicture = new Picture();
        TextPaint p = tv.getPaint();
        Rect bounds = new Rect();
        p.getTextBounds(text, 0, text.length(), bounds);
        float width = p.measureText(text);
        float height = bounds.height();
        float y = height;
        Canvas c = mPicture.beginRecording((int) width, (int) height);
        c.save(Canvas.CLIP_SAVE_FLAG);
        // c.drawColor(0x[masked]);
        p = new TextPaint(p);
        p.setColor(c0);
        c.clipRect(0, 0, width / 2, height, Region.Op.REPLACE);
        c.drawText(text, 0, y, p);
        p.setColor(c1);
        c.clipRect(width / 2, 0, width, height, Region.Op.REPLACE);
        c.drawText(text, 0, y, p);
        c.restore();
        mPicture.endRecording();
    }

    @Override
    public Drawable getDrawable() {
        PictureDrawable d = new PictureDrawable(mPicture);
        d.setBounds(0, 0, mPicture.getWidth(), mPicture.getHeight());
        return d;
    }
}
}

Here is screenshot where I applied at one particular text in fixed. I need to make color transition to move on textview.

Thanks in advance.

Answer 1

You should write this with ValueAnimator

Kotlin code:

fun changeTextColor(textView: TextView, fromColor: Int, toColor: Int, direction: Int = View.LAYOUT_DIRECTION_LTR,duration:Long = 200) {

    var startValue = 0
    var endValue = 0
    if(direction == View.LAYOUT_DIRECTION_LTR){
        startValue = 0
        endValue = textView.text.length
    }
    else if(direction == View.LAYOUT_DIRECTION_RTL) {
        startValue = textView.text.length
        endValue = 0
    }

    textView.setTextColor(fromColor)
    val valueAnimator = ValueAnimator.ofInt(startValue, endValue)
    valueAnimator.addUpdateListener { animator ->
        val spannableString = SpannableString(
            textView.text
        )

        if (direction == View.LAYOUT_DIRECTION_LTR) spannableString.setSpan(
            ForegroundColorSpan(
                toColor
            ), startValue, animator.animatedValue.toString().toInt(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        else if (direction == View.LAYOUT_DIRECTION_RTL) spannableString.setSpan(
            ForegroundColorSpan(
                toColor
            ), animator.animatedValue.toString().toInt(),spannableString.length , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        textView.text = spannableString
    }
    valueAnimator.duration = duration
    valueAnimator.start()
}

And simply use:

changeTextColor(
            yourTextView,
            Color.BLACK,
            Color.WHITE,
            View.LAYOUT_DIRECTION_LTR,
            300
        )