Implement swiping page effect using GestureDetector and ViewFlipper

Refer to the exercise "Detect swipe using SimpleOnGestureListener" and "Bi-direction ViewFlipper". It's easy to implement swiping page effect using GestureDetector and ViewFlipper.



Modify the code of the activity from the last exercise "Bi-direction ViewFlipper".

package com.exercise.AndroidViewFlipper;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class AndroidViewFlipperActivity extends Activity {

ViewFlipper page;

   Animation animFlipInForeward;
   Animation animFlipOutForeward;
   Animation animFlipInBackward;
   Animation animFlipOutBackward;
  
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
      
       page = (ViewFlipper)findViewById(R.id.flipper);
      
       animFlipInForeward = AnimationUtils.loadAnimation(this, R.anim.flipin);
       animFlipOutForeward = AnimationUtils.loadAnimation(this, R.anim.flipout);
       animFlipInBackward = AnimationUtils.loadAnimation(this, R.anim.flipin_reverse);
       animFlipOutBackward = AnimationUtils.loadAnimation(this, R.anim.flipout_reverse);
      
   }
  
   private void SwipeRight(){
    page.setInAnimation(animFlipInBackward);
 page.setOutAnimation(animFlipOutBackward);
 page.showPrevious();
   }
  
   private void SwipeLeft(){
    page.setInAnimation(animFlipInForeward);
 page.setOutAnimation(animFlipOutForeward);
 page.showNext();
   }
  
   @Override
public boolean onTouchEvent(MotionEvent event) {
 // TODO Auto-generated method stub
    return gestureDetector.onTouchEvent(event);
}

SimpleOnGestureListener simpleOnGestureListener
   = new SimpleOnGestureListener(){

 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {

  float sensitvity = 50;
  if((e1.getX() - e2.getX()) > sensitvity){
   SwipeLeft();
  }else if((e2.getX() - e1.getX()) > sensitvity){
   SwipeRight();
  }
 
  return true;
 }
   
   };
  
   GestureDetector gestureDetector
= new GestureDetector(simpleOnGestureListener);
}

Modify main.xml to remove buttons.

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

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:text="@string/hello" />
  
   <ViewFlipper
       android:id="@+id/flipper"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
      
       <LinearLayout
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="vertical">
           <ImageView
               android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/ic_launcher"/>
       </LinearLayout>
      
       <LinearLayout
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="vertical"
           android:gravity="center"
           android:background="#C0C0C0">
           <ImageView
               android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
           <ImageView
               android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
       </LinearLayout>
      
       <LinearLayout
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="horizontal"
           android:gravity="center"
           android:background="#A0A0A0">
           <ImageView
               android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
           <ImageView
               android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
       </LinearLayout>
      
   </ViewFlipper>
</LinearLayout>

Download the files.

Related exercise: Implement Animation using Java code