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.
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 |
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()
- It first removes the old text by using
Project Structure
Code
The layout for the MainActivity contains an ImageSwitcher, TextSwitcher and a Button in a RelativeLayout as shown below.
main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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.
This brings an end to this tutorial. You can download the final Android Switchers Project from the link given below.