TextSwitcher and ImageSwitcher Example in Android

The TextSwitcher and  ImageSwitcher methods give you a simple way to add animated transitions. TextSwitcher and ImageSwitcher are used to have an smooth transition animation in android view. Imagine you need to cycle through information in a TextView or in an ImageView.  Some examples of this would be

• Navigating through a list of dates with Left and Right buttons
• Changing numbers in a date picker
• Countdown timer clock
• Smooth transition for a news headlines slider

For such requirements we can also do it using simple TextView. However, it will be boring to have it that way. It would be nice to have a way to apply different animations to content being swapped. So to make our transitions more visually appealing, Android provides two classes called TextSwitcher and ImageSwitcher.

TextSwitcher and ImageSwitcher is available from Android v1.6+. TextSwitcher replaces a TextView and ImageSwitcher replaces an ImageView. TextView and TextSwitcher work in a similar way. TextSwitcher is what we need if we want to add an animation to avoid the hard swap. A TextSwitcher is useful to animate a label onscreen. Whenever it’s called, TextSwitcher animates the current text out and animates the new text in.

1. Get the view reference using findViewById() method, or you can also create an object dynamically
2. Set a factory using switcher.setFactory()
3. Set an in-animation using switcher.setInAnimation()
4. Set an out-animation using switcher.setOutAnimation()

Here’s how TextSwitcher works: it uses the factory to create new views, and whenever we use setText(), it first removes the old view using an animation set with the setOutAnimation() method, and then places the new one using the animation set by the setInAnimation() method.

The new transition fades out the original text while the new text fades in to replace it. Because we used android.R.anim.fade_in in our example, the effect was a fade-in. This technique works equally well with other effects. Providing your own animation or using one from android.R.anim.

Defining TextSwitcher and ImageSwitcher in layout

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

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true" >
    </ImageSwitcher>

    <TextSwitcher
        android:id="@+id/textSwitcher"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="#99000000"
        android:padding="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:onClick="onSwitch"
        android:text="Next Image >>" />

</RelativeLayout>

Using TextSwitcher and ImageSwitcher from code

package com.javatechig.ui;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

	private static final String[] TEXTS = { "Image #1", "Image #2", "Image #3" };
	private static final int[] IMAGES = { R.drawable.mf1, R.drawable.mf2,
			R.drawable.mf3 };
	private int mPosition = 0;
	private TextSwitcher mTextSwitcher;
	private ImageSwitcher mImageSwitcher;

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

		mTextSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);
		mTextSwitcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				TextView textView = new TextView(MainActivity.this);
				textView.setGravity(Gravity.CENTER);
				return textView;
			}
		});

		mTextSwitcher.setInAnimation(this, android.R.anim.fade_in);
		mTextSwitcher.setOutAnimation(this, android.R.anim.fade_out);

		mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
		mImageSwitcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				ImageView imageView = new ImageView(MainActivity.this);
				return imageView;
			}
		});
		mImageSwitcher.setInAnimation(this, android.R.anim.slide_in_left);
		mImageSwitcher.setOutAnimation(this, android.R.anim.slide_out_right);

		onSwitch(null);
	}

	public void onSwitch(View view) {
		mTextSwitcher.setText(TEXTS[mPosition]);
		mImageSwitcher.setBackgroundResource(IMAGES[mPosition]);
		mPosition = (mPosition + 1) % TEXTS.length;
	}
}