Android AdapterViewFlipper Tutorial With Example

Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners. Also, if you are interested in content writing, you can mail us at tutorialwing@gmail.com.

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 Android AdapterViewFlipper Tutorial With Example

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 –

Sr. XML Attributes Description
1 android:autoStart If set true, it will automatically start animating views
2 android:flipInterval Duration after which current view will be replaced by next/previous view

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

Sr. XML Attributes Description
1 android:animateFirstView Defines whether to animate first view when viewAnimation is first displayed
2 android:inAnimation Defines the animation to use when view is shown
3 android:loopViews Defines whether to start from first view if the animator has at end of the list
4 android:outAnimation Defines the animation to use when view is hidden

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

Sr. XML Attributes Description
1 android:animateLayoutChanges Defines whether to run layoutTransition when there is any changes in layout
2 android:animationCache Defines whether layout animations should create a drawing cache for their children
3 android:clipToPadding Defines whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero
4 android:layoutAnimation Defines the layout animation to use the first time the ViewGroup is laid out
5 android:layoutMode Defines the layout mode of the viewGroup

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

Sr. XML Attributes Description
1 android:alpha Defines alpha of the view
2 android:background Defines background of the view
3 android:backgroundTint Defines tint to apply to the background
4 android:backgroundTintMode Defines blending mode to apply to tint of the background
5 android:clickable Defines whether this view is clickable or not
6 android:elevation Defines z-depth of the view
7 android:focusable Defines whether this view can take focus or not
8 android:foreground Defines drawable to be shown above the view



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.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as AdapterViewFlipper. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

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.

Support Us

If you like Tutorialwing and would like to contribute, you can email an article on any educational topic at tutorialwing@gmail.com. We would love to publish your article. See your article on Tutorialwing and help others with your knowledge. Follow Facebook, LinkedIn, Google+, Twitter, Youtube for latest updates.
Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners