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 viewFlipper using kotlin in any android application. We will also learn about different attributes of android viewFlipper that can be used to customise this widget.
Output

Tutorialwing Kotlin ViewFlipper Output
Getting Started
Android ViewFlipper can be defined as below –
ViewFlipper is a widget that are used to switch between views that have been added to it. Only one view is shown at a time. We can also set animations that will be used when view is shown / hidden.
Different Attributes of Android ViewFlipper Widget
Some of the popular attributes of android viewFlipper widget are –
Sr. | XML Attributes | Description |
---|---|---|
1 | android:autoStart | If set true, it will automatically start animating views. |
2 | android:flipInterval | Specifies the time interval after which view will be flipped |
Some of the popular attributes of android ViewFlipper inherited from ViewAnimator are –
Sr. | XML Attributes | Description |
---|---|---|
1 | android:animateFirstView | Specifies whether to animate first view when the viewAnimation is first displayed |
2 | android:inAnimation | Specifies the animation to be used when view is shown |
3 | android:outAnimation | Specifies the animation to be used when view is hidden |
Some of the popular attributes of android ViewFlipper inherited from FrameLayout are –
Sr. | XML Attributes | Description |
---|---|---|
1 | android:foregroundGravity | Specifies the gravity of the foreground drawable |
2 | android:measureAllChildren | Specifies whether to measure all children or only those in VISIBLE or INVISIBLE state when measuring |
Some of the popular attributes of android ViewFlipper inherited from ViewGroup are –
Sr. | XML Attributes | Description |
---|---|---|
1 | android:animateLayoutChanges | Specifies whether LayoutTransition should run whenever 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 this viewGroup |
Some of the popular attributes of android ViewFlipper inherited from View are –
Sr. | XML Attributes | Description |
---|---|---|
1 | android:alpha | Specifies the alpha of the view |
2 | android:background | Specifies the background of the view |
3 | android:backgroundTint | Specifies the tint to apply to background drawable |
4 | android:backgroundTintMode | Specifies blending mode to apply to background tint |
5 | android:clickable | Specifies whether 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 used to show above this view |
Example of Android ViewFlipper Using Kotlin
At first, we will create android application. Then, we will use viewFlipper 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 ViewFlipper. 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 viewFlipper 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">ViewFlipper</string> <string name="pause">Pause</string> <string name="play">Play</string> <string name="flipping_started">Flipping Started...</string> <string name="flipping_stopped">Flipping Stopped...</string> </resources>
3. Download Drawable Resources Needed
You need some images, stored in res/drawable folder, that will be used in viewFlipper in the application. You can click here to download images used in the application.
4. Use ViewFlipper 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"> <Button android:id="@+id/playPause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="15dp" android:text="Pause"/> <ViewFlipper android:id="@+id/viewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:autoStart="true" android:flipInterval="2000"> </ViewFlipper> </LinearLayout>
In activity_main.xml file, we have defined viewFlipper. Attribute android:autoStart=”” is used to set whether viewFlipper should start flipping the view automatically or not. If set true, it means it will start automatically. Attribute android:flipInterval=”” is used to set the time interval after which view will be flipped.
5. Access ViewFlipper Using Kotlin file
Open src/main/java/com.tutorialwing.viewflipper/MainActivity.kt file and add below code into it.
package com.tutorialwing.viewflipper import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.view.Gravity import android.view.ViewGroup import android.widget.* class MainActivity : AppCompatActivity() { private var imageList = intArrayOf(R.drawable.guava, R.drawable.jackfruit, R.drawable.mix_fruit, R.drawable.pomegranate, R.drawable.strawberry, R.drawable.zespri_kiwi) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val viewFlipper = findViewById<ViewFlipper>(R.id.viewFlipper) if (viewFlipper != null) { viewFlipper.setInAnimation(applicationContext, android.R.anim.slide_in_left) viewFlipper.setOutAnimation(applicationContext, android.R.anim.slide_out_right) } if (viewFlipper != null) { for (image in imageList) { val imageView = ImageView(this) val layoutParams = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT) layoutParams.setMargins(30, 30, 30, 30) layoutParams.gravity = Gravity.CENTER imageView.layoutParams = layoutParams imageView.setImageResource(image) viewFlipper.addView(imageView) } } val btnPlayPause = findViewById<Button>(R.id.playPause) if (btnPlayPause != null && viewFlipper != null) { btnPlayPause.setOnClickListener { if (viewFlipper.isFlipping) viewFlipper.stopFlipping() else viewFlipper.startFlipping() btnPlayPause.text = getString(if (viewFlipper.isFlipping) R.string.pause else R.string.play) Toast.makeText(this@MainActivity, getString(if (viewFlipper.isFlipping) R.string.flipping_started else R.string.flipping_stopped), Toast.LENGTH_SHORT).show() } } } }
We have accessed viewFlipper using kotlin file (i.e. in MainActivity.kt file) in the application. Then, we have set in and out animations in it. in and out animations are used when view is shown or hidden. After that, we have created ImageView that have been added to viewFlipper. Number of imageView created are equal to length of imageList. After that, we have set click listener on viewFlipper that play/pause view flipping in viewFlipper. We have also showing a toast message that displays the current status of the viewFlipper (whether viewFlipper is flipping the view or not).
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.viewflipper" 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 ViewFlipper using Kotlin.