Android ViewFlipper Example

 

Android ViewFlipper is normally used for displaying images in the android applications as a slideshow widget, image viewer ..etc.

A ViewFlipper can hold many views,but only one can be shown at a time.The swiping function allows to navigate between the images in the view.The ViewFlipper class is derived from ViewAnimator and we can define how to animate between the images.

STEP BY STEP

1.Create an Android Project

Refer:-How to create an Android Project

2.Next we are going to design how the image gallery using looks like.Simple we are drog and droping a ViewFlipper widget and 2 image buttons.

Follow the bellow codes.

<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/myflipper”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent”
        android:gravity=”center” >
        <ImageView
            android:id=”@+id/imageView1″
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:src=”@drawable/image (1)” />
        <ImageView
            android:id=”@+id/imageView2″
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:src=”@drawable/image (2)” />
    </ViewFlipper>
</LinearLayout>

3.Next we have to create our MainActivity class

The code is shown bellow.

package com.androidituts.viewflipper;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
public class MainActivity extends Activity
{
    private ViewFlipper myviewflipper;
    private float initialXpoint;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myviewflipper = (ViewFlipper) findViewById(R.id.myflipper);
    }
    @Override
    public boolean onTouchEvent(MotionEvent touchevent)
    {
        switch (touchevent.getAction())
        {
        case MotionEvent.ACTION_DOWN:
            initialXpoint = touchevent.getX();
            break;
            case MotionEvent.ACTION_UP:
            float finalX = touchevent.getX();
            if (initialXpoint > finalX)
            {
                if (myviewflipper.getDisplayedChild() == 1)
                break;
                myviewflipper.showNext();
            }
            else
            {
                if (myviewflipper.getDisplayedChild() == 0)
                break;
                myviewflipper.showPrevious();
            }
            break;
        }
        return false;
    }
}

4.The above code results a simple ViewFlipper example with Touch Events taking previous and next images.

5.Result is shown bellow.

viewflipper

6.Here the images are only changing while user is swipe.

If you want to swipe automatically with certain interval add the following code

myviewflipper.setAutoStart(true);
myviewflipper.setFlipInterval(3000);
myviewflipper.startFlipping();

After changing the following code, the image will start changing automatically with an interval of 3000msec.

So that you can use these for creating image slideshow in Android applications.

Hope you all understand the tutorials.

Try our Android App from Google Play

Google-Play