AdapterViewFlipper in Android with Example

The AdapterViewFlipper class is a subclass of the ViewAnimator class and is used to flip between 2 or more views, such that only one view is displayed at a time. It is commonly used in slides. It is an element of the transition widget which helps to add transitions on the views. It is mainly useful to animate a view on the screen. AdapterViewFlipper switches smoothly between two or more views (TextView, ImageView, or any Layout) and thus provides a way of transitioning from one view to another through appropriate animations. Below is a preview sample of AdapterViewFlipper.

Difference Between ViewFlipper and AdapterViewFlipper

ViewFlipper and AdapterViewFlipper both are subclasses of ViewAnimator. The ViewFlipper is initially used to display all slide views fixed. This means that views will not be recycled. AdapterViewFlipper uses an Adapter to fill data (similar to ListView / Spinner / RecyclerView etc), so the children are determined on the fly and the views representing the children can be recycled. So AdapterViewFlipper is used to display all child views. So there is room for recycling views and loading views dynamically.

Steps for Creating AdapterViewFlipper

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with activity_main.xml file

Click on Res -> Layout -> activity_main.xml and add a TextView to display a text and the AdapterViewFlipper to display the functionality. Below is the complete code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    tools:context=".MainActivity">

    <!--Text view to display Global stats-->
    <TextView
        android:id="@+id/heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="The North"
        android:textSize="28sp"
        android:textAlignment="center"
        android:textColor="#000"
        android:textStyle="bold"/>

    <!--AdapterViewFlipper to display the functionality-->
    <AdapterViewFlipper
        android:id="@+id/adapterViewFlipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/heading"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true">
    </AdapterViewFlipper>

</RelativeLayout>

Step 3: Create another Layout file

Now create another XML layouts file by right-clicking on res -> layout -> new -> Layout Resource File and name it as custom_adapter_layout.xml. In this file add an ImageView and TextView to use it in the Adapter. Below is the complete code for the custom_adapter_layout.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<!--Relative Layout to display all the details-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#fff">

    <!--Image view to display-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_alignParentTop="true" />

    <!--Text view to display stats coordinate with image-->
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:textColor="#000"
        android:textSize="20sp" />

</RelativeLayout>

Step 4: Working with MainActivity.java file

Open MainActivity and add the below code to initiate the AdapterViewFlipper. Firstly create two arrays one for images and the other for names. After creating, set the adapter to fill the data in the view. Finally set the auto start and flip interval time so that AdapterViewFlipper switch between the views and the current view will go out and the next view will come in after the given time interval. Below is the complete code for the MainActivity.java file. Refer to the comments inside the code to understand the code.

Java

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterViewFlipper;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    AdapterViewFlipper adapterViewFlipper;

    int[] IMAGES = {
            R.drawable.ldeosai,
            R.drawable.lakedudipatsar,
            R.drawable.lrama,
            R.drawable.lakekachura
    };

    String[] NAMES = {
            "Deosai National Park",
            "Lake Dudipatsar",
            "Rama Meadows",
            "Lower Kachura Lake"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Link those objects with their respective id's
        // that we have given in .XML file
        adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper);
        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), NAMES, IMAGES);
        adapterViewFlipper.setAdapter(customAdapter);
        adapterViewFlipper.setFlipInterval(2600);
        adapterViewFlipper.setAutoStart(true);
    }
}

class CustomAdapter extends BaseAdapter {
    Context context;
    int[] images;
    String[] names;
    LayoutInflater inflater;

    public CustomAdapter(Context applicationContext, String[] names, int[] images) {
        this.context = applicationContext;
        this.images = images;
        this.names = names;
        inflater = (LayoutInflater.from(applicationContext));
    }

    @Override
    public int getCount() {
        return names.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 = inflater.inflate(R.layout.custom_adapter_layout, null);

        // Link those objects with their respective id's
        // that we have given in .XML file
        TextView name = (TextView) view.findViewById(R.id.name);
        ImageView image = (ImageView) view.findViewById(R.id.image);

        // Set the data in text view
        name.setText(names[position]);

        // Set the image in Image view
        image.setImageResource(images[position]);
        return view;
    }
}

Output: Run on Emulator

Now connect your device with a USB cable or an Emulator and launch the application. You will see an Adaptiveflipping of the image will display which will change after a certain millisecond.