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

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 –

Sr. XML Attributes Description
1 android:autoStart If set true, it will automatically start animating views
2 android:flipInterval Specifies 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 Specifies whether to animate first view when viewAnimation is first displayed
2 android:inAnimation Specifies the animation to use when view is shown
3 android:loopViews Specifies whether to start from first view if the animator has at end of the list
4 android:outAnimation Specifies 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 Specifies whether to run layoutTransition when there is any changes in layout
2 android:animationCache Specifies whether layout animations should create a drawing cache for their children
3 android:clipToPadding Specifies 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 Specifies the layout animation to use the first time the ViewGroup is laid out
5 android:layoutMode Specifies 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 Specifies alpha of the view
2 android:background Specifies background of the view
3 android:backgroundTint Specifies tint to apply to the background
4 android:backgroundTintMode Specifies blending mode to apply to tint of the background
5 android:clickable Specifies whether this view is clickable or not
6 android:elevation Specifies z-depth of the view
7 android:focusable Specifies whether this view can take focus or not
8 android:foreground Specifies drawable to be shown above the view



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.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as AdapterViewFlipper. Then, check Include Kotlin Support and 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. You will get a newly created project successfully if you have followed steps properly.

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.

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