Tutorials Android TextSwitcher and ImageSwitcher Example in Android

TextSwitcher and ImageSwitcher Example in Android

The TextSwitcher and  ImageSwitcher in Android  allows you to create an smooth transition animation in when switching between Android views.  TextSwitcher and ImageSwitcher is available from version 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.

TextSwitcher uses the factory to create new views. 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. You can use setInAnimation() and setOutAnimation() method to set in and out animation using for switcher. The new transition fades out the original text while the new text fades in to replace it.

In this example, we will use default stock android fade_in animation. This should work equally well with other custom animations.

TextSwitcher-and-ImageSwitcher-Example-in-Android

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;
	}
}
Total
0
Shares
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
spiritinlife
spiritinlife
7 years ago

You do not need them. It is part of the android sdks. Everything that starts with android.x.x.x is part of the android sdk.

android.R.anim.fade_in

Danny Chambers
Danny Chambers
6 years ago

what does the mPosition + 1 mean?

Android
Android
6 years ago

image not switched from first image to next image…??
why??

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Android

Can you post your code snippets.

Websoftstar
Websoftstar
3 years ago

Nice!

Previous Post

Creating Custom Views in Android Tutorial

Next Post
Android Tutorials

How to Start an Application at Device Bootup in Android

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
5
0
Would love your thoughts, please comment.x
()
x