Android character by character display text animation

Viewed 45937

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!

11 Answers

I used a recursive method, also added a bit delay in between words to have more human feel. Send the textView as view along with the text and send '1' as the length to type from start

  private fun typingAnimation(view: TextView, text: String, length: Int) {
    var delay = 100L
    if(Character.isWhitespace(text.elementAt(length-1))){
        delay = 600L
    }
    view.text = text.substring(0,length)
    when (length) {
        text.length -> return
        else -> Handler().postDelayed({
            typingAnimation(view, text, length+1 )
        }, delay)
    }
}

I know its too late now but someone still may arrive here from Google. Actually, I too needed something like this for my app, so made one myself. Try out Fade-In TextView, it makes every character appear with a smooth alpha animation. Usage is also quite simple.

In the XML layout

    <believe.cht.fadeintextview.TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="@android:color/black"

        app:letterDuration="250"/>

In the Activity/Fragment

believe.cht.fadeintextview.TextView textView = (believe.cht.fadeintextview.TextView) findViewById(R.id.textView);

textView.setLetterDuration(250); // sets letter duration programmatically
textView.isAnimating(); // returns current animation state (boolean)
textView.setText(); // sets the text with animation

Some more information

The Fade-In TextView library inherits its properties directly from the native TextView class, which means that all the native TextView methods are supported. There are practically no limitations including multiline support. The library also has some of its own methods and attributes which offer full control over the View.

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"

  1. 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

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()}

Yep,I know it's been a while but I hope to help others with a different approach using ValueAnimator

val text = "This is your sentence"
val textLength = text.length-1
val textView = findViewById<TextView>(R.id.sampleText)

ValueAnimator.ofInt(0, textLength).apply {
     var _Index = -1
     interpolator = LinearInterpolator()
     duration = 2000
     addUpdateListener { valueAnimator ->
         val currentCharIndex = valueAnimator.animatedValue as Int
         if (_Index != currentCharIndex) {
             val currentChar = text[currentCharIndex]
             textView.text = textView.text.toString().plus(currentChar.toString())
         }
        _Index = currentCharIndex
     }
}.start()

Update

I think is more appropriate, rather solution above, of course if you are using RxJava

 Observable.range(0, textLength)
        .concatMap { Observable.just(it).delay(75, TimeUnit.MILLISECONDS) }
        .map { text[it].toString() }
        .subscribeOn(Schedulers.computation())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe { char ->
            println("Item: $char")
            textView.text = textView.text.toString().plus(char)
        }

You can use this library for the same: TypeWriterView Android library

A glimpse into the library:

    //Create Object and refer to layout view
    TypeWriterView typeWriterView=(TypeWriterView)findViewById(R.id.typeWriterView);

    //Setting each character animation delay
    typeWriterView.setDelay(int);

    //Setting music effect On/Off
    typeWriterView.setWithMusic(boolean);

    //Animating Text
    typeWriterView.animateText(string);

    //Remove Animation. This is required to be called when you want to minimize the app while animation is going on. Call this in onPause() or onStop()
    typeWriterView.removeAnimation();
Related