Monday, June 4, 2012

Android ViewFlipper Example




STEP 1: Creating a new project from File->New->Android Project with ViewFlipperActivity Activity Name

STEP 2: Copy Image files to res/drawable Folder

STEP 3: In res/layout/main.xm layout add ViewFlipper as:
<?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" >

    <ViewFlipper  
        android:id="@+id/viewflipper"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"/>

</LinearLayout>


STEP 4: Create an anim folder inside res and put xml for Transaction effect for Left In, Right In,Left Out and Right Out.
res/anim/push_left_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="100%p" 
        android:toXDelta="0"  
        android:duration="500" />  
    <alpha 
        android:fromAlpha="0.1" 
        android:toAlpha="1.0"  
        android:duration="500" /> 
</set>

res/anim/push_left_out.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0" 
        android:toXDelta="-100%p"  
        android:duration="500" />  
    <alpha 
        android:fromAlpha="1.0" 
        android:toAlpha="0.1"  
        android:duration="500" /> 
</set>

res/anim/push_right_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
      android:fromXDelta="-100%p" 
      android:toXDelta="0"  
      android:duration="500" />  
    <alpha 
        android:fromAlpha="0.1" 
        android:toAlpha="1.0"  
        android:duration="500" />  
</set>

res/anim/push_right_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate 
        android:fromXDelta="0" 
        android:toXDelta="100%p"  
        android:duration="500" />  
    <alpha 
        android:fromAlpha="1.0" 
        android:toAlpha="0.1"  
        android:duration="500" />  
</set>


STEP 5: In ViewFlipperActivity :
package com.imrankhanandroid.ViewFlipperExp;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.Window;
import android.view.WindowManager;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class ViewFlipperActivity extends Activity implements  android.view.GestureDetector.OnGestureListener {
    /** Called when the activity is first created. */
    private int[] imageID = { 
    		R.drawable.a01, R.drawable.a02, 
    		R.drawable.a03, R.drawable.a04, 
    		R.drawable.a05, R.drawable.a06, 
    		R.drawable.a07, R.drawable.a08, 
    		R.drawable.a09, R.drawable.a010, 
    		R.drawable.a011
              };
    private ViewFlipper viewFlipper = null;  
    private GestureDetector gestureDetector = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Remove title bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        //Remove notification bar
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.main);
        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));
        }
    }
	@Override
	public boolean onDown(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}
	@Override
	public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		if (arg0.getX() - arg1.getX() > 120)  
        {  
            
            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();  
            return true;  
        }
        else if (arg0.getX() - arg1.getX() < -120)  
        {  
            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();  
            return true;  
        }  
		return true;
	}
	@Override
	public void onLongPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}
	@Override
	public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		return false;
	}
	@Override
	public void onShowPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}
	@Override
	public boolean onSingleTapUp(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}
    @Override  
    public boolean onTouchEvent(MotionEvent event)  
    {  
        return this.gestureDetector.onTouchEvent(event);  
    }
}

Download Source Code: ViewFlipperExample








6 comments:

neopitit said...

thank!!!!!

Muhammad Shahab said...

Thanks

Anonymous said...

link is dead

Asok said...

Good code, though I'd rather have a good tutorial then have code written for me. This doesn't help a beginner, period. Inline comments are not good for beginners. Glad I have a good background in Android Development.

Anonymous said...

thanks

ROHIT KUMAR said...

http://bluerayplus.com/Android-ViewFlipper-Example
for more information about Android Devlopment
BlueRayPlus.com

Post a Comment

 
Powered by Blogger