Flipper view with Animation Example

This Example will show you how to use flipper view that contain a few image and allow user to navigate the image by clicking on the button next or previous or user can touch and fling on the image to change the content of the flipper with animation.

for the first you should have 4 xml file for the animation. so you need to create directory name anim under res folder. see the image bellow.

push_left_in.xml

push_left_out.xml

push_right_in.xml

push_right_out.xml

This is your main.xml file

finally your java file.
FliperViewExampleActivity.java

package monstercodz.blogspot.com;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class FliperViewExampleActivity extends Activity implements OnGestureListener {
    /** Called when the activity is first created. */
 private int imageID[] = {R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};
 private ViewFlipper viewFlipper = null;  
    private GestureDetector gestureDetector = null;
    private Button btn_next,btn_pre;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        btn_next = (Button)findViewById(R.id.btn_next);
        btn_pre = (Button)findViewById(R.id.btn_pre);
        
        btn_next.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    nextImage();
   }
  });
        
        btn_pre.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    previousImage();
   }
  });
        
        viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper); 
        // gestureDetector Object is used to detect gesture events
        gestureDetector = new GestureDetector(this); 
        for (int i = 0; i < imageID.length; i++)  
        { 
            ImageView image = new ImageView(this);  
            image.setImageResource(imageID[i]);  
            image.setScaleType(ImageView.ScaleType.FIT_XY);
            viewFlipper.addView(image, new LayoutParams(  
                    LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        }
    }
    
    private void nextImage(){
     this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_left_in));  
        this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_left_out));  
        this.viewFlipper.showNext(); 
    }
    
    private void previousImage(){
     this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_right_in));  
        this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_right_out));  
        this.viewFlipper.showPrevious();  
    }
    
 @Override
 public boolean onDown(MotionEvent arg0) {
  // TODO Auto-generated method stub
  return false;
 }
 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  // TODO Auto-generated method stub
  if (e1.getX() - e2.getX() > 120)  
        {  
             nextImage();
            return true;  
        }
        else if (e1.getX() - e2.getX() < -120)  
        {  
          previousImage();
          return true;
        }  
        return true;
 }
 @Override
 public void onLongPress(MotionEvent e) {
  // TODO Auto-generated method stub
  
 }
 @Override
 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
  // TODO Auto-generated method stub
  return false;
 }
 @Override
 public void onShowPress(MotionEvent e) {
  // TODO Auto-generated method stub
  
 }
 @Override
 public boolean onSingleTapUp(MotionEvent e) {
  // TODO Auto-generated method stub
  return false;
 }
 
 @Override 
    public boolean onTouchEvent(MotionEvent event)  
    {  
        return gestureDetector.onTouchEvent(event);  
    }
}

You can download the sample project by clicking here