Create an Android AdapterViewFlipper Programmatically in Android

Hello Readers! In this post, we are going to learn how to create and use android adapterViewFlipper programmatically in any android application. We will also learn to add adapterViewFlipper in linearLayout programmatically in any application.

Output

Tutorialwing Android Dynamic AdapterViewFlipper Output Android AdapterViewFlipper Programmatically in Android

Tutorialwing Android Dynamic AdapterViewFlipper Output

Getting Started

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

1. Creating New Project

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

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as DynamicAdapterViewFlipper. 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 android adapterViewFlipper programmatically.

2. Modify values folder

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

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

3. Create Animation for AdapterViewFlipper

Now, we need to create some animations that will be used whenever there is switch between views in AdapterViewFlipper. Follow the steps below to create animations file in the application.

a. Create a folder, named as animator, in main/res folder.
b. Then, create an xml file, left_in.xml file, in main/res/animator folder. Then, add below code into it (in 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. Then, create another xml file, right_out.xml file, in main/res/animator folder. Then, add below code into it (in 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"/>

4. Download Drawable Resources Needed

You need some images, stored in res/drawable folder, that will be used by AdapterViewFlipper to create different views. So, you can click here to download images needed in the application.

5. Create View For Single Item

Now, we will create view for single item in AdapterViewFlipper. So, create an xml file, named as item.xml, 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 Adapter For AdapterViewFlipper

Now, we will create adapter to be used by adapterViewFlipper to create views. Adapter is responsible for providing data and creating views accordingly. So, create a java file, named as CustomAdapter.java, in main/com.tutorialwing.dynamicadapterviewflipper folder. Then, add below code into it.

package com.tutorialwing.dynamicadapterviewflipper;

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 CustomAdapter.java file, we have done below things –
a. We have defined a constructor, CustomAdapter(…, …, …), that accepts context, name list and image list. nameList and imageList will be used to provide name and image for any item at a given position.
b. getCount() method will return the total number of items to be created. Note that we are assuming that total count of views is equal to size of nameList array. So, size of imageList must not be less than nameList. Otherwise, you will get an error while creating views.
c. getView() method is responsible for creating views at a given position.

7. Modify Layout Folder

Open res/layout/activity_main.xml file. 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:orientation="vertical">
</LinearLayout>

In activity_main.xml file, we have defined a linearLayout, with id rootContainer, that will act as container for adapterViewFlipper created programmatically in the application.

8. Create Android AdapterViewFlipper Programmatically / Dynamically

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

package com.tutorialwing.dynamicadapterviewflipper;

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

public class MainActivity extends AppCompatActivity {

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

		AdapterViewFlipper adapterViewFlipper = new AdapterViewFlipper(this, null);
		LinearLayout.LayoutParams layoutParams =
				new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
		adapterViewFlipper.setLayoutParams(layoutParams);

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

		adapterViewFlipper.setFlipInterval(3200);
		adapterViewFlipper.setAutoStart(true);

		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);

		LinearLayout linearLayout = findViewById(R.id.rootContainer);
		if (linearLayout != null) {
			linearLayout.addView(adapterViewFlipper);
		}
	}
}

In MainActivity.java file, we have created android AdapterViewFlipper programmatically. Then, we have set layout params, in and out animations in it. in and out animations are responsible for showing animations while there is change in current view. setFlipInterval() method is responsible to set time after which current view will be replaced with next/previous view. Then, we have create an adapter and set it into adapterViewFlipper. At last, we have added adapterViewFlipper in linearLayout having id rootContainer.

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

AndroidManifest.xml file

Code inside src/main/AndroidManifest.xml file would look like below –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.dynamicadapterviewflipper"
		  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 application, we will get output as shown above.

That’s the end of tutorial on Creating Android AdapterViewFlipper Programmatically.

Leave a Reply