How to use AdapterViewFlipper

A regular ViewFlipper shows only one child widget or container at a time. So does an AdapterViewFlipper. The difference is where the children come from. With a regular ViewFlipper, you add children much like you would any other standard container class, such as defining the children in your layout XML resource. With AdapterViewFlipper, the children come from an Adapter.

AdapterViewFlipper is actually a view animator. It can animate a number of views that have been added to it. It has functions like showNext() or showPrevious() which are used to flip between two views. It can also do the automatic flipping by startFlipping().

Let us Discuss you to implement AdapterViewFlipper in your Android App.

First, You need to declare an AdatperViewFlipper in your layout file. Look at the code below for example.

<AdapterViewFlipper
   android:id="@+id/adapterViewFlipper"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

<AdapterViewFlipper

android:id="@+id/adapterViewFlipper"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

Now, We will create a layout of the item which will be used in the flipper. Suppose we have created a layout your_view_item.xml with an ImageView and a TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/testImage"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/testName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        android:textColor="#000" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#fff"

android:gravity="center"

android:orientation="vertical">

<ImageView

android:id="@+id/testImage"

android:layout_width="wrap_content"

android:layout_height="150dp"

android:layout_gravity="center" />

<TextView

android:id="@+id/testName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="2dp"

android:textColor="#000" />

</LinearLayout>

Now, When the item layout is ready we will create an Adapter for our AdapterViewFlipper which will add the views in it. This adapter will extend BaseAdpter class.

public class YourFlipperAdapter extends BaseAdapter {
    Context context;
    int[] testImages;
    String[] testNames;
    LayoutInflater inflter;

    public YourFlipperAdapter(Context applicationContext, String[] testNames, int[] testImages) {
        this.context = applicationContext;
        this.testImages = testImages;
        this.testNames = testNames;
        inflter = (LayoutInflater.from(applicationContext));

    }

    @Override
    public int getCount() {
        return testNames.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        view = inflter.inflate(R.layout.list_item, null);
        TextView testName = (TextView) view.findViewById(R.id.testName);
        ImageView testImage = (ImageView) view.findViewById(R.id.testImage);
        testName.setText(testNames[position]);
        testImage.setImageResource(testImages[position]);
        return view;
    }
}

public class YourFlipperAdapter extends BaseAdapter {

Context context;

int[] testImages;

String[] testNames;

LayoutInflater inflter;

public YourFlipperAdapter(Context applicationContext, String[] testNames, int[] testImages) {

this.context = applicationContext;

this.testImages = testImages;

this.testNames = testNames;

inflter = (LayoutInflater.from(applicationContext));

}

@Override

public int getCount() {

return testNames.length;

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View view, ViewGroup parent) {

view = inflter.inflate(R.layout.list_item, null);

TextView testName = (TextView) view.findViewById(R.id.testName);

ImageView testImage = (ImageView) view.findViewById(R.id.testImage);

testName.setText(testNames[position]);

testImage.setImageResource(testImages[position]);

return view;

}

Now, We have everything set. Let’s connect them all to create a working AdapterViewFlipper.

As we have taken an ImageView and TextView, We need the data which will be filled in them. Let us take some dummy data. An array of int for images and an array of String for names.

int[] testImages = {R.drawable.drawable_1, R.drawable.drawable_2, R.drawable.drawable_3, R.drawable.drawable_4, R.drawable.drawable_5};     // array of images
String testNames[] = {"test_1", "test_2", "test_3", "test_4", "test_5"};    // array of strings

1 2	int[] testImages = {R.drawable.drawable_1, R.drawable.drawable_2, R.drawable.drawable_3, R.drawable.drawable_4, R.drawable.drawable_5}; // array of images String testNames[] = {"test_1", "test_2", "test_3", "test_4", "test_5"}; // array of strings

After this where you need to initialize the AdapterViewFlipper just create an instance of YourFlipperAdapter and set the adapter to AdapterViewFlipper.

AdapterViewFlipper adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper); // get the reference of AdapterViewFlipper
// Custom Adapter for setting the data in Views
YourFlipperAdapter yourFlipperAdapter = new YourFlipperAdapter(getApplicationContext(), testNames, testImages);
adapterViewFlipper.setAdapter(yourFlipperAdapter); // set adapter for AdapterViewFlipper
// set interval time for flipping between views
adapterViewFlipper.setFlipInterval(5000);
// set auto start for flipping between views
adapterViewFlipper.setAutoStart(true);