Hello Readers! In this post, we are going to learn about how to use android adapterViewFlipper widget in any android application. We will also go through different attributes of adapterViewFlipper widget that can be used to customise it.

Output

Tutorialwing Android AdapterViewFlipper Output

Getting Started

AdapterViewFlipper widget can be defined as below –

AdapterViewFlipper is simple ViewAnimator that switches between views added to it. Only one child is shown at a time.

Attributes of Android AdapterViewFlipper Widget

Some of the popular attributes of android adapterViewFlipper widget are –

Some of the popular attributes of android AdapterViewFlipper inherited from AdapterViewAnimator are –

Some of the popular attributes of android AdapterViewFlipper inherited from ViewGroup are –

Some of the popular attributes of android AdapterViewFlipper inherited from View are –

Example of Android AdapterViewFlipper Widget

At first, we will create android application. Then, we will use adapterViewFlipper widget in this application.

1. Creating New Project

Follow steps below to create new project. Please ignore the steps if you have already created a new application.

Now, we will modify xml and java file to use adapterViewFlipper widget in the application.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">AdapterViewFlipper</string>
	<string name="no_image">No Image</string>
</resources>

3. Download Drawable Resources Needed

We need some drawable images for this tutorial. So, you can click here to download images to be used.

4. Create Animation for AdapterViewFlipper

We need animations to apply whenever there is switch between views. In this tutorial, we will define two animations left_in.xml and right_out.xml. left_in.xml will be used when view is shown. right_out.xml is used when view is hidden.

Follow steps below to define animations –
a. Create animator folder in main/res folder.
b. Now, create an xml file, left_in.xml, in main/res/animator folder. Then, add below code into main/res/animator/left_in.xml file.

<objectAnimator
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:duration="600"
	android:interpolator="@android:anim/accelerate_decelerate_interpolator"
	android:propertyName="x"
	android:valueFrom="-1500"
	android:valueTo="0"
	android:valueType="floatType"/>

c. Now, create an xml file, right_out.xml, in main/res/animator folder. Then, add below code into main/res/animator/right_out.xml file.

<objectAnimator
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:duration="600"
	android:interpolator="@android:anim/accelerate_decelerate_interpolator"
	android:propertyName="x"
	android:valueFrom="0"
	android:valueTo="1500"
	android:valueType="floatType"/>

5. Create View For Single Item

Now, we will create view for single item in AdapterViewFlipper. So, create an xml file, item.xml, in res/layout folder. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	android:id="@+id/rootContainer"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:orientation="vertical">

	<ImageView
		android:id="@+id/image"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_margin="10dp"
		android:contentDescription="@string/no_image"/>

	<TextView
		android:id="@+id/name"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textColor="@android:color/black"
		android:textSize="20sp"/>

</LinearLayout>

6. Create An Adapter For AdapterViewFlipper

Now, we will create an adapter for AdapterViewFlipper. This adapter provides data to the adapterViewFlipper to create different views. So, create a java file, CustomAdapter.java, in main/java/com.tutorialwing.adapterviewflipper folder. Then, add below code into it.

package com.tutorialwing.adapterviewflipper;

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;

public class CustomAdapter extends BaseAdapter {

	private LayoutInflater inflater;
	private String[] nameList;
	private int[] imageList;

	CustomAdapter(Context context, String[] nameList, int[] imageList) {
		this.nameList = nameList;
		this.imageList = imageList;
		inflater = LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		return (nameList != null) ? nameList.length : 0;
	}

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		convertView = inflater.inflate(R.layout.item, null);
		TextView nameView = convertView.findViewById(R.id.name);
		ImageView imageView = convertView.findViewById(R.id.image);
		nameView.setText(nameList[position]);
		imageView.setImageResource(imageList[position]);
		return convertView;
	}
}

In Constructor, CustomerAdapter(…, …, …), we are providing context, nameList and imageList. getCount() method returns the number of views to be created. getItem() method returns the item at given index(i.e. position). getItemId() method returns id of the item at given position. getView() method is responsible to create views for given position in the adapter.

7. Use AdapterViewFlipper Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

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

	<AdapterViewFlipper
		android:id="@+id/adapterViewFlipper"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:autoStart="true"
		android:flipInterval="3200"/>

</LinearLayout>

In activity_main.xml file, we have defined adapterViewFlipper. android:autoStart=”true” means adapterViewFlipper will automatically switch between different views. android:flipInterval=”3200″ means adapterViewFlipper will switch between different views at an regular interval of 3200 milliseconds. Now, we will access this adapterViewFlipper in java file to perform some operations on it.

8. Access AdapterViewFlipper Widget in java file

Open src/main/java/com.tutorialwing.adapterviewflipper/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.adapterviewflipper;

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

public class MainActivity extends AppCompatActivity {

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

		AdapterViewFlipper adapterViewFlipper = findViewById(R.id.adapterViewFlipper);
		if (adapterViewFlipper != null) {

			adapterViewFlipper.setInAnimation(getApplicationContext(), R.animator.left_in);
			adapterViewFlipper.setOutAnimation(getApplicationContext(), R.animator.right_out);

			String nameList[] = {"Guava", "JackFruit", "Mix Fruit", "Apple", "Pomegranate", "Strawberry", "Zespri Kiwi"};
			int imageList[] = {R.drawable.guava, R.drawable.jackfruit, R.drawable.mix_fruit, R.drawable.apple,
					R.drawable.pomegranate, R.drawable.strawberry, R.drawable.zespri_kiwi};

			CustomAdapter adapter = new CustomAdapter(this, nameList, imageList);
			adapterViewFlipper.setAdapter(adapter);
		}
	}
}

In MainActivity.java file, we have accessed adapterViewFlipper defined in xml file. Then, we have set in and out animations that are used when view is shown/hidden respectively. Then, we have defined customAdapter and set it in AdapterViewFlipper.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.adapterviewflipper"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of tutorial on Android AdapterViewFlipper widget.