Open In App

ViewFlipper in Android with Kotlin

Improve
Improve
Like Article
Like
Save
Share
Report

View Flipper is a UI component in Android which is used to flip the view within the screen in the android application. The View Flipper class is an extension of ViewAnimator class. With the help of this, we can simply flip the views. In this article, we will take a look at How we can use ViewFlipper in Android applications using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: Please refer to this article to perform the same operation in java: How to add ViewFlipper in Android in Java?

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Adding images to the drawable folder

Navigate to app > res > drawable and add images in that folder. You may refer to this article How to Add Image to Drawable Folder in Android Studio?

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--on below line we are creating our view flipper-->
    <ViewFlipper
        android:id="@+id/idViewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idLLBtn"
        android:inAnimation="@android:anim/slide_out_right"
        android:outAnimation="@android:anim/slide_in_left">
 
        <!--on below line we are creating an imageview-->
        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/android" />
 
        <!--on below line we are creating a simple text view-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:text="Welcome to Android App Development Course"
            android:textAlignment="center"
            android:textColor="@color/purple_200"
            android:textSize="18sp"
            android:textStyle="bold" />
 
        <!--on below line we are creating a simple button-->
        <Button
            android:id="@+id/idBtnViewCourse"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:padding="4dp"
            android:text="View Course"
            android:textAllCaps="false" />
 
    </ViewFlipper>
 
    <!--on below line we are simply creating a
        new linear layout for displaying our two buttons-->
    <LinearLayout
        android:id="@+id/idLLBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:padding="4dp"
        android:weightSum="4">
 
        <!--creating a button for going to previous screen-->
        <Button
            android:id="@+id/idBtnPrev"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="Previous"
            android:textAllCaps="false" />
 
        <!--adding view to add space between two buttons-->
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="2" />
 
        <!--creating a button to move next screen-->
        <Button
            android:id="@+id/idBtnNext"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="Next"
            android:textAllCaps="false" />
 
    </LinearLayout>
 
</RelativeLayout>


Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package com.gtappdevelopers.kotlingfgproject
 
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.Button
import android.widget.ViewFlipper
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
    // on below line we are creating variables
    // for view flipper and our buttons
    lateinit var viewFlipper: ViewFlipper
    lateinit var prevBtn: Button
    lateinit var nextBtn: Button
    lateinit var visitCourseBtn: Button
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // initializing variables of view flipper
        // and button with their ids.
        viewFlipper = findViewById(R.id.idViewFlipper)
        prevBtn = findViewById(R.id.idBtnPrev)
        nextBtn = findViewById(R.id.idBtnNext)
        visitCourseBtn = findViewById(R.id.idBtnViewCourse)
 
        // on below line adding on click listener
        // for our visit course button.
        visitCourseBtn.setOnClickListener {
            // on below line we are creating intent
            // for opening a new course in chrome tab.
            val openCourse = Intent(android.content.Intent.ACTION_VIEW)
            // on below line we are setting the
            // url which we have to open.
            openCourse.data = Uri.parse("https://www.geeksforgeeks.org/android-tutorial/")
            // on below line we are calling start
            // activity to start a new activity.
            startActivity(openCourse)
        }
        // adding on click listener
        // for our previous button.
        prevBtn.setOnClickListener {
            // on below line we are simply calling
            // view flipper to show previous screen.
            viewFlipper.showPrevious()
        }
 
        // adding on click listener
        // for our next button.
        nextBtn.setOnClickListener {
            // on below line we are simply calling
            // view flipper to show next screen.
            viewFlipper.showNext()
        }
    }
}


Now run your application to see the output of it. 

Output: 



Last Updated : 02 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads