ZOFTINO.COM android and web dev tutorials

Android TextSwitcher Tutorial

Android TextSwitcher is used to animate text every time setText is called on it. TextSwitcher is a subclass of ViewSwitcher and can contain only TextView widget.

In this post, you can learn how TextSwitcher works, TextSwitcher animation example, adding TextViews to TextSwitcher, and TextSwitcher custom animation.

How TextSwitcher Works

Every time you set new text by calling setText method on TextSwitcher, it will show the new text with animation. In order for that to work, TextSwitcher should contain two child TextViews. Every time setText is called, it switches or flips to second text view out of the two.

You can add TextViews to TextSwitcher by defining them in xml layout or adding programmatically using addView method or setFactory method by passing ViewSwitcher.ViewFactory factory which provides two TextViews.

First time, you can set text by calling setCurrentText method on TextSwitcher. After that in response to certain events based on the need or using timer, you can set new text by calling setText.

In order for TextSwitcher to show animations while switching text, you have to set animations. You can set animation by calling setOutAnimation and setInAnimation methods on TextSwitcher object programmatically or by setting android:outAnimation and android:inAnimation attributes in xml.

AndroidTextSwitcher Example

To use TextSwitcher, first add TextSwitcher to your layout xml and define two TextView as children of TextSwitcher. You can set textColor and textSize of text views as shown below.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextSwitcher
        android:id="@+id/textSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:textColor="@color/colorPrimary"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="35dp"
            android:textColor="@color/colorAccent"/>
    </TextSwitcher>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_margin="16dp"
        android:text="Show Next Text With Animation"
        android:onClick="showNextText"
        app:layout_constraintTop_toBottomOf="@+id/textSwitcher"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
 

In your activity onCreate method, get the TextSwitcher object, set current text by calling setCurrentText method on TextSwitcher object. Then set animations by calling setOutAnimation and setInAnimation methods.

I used android provided animations android.R.anim.fade_in and android.R.anim.fade_out for TextSwitcher text animation. These animations are defined in xml and can be loaded using AnimationUtils. You can change duration of animation by setting duration as shown below.

 public class TextSwitcherActivity extends AppCompatActivity {
    private TextSwitcher textSwitcher;
    private int count =0;

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

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

        textSwitcher.setCurrentText("Hello Android App Developer");

        Animation textAnimationIn =  AnimationUtils.
                loadAnimation(this,   android.R.anim.fade_in);
        textAnimationIn.setDuration(800);

        Animation textAnimationOut =  AnimationUtils.
                loadAnimation(this,   android.R.anim.fade_out);
        textAnimationOut.setDuration(800);

        textSwitcher.setInAnimation(textAnimationIn);
        textSwitcher.setOutAnimation(textAnimationOut);
    }

    public void showNextText(View view){
        count++;
        if(count%2 == 0){
            textSwitcher.setText("Learn android with examples");
        }else{
            textSwitcher.setText("Welcome to android tutorials");
        }
    }
}
 

Output of TextSwitcher animation example.

android TextSwitcher animation example

Android TextSwitcher AddView

In the above example you have seen TextSwitcher with two TextViews defined in xml layout. If you want to add two TextViews programmatically, you can do so by using addView method as shown below.

textSwitcher =(TextSwitcher)

findViewById(R.id.textSwitcher);

TextView tvOne = new TextView(this);
    tvOne.setTextSize(40);

ViewGroup.LayoutParams tvOneLP = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

    textSwitcher.addView(tvOne,0,tvOneLP);

TextView tvTwo = new TextView(this);
    tvOne.setTextSize(20);
    textSwitcher.addView(tvTwo,1,tvOneLP);

    textSwitcher.setCurrentText("Hello Android App Developer");

Android TextSwitcher ViewFactory

You can add TextViews to TextSwitcher programmatically adding ViewSwitcher.ViewFactory as shown below.

textSwitcher.setFactory(viewFactory);
private ViewSwitcher.ViewFactory viewFactory = new ViewSwitcher.ViewFactory(){
    @Override
    public View makeView() {
        TextView textView = new TextView(TextSwitcherActivity.this);
        textView.setTextSize(30);
        return textView;
    }
}; 

Android TextSwitcher Custom Animation

You can define your own animations for TextSwitcher as xml resource. Since we need fade-in and fade-out animations for TextSwitcher, we need to define alpha animation.

First define interpolater.

 <bounceInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="8.0" /> 

Define fade-in animation.

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/bounce_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="800" /> 

Define fade-out animation.

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/bounce_interpolator"
    android:fromAlpha="1.0" android:toAlpha="0.0"
    android:duration="800" />