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);
Read more...

Wednesday 15 April 2015

How to create Ticker (marquee text)

If you want marquee text in your application, here is the simplest example.
In your xml-layout file, add this to your TextView
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
and in your code to start animation:
TextView tv = (TextView) findViewById(R.id.tv);
tv.setSelected(true);
 
Via the API:
 
Read more...