Text Switcher Example with Swipe

TextSwitcher is a UI control in android which can be used to show images using gestures and animations. In this tutorial, we shall see how to use the TextSwitcher control using example.

1. Adding the control
2. Adding animations
3. Adding gesture listener
4. Binding gesture detector
5. Download Code

Adding the control

If you are using the XML layout editor, then the TextSwitcher control is present in the “Transitions” category. You can simply drag and drop it to the layout and configure its attributes.

On the other hand, if you are writing the layout xml on your own, the following sample xml should help in setting up a basic TextSwitcher android UI element.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextSwitcher
        android:id="@+id/textSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </TextSwitcher>

</LinearLayout>   

The above code shall be present in the activity_main.xml file which is the layout file for our MainActivity in the sample application.

Adding animations

When users will switch images using gestures (horizontal swipe), you can add animation effect to show the user that the previous image has gone left and new image has come from the right hand side. You can also use fade out/fade in effects. The code for adding these animation effects to TextSwitcher control is:

tv = (TextSwitcher) findViewById(R.id.textSwitcher1);
tv.setInAnimation(AnimationUtils.loadAnimation(this,
 android.R.anim.fade_in));
tv.setOutAnimation(AnimationUtils.loadAnimation(this,
 android.R.anim.fade_out));

Adding gesture listener

A gesture listener is an interface which sends events when the user uses his fingers to swipe horizontal or vertical. Basically, you get the horizontal/vertical velocity, swipe distance and location of start/end of swipe. The following source code should be easy to understand where a new GestureListener has been created:

class MyGestureDetector extends SimpleOnGestureListener {

  final String TAG = MyGestureDetector.class.getSimpleName();

  // for touch left or touch right events
  private static final int SWIPE_MIN_DISTANCE = 80;   //default is 120
  private static final int SWIPE_MAX_OFF_PATH = 400;
  private static final int SWIPE_THRESHOLD_VELOCITY = 70;

  @Override
  public boolean onSingleTapConfirmed(MotionEvent e) {
 return super.onSingleTapConfirmed(e);
  }

  @Override
  public boolean onDown(MotionEvent e) {
 return true;
  }

  @Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
 Log.d(TAG, " on filing event, first velocityX :" + velocityX +
 " second velocityY" + velocityY);
 try {
   if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
     return false;
     if(e1.getX() - e2.getX() 
                      > SWIPE_MIN_DISTANCE && Math.abs(velocityX) 
                      > SWIPE_THRESHOLD_VELOCITY) {
       onHorizonTouch(true);  // left
   }  else if (e2.getX() - e1.getX() 
                      > SWIPE_MIN_DISTANCE && Math.abs(velocityX) 
                      > SWIPE_THRESHOLD_VELOCITY) {
       onHorizonTouch(false); // right
     }
 } catch (Exception e) {
  // nothing
 }
 return false;
  }

  void onHorizonTouch(Boolean toLeft) {
 if(!toLeft && imageIdx>0) {
                        tv.setInAnimation(AnimationUtils.loadAnimation(
   MainActivity.this, android.R.anim.fade_in));
   tv.setOutAnimation(AnimationUtils.loadAnimation(
   MainActivity.this, android.R.anim.fade_out));
   imageIdx--;
   MainActivity.this.tv.setText("Text1");
 }
 if(toLeft && imageIdx<1) {
   vs.setInAnimation(AnimationUtils.loadAnimation(
   MainActivity.this, android.R.anim.fade_in));
   vs.setOutAnimation(AnimationUtils.loadAnimation(
   MainActivity.this, android.R.anim.fade_out));
   imageIdx++;
   MainActivity.this.tv.setText("Text2");
 }
  }
}

In the above code, we are playing between two images only, but you can add more images and change the condition on imageIdx accordingly. Note that MyGestureDetector is a method local inner class.

Binding gesture detector

Binding the gesture detector to TextSwitcher is again a piece of cake as shown in the following lines of code:

  gestureDetector = new GestureDetector(new MyGestureDetector());
  View.OnTouchListener gestureListener = new View.OnTouchListener() {

   @Override
   public boolean onTouch(View v, MotionEvent event) {
    if (gestureDetector.onTouchEvent(event)) {
     return true;
    }
    return false;
   }
  };
  tv.setOnTouchListener(gestureListener);

Screen Shot:

Download Source Code

Download Source Here