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
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.