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!

your approach is fine, try to lower the delay a bit as er your taste. And emulator does not give you a true picture of performance. try it on a real device. — Nazgul, May 01 '14 at 10:00
Side note: I find Using Genymotion and VirtualBox to be much superior to the default emulator. Maybe give it a shot if you don't have real devices to test on at hand. Even just the speed up in start up time makes it worth it. — indivisible, May 30 '14 at 07:57

score 4 · Accepted Answer · answered May 01 '14 at 11:08

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");

score 1 · Answer 2 · answered May 01 '14 at 10:02

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()+" ");        
}

score 0 · Answer 3 · answered May 30 '14 at 07:22

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 :)

score 0 · Answer 4 · answered May 30 '14 at 07:53

0

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/

answered May 30 '14 at 07:53

Balázs Palkó

641
5
8

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

4 Answers4