ANDROID VIEW FLIPPER TUTORIAL

By: Unknown 0 comments

Android ViewFlipper Example

The Android Development Tutorials blog contains Basic as well as Advanced android tutorials.Go to Android Development Tutorials to get list of all Android Tutorials.

---

ViewFlipper

A ViewFlipper  is a simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

A ViewFlipper  can be used to slide views in and out of the user’s current view port .These Views slides with given appropriate Animation.

To learn Basic of Android Animation  go to  Android Animation Basics

In the below Snapshot you can see one Screen in Coming IN and other Screen is going OUT.

                                       

Prerequisite for this Example

You must know how handle Swap event on screen, if not read the post How to Detect Left to Right and Right to Left Swap Event

For this Example we need Animation Resources to animate the Screen.

We have used following  Animation in this Example

in_from_left.xml

in_from_right.xml

out_to_left.xml

out_to_right.xml

These animation files must be present in your anim folder.

Create an "anim" folder inside res folder in your application and put all 4 animation files inside anim folder.

in_from_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="-100%" android:toXDelta="0%"
           android:fromYDelta="0%" android:toYDelta="0%"
           android:duration="1400" />
</set>

 in_from_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="100%" android:toXDelta="0%"
           android:fromYDelta="0%" android:toYDelta="0%"
           android:duration="1400" />
</set>

out_to_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
      <translate android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1400"/>
</set>

out_to_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
      <translate android:fromXDelta="0%" android:toXDelta="100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1400"/>
</set>

view_flipper_main.xml

<?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_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#000099"
            android:textSize="30dp"
            android:text="View Flipper Demo" />

        <ViewFlipper
            android:id="@+id/view_flipper"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_margin="6dip" >
          
        <!--  The child Views/Layout to flip -->
      
        <!--  Layout 1 for 1st Screen -->
            <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        android:text="This Is Screen 1"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        android:layout_marginTop="15dp"
                        android:id="@+id/imageView1"
                        android:layout_width="450dp"
                        android:layout_height="450dp"
                        android:src="@drawable/image1" />
                  
            </LinearLayout>
          
             <!--  Layout 2 for 2nd Screen -->
          
            <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_marginTop="15dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="This Is Screen 2"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        android:layout_marginTop="15dp"
                        android:id="@+id/imageView1"
                        android:layout_width="450dp"
                        android:layout_height="450dp"
                        android:src="@drawable/image3" />
                  
            </LinearLayout>


        </ViewFlipper>

</LinearLayout>

ViewFlipperMainActivity .java

public class ViewFlipperMainActivity extends Activity
{
            private ViewFlipper viewFlipper;
            private float lastX;

            @Override
            protected void onCreate(Bundle savedInstanceState)
            {
                         super.onCreate(savedInstanceState);
                         setContentView(R.layout.view_flipper_main);
                         viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
            }

          
                      
            // Method to handle touch event like left to right swap and right to left swap
            public boolean onTouchEvent(MotionEvent touchevent)
            {
                         switch (touchevent.getAction())
                         {
                                // when user first touches the screen to swap
                                 case MotionEvent.ACTION_DOWN:
                                 {
                                     lastX = touchevent.getX();
                                     break;
                                }
                                 case MotionEvent.ACTION_UP:
                                 {
                                     float currentX = touchevent.getX();
                                   
                                     // if left to right swipe on screen
                                     if (lastX < currentX)
                                     {

                                          // If no more View/Child to flip
                                         if (viewFlipper.getDisplayedChild() == 0)
                                             break;
                                       
                                         // set the required Animation type to ViewFlipper
                                         // The Next screen will come in form Left and current Screen will go OUT from Right 
                                         viewFlipper.setInAnimation(this, R.anim.in_from_left);
                                         viewFlipper.setOutAnimation(this, R.anim.out_to_right);
                                         // Show the next Screen
                                         viewFlipper.showNext();
                                     }
                                   
                                     // if right to left swipe on screen
                                     if (lastX > currentX)
                                     {
                                         if (viewFlipper.getDisplayedChild() == 1)
                                             break;
                                         // set the required Animation type to ViewFlipper
                                         // The Next screen will come in form Right and current Screen will go OUT from Left 
                                         viewFlipper.setInAnimation(this, R.anim.in_from_right);
                                         viewFlipper.setOutAnimation(this, R.anim.out_to_left);
                                         // Show The Previous Screen
                                         viewFlipper.showPrevious();
                                     }
                                     break;
                                 }
                         }
                         return false;
            }

 }