How to diplay text in a TextView delayed (word for word)

Question

I want the Text in a TextView to be displayed word after word or even letter after letter, just like in most rpgs and adventures with textboxes. A good example how the textflow should look like is the game phoenix wright ( http://youtu.be/2OOX2Gv0768?t=1m7s )

What i have tried until now is this:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    String text = "test test test test";
    String[] split = text.split(" ");
    Deque<String> words = new LinkedList<String>();
    for (int i = 0; i<split.length; i++)
    {
        words.addLast(split[i]);
    }
    showNextWord(words);

}

public void showNextWord(final Deque<String> words)
{
    Handler handler = new Handler(); 
    handler.postDelayed(new Runnable() 
    { 
        public void run() 
        { 
            TextView t = (TextView) findViewById(R.id.textBox);
            t.append(words.pollFirst()+" ");
            if (words.size()>0)
                showNextWord(words);
        } 
    }, 500);
}

I tested on an emulator and it seems to be with low performance, even more if i would start a delay after displaying each letter. The delay isn´t consistent.

In addition to that I hope there is a more elegant solution to that. Maybe some way to be more flexible with the delays? E.g. a bigger delay after a sentence and so on.

Thank you very much!

Answer 1

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;
}
}

And use above class in your activity like this:

    Typewriter writer = new Typewriter(this);
    //Add a character every 200ms
    writer.setCharacterDelay(200);
    writer.animateText("Sample String");

Answer 2

Try this:

Handler handler = new Handler(); 
handler.postDelayed(new Runnable() 
{ 
    public void run() 
    { 
            if (words.size()>0)
            showNextWord(words);
    } 
}, 500);

public void showNextWord(words)
{
        TextView t = (TextView) findViewById(R.id.textBox);
        t.append(words.pollFirst()+" ");        
}

Answer 3

Alright here is what I came up with!

public static void main(String[] args) {
    printWord("Sup dude!", 150);
}

public static void printWord(String word, int time){
    for(int i = 0; i < word.length(); i++){
        double start = System.currentTimeMillis();
        double end = System.currentTimeMillis();
        while(end - start <= time){
            end = System.currentTimeMillis();
        }
        System.out.print(word.charAt(i));
    }
}

I bet you can easily can the print to your textview by changing the syso to:

tv.setText(tv.getText() + word.charAt(i));

Hope that answers your question and helps! Good luck :)

Answer 4

Take a look at this Library: https://github.com/flavienlaurent/spans It has a feature called typewriter that might suit your needs. You can see it in action in this blog post: http://flavienlaurent.com/blog/2014/01/31/spans/