TextSwitcher

The TextSwitcher and ImageSwitcher provide us a simple way to add animated transitions. These classes are used for a smooth transition animation in android view.

A TextSwitcher is a specialised form of ViewSwitcher that contains only children of type TextView. TextSwitcher is used to animate a AppCompatTextView when the text changes. Two types of animations are required to switch between texts:

  • In Animation: with which Text come in the Screen
  • Out Animation: with which Text goes out from the Screen

An TextSwitcher allows you to add some transitions on the text through the way they appear on screen. In order to use TextSwitcher, you need to define its XML component first. Its syntax is given below

<TextSwitcher
    android:id="@+id/txtSwitcher1"
    android:layout_width="wrap_content"
    android:layout_height="250dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/tvTitle" />


Let's understand TextSwithcer by TextSwitcherActivity.java below

TextSwitcherActivity.java
package com.theitbulls.uicomponentex;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.TextSwitcher;
import android.widget.ViewSwitcher;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatTextView;

public class TextSwitcherActivity extends AppCompatActivity {
    // TODO please change these images accroding to your application
    private static final String[] txts = new String[]{"Apple", "Orange", "Mango", "Papaya"};

    private TextSwitcher txtSwitcher;

    private int currText = 0;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.text_switcher_activity);
        txtSwitcher = findViewById(R.id.txtSwitcher1);

        txtSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                AppCompatTextView textView = new AppCompatTextView(TextSwitcherActivity.this);
                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                textView.setLayoutParams(params);
                textView.setTextSize(50);
                textView.setTextColor(Color.RED);
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                    textView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
                }
                return textView;
            }
        });

        Animation animationOut = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        Animation animationIn = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);

        txtSwitcher.setOutAnimation(animationOut);
        txtSwitcher.setInAnimation(animationIn);
        txtSwitcher.setText(txts[currText]);
    }

    public void previous(View view) {
        if (currText < 0) {
            currText = 3;
        }

        txtSwitcher.setText(txts[currText]);
        currText--;
    }

    public void next(View view) {
        if (currText > 3) {
            currText = 0;
        }

        txtSwitcher.setText(txts[currText]);
        currText++;
    }
}


layout/text_switcher_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextSwitcher
        android:id="@+id/txtSwitcher1"
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/tvTitle" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        android:textSize="12pt"
        android:text="TextSwitcher Example" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtSwitcher1"
        android:layout_centerHorizontal="true">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnPrevious"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:onClick="previous"
            android:text="<<Previous" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:onClick="next"
            android:text="Next>>" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>