Android AdapterViewFlipper

Filed Under: Android

In this tutorial, we’ll be discussing and implementing the AdapterViewFlipper class in our Android Application.

Android AdapterViewFlipper

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. This is commonly used in slides.

Difference between ViewFlipper and AdapterViewFlipper

ViewFlipper is used to display all the slide views initially. Statically. That means the views won’t be recycled.

AdapterViewFlipper is used to display all the child views using the Adapter. Similar to a ListView/Spinner/RecyclerView. So there is space for recycling the views and also loading views dynamically.

An AdapterViewFlipper is defined in the XML layout in the following manner:


<AdapterViewFlipper
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
</AdapterViewFlipper>

Following are the important XML attributes used:

  • android:autoStart – To start the view flipping once the adapter is loaded.
  • android:flipInterval – Used to set the time interval after which the next child view is presented. Set in milliseconds.

Each of these has their Java counterpart methods as well.

Following are some of the other Java methods used on AdapterViewFlipper class:

  • isFlipping() – Returns a boolean to indicate whether the AdapterViewFlipper flipping is ongoing or not.
  • showNext() – To manually go to the next view.
  • showPrevious() – Goes to the previous view.
  • startFlipping() – To begin flipping. This gets automatically called if autostart is true.
  • stopFlipping() – To stop flipping.
  • isAutoStart() – Returns true if startFlipping was automatically called when the child views where attached to the Adapter.

In the following section, we’ll be creating an android application using the above discussed AdapterViewFlipper concepts.

Project Structure

android adapter view flipper project

Code

The code for the activity_main.xml layout is given below:


<?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"
    tools:context=".MainActivity">

    <AdapterViewFlipper
        android:id="@+id/adapterViewFlipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:autoStart="true" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/adapterViewFlipper"
        android:layout_centerHorizontal="true"
        android:text="STOP/START" />

</RelativeLayout>


The code for the row_view_item.xml is given below:


<?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:gravity="center"
    android:orientation="vertical">

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

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

The code for the MainActivity.java class is given below:


package com.journaldev.androidadapterviewflipper;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterViewFlipper;
import android.widget.Button;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


    AdapterViewFlipper adapterViewFlipper;
    ArrayList<AndroidVersion> androidVersions = new ArrayList<>();
    Button button;

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


        populateData();

        adapterViewFlipper = findViewById(R.id.adapterViewFlipper);
        button = findViewById(R.id.button);

        adapterViewFlipper.setAdapter(new AdapterViewFlipperAdapter(this, androidVersions));
        adapterViewFlipper.setFlipInterval(500);
        adapterViewFlipper.startFlipping();


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (adapterViewFlipper.isFlipping())
                    adapterViewFlipper.stopFlipping();
                else
                    adapterViewFlipper.startFlipping();
            }
        });


    }

    @Override
    protected void onResume() {
        super.onResume();
        if (adapterViewFlipper != null && !adapterViewFlipper.isFlipping())
            adapterViewFlipper.startFlipping();
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (adapterViewFlipper != null && adapterViewFlipper.isFlipping())
            adapterViewFlipper.stopFlipping();
    }

    private void populateData() {
        androidVersions.add(new AndroidVersion(R.drawable.android_e, "Android Eclair"));
        androidVersions.add(new AndroidVersion(R.drawable.android_g, "Android Gingerbread"));
        androidVersions.add(new AndroidVersion(R.drawable.android_j, "Android Jellybean"));
        androidVersions.add(new AndroidVersion(R.drawable.android_k, "Android Kitkat"));
        androidVersions.add(new AndroidVersion(R.drawable.android_l, "Android Lollipop"));
        androidVersions.add(new AndroidVersion(R.drawable.android_m, "Android Marshmallow"));
        androidVersions.add(new AndroidVersion(R.drawable.android_n, "Android Nougat"));
        androidVersions.add(new AndroidVersion(R.drawable.android_o, "Android Oreo"));
    }
}


class AndroidVersion {

    int drawableInt;
    String versionName;


    AndroidVersion(int d, String v) {
        drawableInt = d;
        versionName = v;
    }
}

We’ve defined a Model class AndroidVersion.
Data is populated in the Adapter class from an ArrayList of AndroidVersion.
In order to save memory, we’ll stop the flipping when the activity is in the background.

We can add animations when a view enters and exits the AdapterViewFlipper by:

adapterViewFlipper.setInAnimation() and adapterViewFlipper.setInAnimation()

The code for the AdapterViewFlipperAdapter.java class is given below:


package com.journaldev.androidadapterviewflipper;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class AdapterViewFlipperAdapter extends BaseAdapter {

    private ArrayList<AndroidVersion> androidVersions;
    private Context mContext;

    public AdapterViewFlipperAdapter(Context context, ArrayList<AndroidVersion> androidVersions) {
        this.mContext = context;
        this.androidVersions = androidVersions;
    }

    @Override
    public int getCount() {
        return androidVersions.size();
    }

    @Override
    public Object getItem(int position) {
        return androidVersions.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {


        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).
                    inflate(R.layout.row_view_item, parent, false);
        }

        AndroidVersion version = androidVersions.get(position);

        TextView textView = convertView.findViewById(R.id.textView);
        ImageView imageView = convertView.findViewById(R.id.imageView);
        textView.setText(version.versionName);
        imageView.setImageResource(version.drawableInt);

        return convertView;
    }
}


The output of the above application in action is given below:

android adapter view flipper output

This brings an end to this tutorial. You can download the project from the link below:

Comments

  1. Mike says:

    Great post, but what is meant by

    We can add animations when a view enters and exits the AdapterViewFlipper by:
    `adapterViewFlipper.setInAnimation()` and `adapterViewFlipper.setInAnimation()`

    As both are the same? Typo?

    1. Anupam says:

      Yes, it’s a typo.
      It’s setOutAnimation and setInAnimation

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages