Android character by character display text animat

Question

Anyone knows any efficient method of perform an animation that what is has to do is to display a text, character by character? Like:

T
Th
Thi
This
This i
This is
...

And so on.

Thanks!

Answer 1

this new copy for Devunwired with xml layout

    public class Typewriter extends TextView {

    private CharSequence mText;
    private int mIndex;
    private long mDelay = 500; //Default 500ms delay


    public Typewriter(Context context) {
        super(context);
    }

    public Typewriter(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private Handler mHandler = new Handler();
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            setText(mText.subSequence(0, mIndex++));
            if(mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };

    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;

        setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    }

    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
}

code use

        textView = (Typewriter)findViewById(R.id.textView1);
    //Add a character every 150ms
    textView.setCharacterDelay(150);
    textView.animateText("Sample String");

then define textView in classStart

Answer 2

In theory it would be

---

string text = "hello"
string temp = "h"

---

iterate: temp += if (text.length > temp.length) text[temp.length]; wait

You will of course do the iterate in your runmethod.

Answer 3

No need to set an extra class Use this, here tv is a textview in your layout just call

setCharacterDelay(150);
animateText("Sample String");

private Handler mHandler = new Handler();
private Runnable characterAdder = new Runnable() {
    @Override
    public void run() {
        tv.setText(mText.subSequence(0, mIndex++));
        if(mIndex <= mText.length()) {
            mHandler.postDelayed(characterAdder, mDelay);
        }
    }
};

public void animateText(CharSequence text) {
    mText = text;
    mIndex = 0;

    tv.setText("");
    mHandler.removeCallbacks(characterAdder);
    mHandler.postDelayed(characterAdder, mDelay);

}

public void setCharacterDelay(long millis) {
    mDelay = millis;
}

Answer 4

Just to add to @Devunwired's answer when working with Kotlin code,
I changed (in animateText function):
mHandler.postDelayed(mRunnable,mDelay) to mRunnable.run()

so my final Kotlin class looks like this:

class TextViewAnimationComponent(context: Context,attributeSet: AttributeSet?) : TextView(context,attributeSet) {
    private var mHandler = Handler()
    private var mText:CharSequence = ""
    private var mIndex:Int = 0
    private var mDelay:Long = 500

    private val mRunnable = object: Runnable{
        override fun run() {
            text = mText.subSequence(0,mIndex++)
            if(mIndex <= mText.length){
                mHandler.postDelayed(this,mDelay)
            }
        }
    }

    fun animateText(mText:CharSequence){
        this.mText = mText
        mIndex = 0

        text = ""
        mHandler.removeCallbacks(mRunnable)
        mRunnable.run()
//        mHandler.postDelayed(mRunnable,mDelay)
    }

    fun setCharacterDelay(millis:Long){
        mDelay = millis
    }
}

Also, a quick and dirty code (still in Kotlin) without subclassing.
Inside Activity:

    private fun animateText(mText: CharSequence, delayMillis: Long, postFunction:() -> Unit){
        var mIndex = 0

        val runnable = object : Runnable {
            override fun run() {

                // RunRunnable is a boolean flag; used in case you want to interrupt the execution
                if(runRunnable) {
                    if (mIndex <= mText.length) {

                        // change textViewSwitchStateValue with your own TextView id
                        textViewSwitchStateValue.text = mText.subSequence(0, mIndex++)
                        Handler().postDelayed(this, delayMillis)
                    } else {

                        // After all the characters finished animating; Clear the TextView's text and then run the postFunction
                        textViewSwitchStateValue.text = ""
                        postFunction()
                    }
                }
            }
        }
        runOnUiThread(runnable)

A simple example for animating a loading dots:
animateText(". . .", 400){switchStateON()}

Answer 5

Most of the solutions provided above throw various errors. I guess the solutions are old. I stumbled on this android studio plugin and it works like charm.

1.Installation of AutoTypeTextView is preety simple. Just add in build.gradle

compile 'com.krsticdragan:autotypetextview:1.1'

2.Add a new namespace which you will use for adding AutoTypeTextView and using its tags.

xmlns:attv="http://schemas.android.com/apk/res-auto"

Hence your root layout should look like this

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:attv="http://schemas.android.com/apk/res-auto"

3. Add this to your xml file.

   <com.dragankrstic.autotypetextview.AutoTypeTextView android:id="@+id/lblTextWithoutMistakes" android:layout_width="wrap_content" android:layout_height="wrap_content" attv:animateTextTypeWithoutMistakes="Hello World!" />

With just these three steps you are good to go. You can check out the documentation here for more details