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 –

Some of the popular attributes of android ViewFlipper inherited from ViewAnimator are –

Some of the popular attributes of android ViewFlipper inherited from FrameLayout are –

Some of the popular attributes of android ViewFlipper inherited from ViewGroup are –

Some of the popular attributes of android ViewFlipper inherited from View are –

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.

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.