Android ViewFlipper With Swipe By MotionEvent Class

One of the most used views on android is ViewFlipper. This view is usually used when we have to transform one view to another. There are many situations where we can apply this Android ViewFlipper class. Consider a situation when we have two TextViews, and only one has to be shown at a time. Now since with Android ViewFlipper we can flip one view to another and that too with an animation, we can use Android ViewFlipper in the stated situation. Here in this tutorial at Truiton I would show an example of Android ViewFlipper With Swipe By MotionEvent Class.

In Android there are basically two classes through which one can transform one view to another view. To give more clarity on each in detail I have written a whole series on them. Although this Android ViewFlipper with swipe by MotionEvent class is the final concluding tutorial in this series, but for a better understanding on the whole topic please have a look at the links below:

1. Android ViewSwitcher Tutorial
2. Android ViewFlipper With Swipe By MotionEvent Class
3. Android ViewSwitcher vs ViewFlipper

In this tutorial my focus would be on Android ViewFlipper class, where I would use it in conjunction with Android MotionEvent class. As a whole this would result in an example of swipe gesture through which we would be able to swipe through pages. To start lets understand what a ViewFlipper is?

Android ViewFlipper

Android provides us many ways through which we can create swiping views, Android ViewFlipper class is one of the such ways. Although if we talk about the main purpose for which the Android ViewFlipper must be created. Its not just swiping screen, we can build much more functionality from it like slideshows. Android ViewFlipper’s xml layout has two special attributes which facilitate this function. These attributes are android:autoStart and android:flipInterval, they function as their name suggests, autoStart specifies that whether the ViewFlipping should start automatically or not when view appears. flipInterval specifies the interval between a flip.

Generally speaking if we talk about Android ViewFlipper, its a class which is used to flip between two or more views with an animation. This animation can be from ViewAnimator class or custom animation XML’s can be used. I would show the code for custom animations at the end of the tutorial, in the meantime have a look at the layout XML.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >

        <!-- View #1 -->
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/truiton" />

        <!-- View #2 -->
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/truiton_full" />
    </ViewFlipper>

</LinearLayout>

Now that we have our layout in place lets have a look at the next class through which we will be interacting with ViewFlipper.

Android MotionEvent

Consider another situation where one has to interact with a ViewFlipper by swiping the screen. In this tutorial I am going to show how to do this by Android MotionEvent class. The most simple use of android MotionEvent class is to detect the actions of user on screen. With Android MotionEvent class we can detect any sort of gestures on screen as it gives us the coordinates of user touches, through which we can calculate and identify the gesture type.

Android MotionEvent class detects the user actions in form of action codes like MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP, ACTION_POINTER_DOWN, and ACTION_POINTER_UP. Here when user first touches the screen ACTION_DOWN code is fired, when user removes finger, Android MotionEvent class delivers the ACTION_UP code. Some of the devices support multi touch, in those cases too we can use Android MotionEvent Class. Further lets have a look at the code for Android ViewFlipper With Swipe By MotionEvent Class.

package com.truiton.viewflipperexample;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class TruitonViewFlipperActivity extends Activity {
 private ViewFlipper TruitonFlipper;
 private float initialX;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_truiton_view_flipper);
 TruitonFlipper = (ViewFlipper) findViewById(R.id.flipper);
 TruitonFlipper.setInAnimation(this, android.R.anim.fade_in);
 TruitonFlipper.setOutAnimation(this, android.R.anim.fade_out);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
 // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.truiton_view_flipper, menu);
 return true;
 }

 @Override
 public boolean onTouchEvent(MotionEvent touchevent) {
 switch (touchevent.getAction()) {
 case MotionEvent.ACTION_DOWN:
 initialX = touchevent.getX();
 break;
 case MotionEvent.ACTION_UP:
 float finalX = touchevent.getX();
 if (initialX > finalX) {
 if (TruitonFlipper.getDisplayedChild() == 1)
 break;

 /*TruitonFlipper.setInAnimation(this, R.anim.in_right);
 TruitonFlipper.setOutAnimation(this, R.anim.out_left);*/

 TruitonFlipper.showNext();
 } else {
 if (TruitonFlipper.getDisplayedChild() == 0)
 break;

 /*TruitonFlipper.setInAnimation(this, R.anim.in_left);
 TruitonFlipper.setOutAnimation(this, R.anim.out_right);*/

 TruitonFlipper.showPrevious();
 }
 break;
 }
 return false;
 }
}

In the above code have a look at the onTouchEvent method, here the actual code for capturing the user actions is written. In this method we are switching on bases of the getAction method of Android MotionEvent class. Further we are detecting the first and last tap on screen and calculating the direction of swipe. With this data provided by MotionEvent class we detected the directional swipe and flipped our screen by ViewFlipper. Have a look at the screens:

Earlier in this tutorial I mentioned that we can also add custom animations in this Android Viewflipper, In the above class I have commented out the code to do so. If you wish to add custom animations, un-comment lines 41-42, 49-50 and comment lines 18-19. Further add these xml files in your res/anim folder:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <translate
        android:duration="700"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <translate
        android:duration="700"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <translate
        android:duration="700"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="-100%"
        android:toYDelta="0%" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <translate
        android:duration="700"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%" />

</set>

With these files added you would be able to see custom animations in your viewFlipper with Android MotionEvent class. To sum up, in this tutorial I created a ViewFlipper which swipes views in and out on the bases of actions or gestures detected by Android MotionEvent class. If this tutorial helped you out, like and share this with your friends on Google+, Facebook and also like out Facebook page to stay connected.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.