Top Menu

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Thursday 16 April 2015

Android character by character display text animation

This may not be the most elegant solution, but the simplest is probably a quick subclass of TextView with a Handler that updates the text every so often until the complete sequence is displayed:
 
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;
    }
}
You can then use this in an Activity like so:


public class MyActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Typewriter writer = new Typewriter(this);
        setContentView(writer);

        //Add a character every 150ms
        writer.setCharacterDelay(150);
        writer.animateText("Sample String");
    }
}
  
If you want some animation effects with each letter added, perhaps look at subclassing TextSwitcher instead.
Hope that Helps!

There are many ways to show the characters using "string.xml".
/* One method to get the characters from String*/
writer.animateText(getString(R.string.poem_one)); //get the text from string.xml
       
/* One more method to retrieve the character from String*/
CharSequence  cs = getText(R.string.poem_one);
writer.animateText(cs);

5 comments:

  1. Super Simple to and easy. Don't pay attention to the extended TextView class created. Lets make it simple and easy for everyone. Check it out. First create a class called Typewriter. Then copy and paste this code in that class. close the class.

    import android.os.Handler;
    import android.widget.TextView;

    public class Typewriter {

    private String sText = new String();
    private int index;
    private long mDelay = 100;

    TextView textView;

    public Typewriter(TextView tView) {
    textView = tView;
    }

    public void animateText(String string) {
    sText = string;
    index = 0;

    textView.setText("");

    new Handler().removeCallbacks(characterAdder);
    new Handler().postDelayed(characterAdder, mDelay);
    }

    private Runnable characterAdder = new Runnable() {
    @Override
    public void run() {
    textView.setText(sText.subSequence(0, index++));

    if (index <= sText.length()) {
    new Handler().postDelayed(characterAdder, mDelay);
    }
    }
    };
    }

    Now after you created that class the new Class that you want to implement this animation feature to is super simple.
    Lets say for example you want to add it new a class called MainActivity.

    import com.utilities.Typewriter;

    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.TextView;

    public class MainActivity extends Activity {

    private Typewriter writer;

    private TextView tv_textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    tv_textView = (TextView) findViewById(R.id.tv_textView);
    writer = new Typewriter(tv_textView);
    writer.animateText("Super Simple Animation");
    }
    }

    Thats it and your done. Super Simple leave me votes thanks again.

    ReplyDelete
    Replies
    1. Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download Now

      >>>>> Download Full

      Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download LINK

      >>>>> Download Now

      Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download Full

      >>>>> Download LINK nO

      Delete
  2. How to do this in fragment ? Please reply

    ReplyDelete
    Replies
    1. We'll share the details for this soon..

      Delete
  3. Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download Now

    >>>>> Download Full

    Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download LINK

    >>>>> Download Now

    Kith-N-Kin Knowledge Sharing: Android Character By Character Display Text Animation >>>>> Download Full

    >>>>> Download LINK ET

    ReplyDelete