Android TextSwitcher and ImageSwitcher Example Tutorial

Filed Under: Android

Android TextSwitcher and ImageSwitcher are classes used to add animations to texts and images as they are being displayed on the screen to make them visually appealing. In this tutorial we’ll implement each of these.

Android TextSwitcher and ImageSwitcher Overview

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. Some usages of these are:

  • 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

Android TextSwitcher

A TextSwitcher is a specialised form of ViewSwitcher that contains only children of type TextView. TextSwitcher is used to animate a TextView 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

Android ImageSwitcher

As you might have noticed in the previous tutorials containing ImageViews that the loading and rendering of images was abrupt and not smooth. Here ImageSwitcher comes to the rescue since it supports some form of transitions from one image to another. The implementation is given below.


imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      return myView;
   }
}

The only thing left now is to add the Animation as given in the below snippet:


Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_up);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out); 

In short the following steps need to be implemented to use these classes:

  • Get the view reference using findViewById() method
  • Set a factory using switcher.setFactory()
  • Set an in-animation using switcher.setInAnimation()
  • Set an out-animation using switcher.setOutAnimation()
  • setFactory() is used to create new views
  • setText() on TextSwitcher works as follows:
    • It first removes the old text by using setOutAnimation()
    • It inserts the new text using setInAnimation()

Project Structure

android-switchers-project

Code

The layout for the MainActivity contains an ImageSwitcher, TextSwitcher and a Button in a RelativeLayout as shown below.

main.xml


<?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: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>

The MainActivity consists of the Text an Image Switchers with their views created using setFactory(). The animations used are built in animations present in the android sdk. The application consists of three TextViews and ImageViews which are switched in cyclic order on each button click. The MainActivity.java is given below :


package com.journaldev.switchers;

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;

public class MainActivity extends Activity {

    private static final String[] TEXTS = { "Background", "XP", "Sky" };
    private static final int[] IMAGES = { R.drawable.background, R.drawable.sample,
            R.drawable.sample_2 };
    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 ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                TextView textView = new TextView(MainActivity.this);
                textView.setTextSize(18);
                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 ViewSwitcher.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;
    }
}

The onSwitch() method is invoked on button click. Below is our application in execution.
android-switchers-example

This brings an end to this tutorial. You can download the final Android Switchers Project from the link given below.

Comments

  1. Marcos says:

    This can be used to code something like a gallery?

    1. Anupam says:

      Yeah. Specifically, to show a smooth transition of images in an ImageView on Button clicks. For a gallery a GalleryView is a better option. Stay tuned for a tutorial on the same.

      1. Anupam says:

        You can use a GridView too to code a gallery.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages