Android - Animate text change with TextSwitcher

koc

January 7, 2015

Android – Using TextSwitcher to animate text change

Few months ago I had to create a custom Action Bar and one of the problems that came up was changing the title text. I wanted something new and something wild.

Keyboard illustration

What was my problem?

TextView’s setText(CharSequence text) method does change the text but I did not like. There were few reasons for that:

1. When going from one screen to another the title would change instantly, sometimes before the UI was loaded
2. Some titles are short, some long, and switching between them looked strange
3. There were no animations

The first solution that came to my mind was to add two animations, fade in and fade out. I figured, after fade out animation finishes I’ll just set new text by calling setText(CharSequence) method and then start fade in animation on the same TextView.

This solution is reasonable and it would solve my problem but another one came up. You have to load the animation, add AnimationListener, change the text, start new animation and by the time you’re finished you have a method with 40 lines of code and the only thing it does is changing the text.

TextSwitcher

After a bit of research I found an awesome class that will do all that work for me. TextSwitcher is a class which helps you animate text change on the screen. It allows you to choose which animations will be shown when text is changing. You can add any kind of animation you want. The text can fade in, fade out, flip, slide in, slide out and so on.

How to use it

In order to use TextSwitcher you have to do 3 things:

1. Add TextSwitcher to your XML layout file.

<TextSwitcher
    android:id="@+id/text_switcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

2. In your custom view or activity set the factory which will be used to create two views. TextSwitcher will switch the text between those two views. Important thing to remember is that TextSwitcher can only contain children of type TextView.

    textSwitcher = (TextSwitcher) findViewById(R.id.text_switcher);

    textSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
        @Override
        public View makeView () {
            return new TextView(context);
            }
        });

Instead of using a factory you can call method addView(View child, int index, ViewGroup.LayoutParams params) twice.

3. Set animations which will be shown when old text is being replaced by a new one.

textSwitcher.setInAnimation(this, R.anim.your_in_animation);
textSwitcher.setOutAnimation(this, R.anim.your_out_animation);

And that is all. Next time you call setText(CharSequence) method on TextSwitcher object it will show the animations.

Now the method from the begging of this blog post can have one line instead of 40 and this is how it looks like:

public void setTitle (String actionBarTitle) {

    titleTv.setText(actionBarTitle)

}

Conclusion

TextSwitcher proved to be a simple and elegant solution for this problem and I really like it. Some people may think that this is over thinking for such a trivial problem but as one of the greatest F1 drivers said