AdapterViewFlipper in Android with Example

What is AdapterViewFlipper in Android?

Adapter View Flipper is a widget which is used to animated between two or more views having the same set of content within it. It is used to implement slides like animation within our application. AdapterViewFlipper is a subclass of ViewAnimator class with the help of which we can flip between two different views.

Implementation of AdapterViewFlipper in Android

We will be creating a simple application in which we will be simply displaying a simple text view to display our heading and an AdapterViewFlipper. Inside the adapter view flipper we will be displaying one image view and a text view to display the programming languages within our adapter view flipper. We will be following a step by step guide to implement AdapterViewFlipper in our Android application.

Step 1 : Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Java.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.kt file.

Step 2 : Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <!-- on below line creating a text view for heading of application-->
   <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/idAVFlipper"
      android:layout_margin="10dp"
      android:text="Adapter View Flipper in Android"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="25sp"
      android:textStyle="bold" />

   <!-- on below lin creating an adapter view flipper-->
   <AdapterViewFlipper
      android:id="@+id/idAVFlipper"
      android:layout_width="match_parent"
      android:layout_height="300dp"
      android:layout_centerInParent="true"
      android:layout_margin="10dp" />
</RelativeLayout>

Explanation − In the above code we are creating a root layout as Relative Layout. Inside this layout we are creating our Textview for displaying a simple heading of our application. After that we are creating an AdapterViewFlipper widget to display the View Flipper.

Step 3 : Creating a new xml file for the items of AdapterViewFlipper

Navigate to app>res>xml>Right click on it>New XML Resource file and name it as view_flipper_item and add below code to it. Comments are added in the code to get to know in detail.

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

   <!-- on below line creating an image view for displaying in adapter view flipper-->
   <ImageView
      android:id="@+id/idIVLanguage"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:layout_centerInParent="true"
      android:layout_margin="10dp"
      android:padding="4dp" />

   <!-- on below line creating a text view for adapter view flipper -->
   <TextView
      android:id="@+id/idTVProgrammingLanguage"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idIVLanguage"
      android:gravity="center"
      android:textAlignment="center"
      android:textColor="@android:color/black"
      android:textSize="18sp"
      android:textStyle="bold" />
</RelativeLayout>

Explanation − In the above code we are creating a root layout as our Relative Layout. Inside this layout we are creating firstly an image view to display the image for a programming language and after that we are creating a text view for displaying a name of the programming language.

Step 4 : Adding images to the Drawable Folder

Copy the images you want to add in your view flipper. Then Navigate to Android Studio Project>app>res>drawable>Right click on it and paste these images to add them in the drawable folder.

Step 5 : Working with MainActivity.java File

Navigate to app>java>your app’s package name>MainActivity.java file and add below code to it. Comments are added in the code to get to know in detail.

package com.example.androidjavaapp;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.util.Log;
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;

public class MainActivity extends AppCompatActivity {

   // on below line creating a variable for adapter view flipper.
   AdapterViewFlipper languageAdapterViewFlipper;

   // on below line creating an array for images.
   int[] languageImageArray = {
      R.drawable.c,
      R.drawable.chash,
      R.drawable.cs,
      R.drawable.html,
      R.drawable.android,
      R.drawable.java,
   };

   // on below line creating an array for names of programming languages.
   String[] programmingLanguages = {
      "C++",
      "C#",
      "CSS",
      "HTML",
      "Android",
      "Java"
   };

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      // on below line initialing language adapter view flipper with id given in activity_main.xml file.
      languageAdapterViewFlipper = findViewById(R.id.idAVFlipper);
      // on below line initializing adapter view flipper.
      AdapterViewFlipperAdapter adapterViewFlipperAdapter = new AdapterViewFlipperAdapter(getApplicationContext(), languageImageArray, programmingLanguages);
      // on below line setting adapter.
      languageAdapterViewFlipper.setAdapter(adapterViewFlipperAdapter);
      // on below line setting flip interval in milli seconds and setting it to auto start to true.
      languageAdapterViewFlipper.setFlipInterval(2600);
      languageAdapterViewFlipper.setAutoStart(true);
   }
}

// on below line creating an adapter view flipper class and extending it with base adapter.
class AdapterViewFlipperAdapter extends BaseAdapter {
   // on below line creating a variable for context, images array, languages array and layout inflater.
   Context context;
   int[] languageImageArray;
   String[] programmingLngArray;
   LayoutInflater inflater;

   // on below line creating a constructor for it.
   public AdapterViewFlipperAdapter(Context context, int[] images, String[] names) {
      this.context = context;
      this.languageImageArray = images;
      this.programmingLngArray = names;
      this.inflater = LayoutInflater.from(context);
   }

   @Override
   public int getCount() {
      // on below line returning count for programming languages array.
      return programmingLngArray.length;
   }

   // below method is for getting item
   @Override
   public Object getItem(int position) {
      return null;
   }

   // below method is for getting item id.
   @Override
   public long getItemId(int position) {
      return 0;
   }

   // below method is use to get the view.
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
      // on below line inflating our layout file which we have created.
      convertView = inflater.inflate(R.layout.view_flipper_item, null);
      // on below line creating and initializing variables for text view and image view
      TextView programmingLngTV = convertView.findViewById(R.id.idTVProgrammingLanguage);
      ImageView languageIV = convertView.findViewById(R.id.idIVLanguage);
      // on below line setting data to our text view and image view and returning our layout file.
      programmingLngTV.setText(programmingLngArray[position]);
      languageIV.setImageResource(languageImageArray[position]);
      return convertView;
   }
}

Explanation − In the above code firstly we are creating variables for adapter view flippers, then we are creating an integer array for storing all the images, after that we are creating an array of strings to add the names of our programming languages. Make sure to add images as well as names of programming languages in the same order to display properly inside our AdapterViewFlipper.

After that we are initializing the adapter view flipper inside our onCreate method with the id which we have given inside our activity_main.xml file.

After that we are creating an inner class and giving it a name to it as AdapterViewFlipperAdapetr. This class will be used to set the data to the items of AdapterViewFlipper such as text view and imageview. Inside this class we are creating variables for context, language image integer array, programming languages string array as well as a variable for context. After that we are creating a constructor for all these variables.

Get count method is used to return the number of items to be displayed in the adapter view flipper. Inside this we are returning the size of our array.

After that, the get item method is used to get the item. Then one more method is created named as getItemId which we are returning as 0.

After that we are creating a getView method inside which we are inflating the layout file which we have created using layout inflater.

After that we are creating the variables for text view, image view and initializing these variables with ids which we have given in the layout file. After that we are setting the data for our text view and image view from our image array and language name array. At last we are returning the view which we have created.

After creating an adapter class we are initializing this adapter inside our onCreate method by passing context, programming language array and images array. Then we are setting this adapter to our adapter view flipper. After that we are setting the flip interval and to start for our adapter view flipper.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Conclusion

In the above tutorial we learn What is AdapterViewFlipper in Android and how we can use that to display the slide animation for the different views within our application.

Vaibhav Ahire

e

Updated on: 14-Mar-2023

299 Views

Kickstart Your Career

Get certified by completing the course

Get Started