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

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.

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