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

Output

Tutorialwing Kotlin AdapterViewFlipper Output

Getting Started

Android AdapterViewFlipper can be defined as below –

AdapterViewFlipper is subclass of ViewFlipper that are used to switch between views using some animations. Only one view is shown at a time.

Different 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 Using Kotlin

At first, we will create android application. Then, we will use AdapterViewFlipper using kotlin in the application.

1. Creating New Project in Kotlin

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

Since we have a project now, we will modify xml and other files to use adapterViewFlipper using kotlin 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 to create views by AdapterViewFlipper. So, you can click here to download images to be used in the application.

4. Create Animation For AdapterViewFlipper

Now, we are going to define the animations that will be used whenever current view is replaced by next/previous view.
So, Follow steps below to define animations –
a. Create a folder, named as animator, in main/res folder.
b. Then, create an xml file, named as left_in.xml, in main/res/animator folder. Then, add below code into it ( in main/res/animator folder).

<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 an xml file, named as right_out.xml, in main/res/animator folder. Then, add below code into it (in main/res/animator folder).

<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 file, 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 Adapter For AdapterViewFlipper

Now, we will create adapter for adapterViewFlipper that are responsible to create different views in AdapterViewFlipper. So, Create a kotlin file, CustomAdapter.kt file, in main/java/com.tutorialwing.adapterflipper folder. Then, add below code into it( in main/java/com.tutorialwing.adapterviewflipper/CustomAdapter.kt file)

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

class CustomAdapter internal constructor(context: Context, private val nameList: Array<String>, private val imageList: IntArray) : BaseAdapter() {

    override fun getItem(position: Int): Any {
        TODO("not implemented")
    }

    private val inflater: LayoutInflater = LayoutInflater.from(context)

    override fun getCount(): Int {
        return nameList.size
    }

    override fun getItemId(position: Int): Long {
        return 0
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val convertView: View = inflater.inflate(R.layout.item, parent, false)
        val nameView = convertView.findViewById<TextView>(R.id.name)
        val imageView = convertView.findViewById<ImageView>(R.id.image)
        nameView?.text = nameList[position]
        imageView?.setImageResource(imageList[position])
        return convertView
    }
}

In CustomAdapter.kt, getView() method is responsible to create different views for given position in adapter in AdapterViewFlipper.

7. Use AdapterViewFlipper Widget in xml file

Open src/main/res/layout/activity_main.xml file and 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 widget. android:autoStart=”” is responsible to specify whether view in adapterViewFlipper will start flipping automatically or not. android:flipInterval=”” defines the interval after which current view will be switched by next/previous view.

8. Access AdapterViewFlipper Widget in Kotlin file

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

package com.tutorialwing.adapterviewflipper

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

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adapterViewFlipper = findViewById<AdapterViewFlipper>(R.id.adapterViewFlipper)
        if (adapterViewFlipper != null) {

            adapterViewFlipper.setInAnimation(applicationContext, R.animator.left_in)
            adapterViewFlipper.setOutAnimation(applicationContext, R.animator.right_out)

            val nameList = arrayOf("Guava", "JackFruit", "Mix Fruit", "Apple", "Pomegranate", "Strawberry", "Zespri Kiwi")
            val imageList = intArrayOf(R.drawable.guava, R.drawable.jackfruit, R.drawable.mix_fruit, R.drawable.apple, R.drawable.pomegranate, R.drawable.strawberry, R.drawable.zespri_kiwi)

            val adapter = CustomAdapter(this, nameList, imageList)
            adapterViewFlipper.adapter = adapter
        }
    }
}

We have accessed AdapterViewFlipper using kotlin file (MainActivity.kt file) in the application. Then, we have set in and out animations in it that are used whenever current view is replaced by next/previous view. After that, we have created an adapter and set it into adapterViewFlipper using kotlin file (MainActivity file).

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

AndroidManifest.xml file

Code inside 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 our tutorial on Android AdapterViewFlipper using Kotlin.