Dynamic ImageSwitcher in Kotlin

Android ImageSwitcher is a user interface widget that provides a smooth transition animation effect to the images while switching between them to display in the view.
ImageSwitcher is subclass of View Switcher which is used to animates one image and displays next one.

Here, we create ImageSwitcher programmatically in Kotlin file.

First we create a new project by following the below steps:



  1. Click on File, then New => New Project.
  2. After that include the Kotlin support and click on next.
  3. Select the minimum SDK as per convenience and click next button.
  4. Then select the Empty activity => next => finish.

Modify activity_main.xml file

In this file, we use constraint layout with ImageSwitcher and Buttons.

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/constraint_layout">
  
    <Button
        android:id="@+id/prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="250dp"
        android:layout_marginEnd="32dp"
        android:text="@string/prev"
        app:layout_constraintEnd_toStartOf="@+id/next"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <Button
        android:id="@+id/next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="250dp"
        android:layout_marginEnd="32dp"
        android:text="@string/next"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/prev"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Update strings.xml file

Here, we update the name of the application using the string tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
   <string name="app_name">ImageSwitcherInKotlin</string>
   <string name="next">Next</string>
   <string name="prev">Prev</string>
</resources>

chevron_right


Different methods of ImageSwitcher widget

Methods Description
setImageDrawable It is used to set a new drawable on the next ImageView in the switcher.
setImageResource It is used to set a new image on the ImageSwitcher with the given resource id.
setImageURI It is used to set a new image on the ImageSwitcher with the given URI.

Create ImageSwitcher in MainActivity.kt file

First, we declare an array flowers which contains the resource of the images used for the ImageView.

private val flowers = intArrayOf(R.drawable.flower1,
       R.drawable.flower2, R.drawable.flower4)

then, we create the ImageSwitcher in the MainActivity.kt file and set ImageView to display the image.

val imgSwitcher = ImageSwitcher(this)
imgSwitcher?.setFactory({
           val imgView = ImageView(applicationContext)
           imgView.scaleType = ImageView.ScaleType.FIT_CENTER
           imgView.setPadding(8, 8, 8, 8)
           imgView
           })

Also, we should add the ImageSwitcher to the layout using.

val c_Layout = findViewById(R.id.constraint_layout)
        //add ImageSwitcher in constraint layout
        c_Layout?.addView(imgSwitcher)
filter_none

edit
close

play_arrow

link
brightness_4
code

package com.geeksforgeeks.myfirstkotlinapp
  
  
import androidx.appcompat.app.AppCompatActivity
  
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageSwitcher
import android.widget.ImageView
import androidx.constraintlayout.widget.ConstraintLayout
  
class MainActivity : AppCompatActivity() {
  
    private val flowers = intArrayOf(R.drawable.flower1, R.drawable.flower2,
                          R.drawable.flower4)
    private var index = 0
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // create the ImageSwitcher
        val imgSwitcher = ImageSwitcher(this)
  
        imgSwitcher?.setFactory({
            val imgView = ImageView(applicationContext)
            imgView.scaleType = ImageView.ScaleType.FIT_CENTER
            imgView.setPadding(20, 20, 20, 20)
            imgView
        })
  
        val c_Layout = findViewById<ConstraintLayout>(R.id.constraint_layout)
        //add ImageSwitcher in constraint layout
        c_Layout?.addView(imgSwitcher)
  
        // set the method and pass array as a parameter
        imgSwitcher?.setImageResource(flowers[index])
  
        val imgIn = AnimationUtils.loadAnimation(
            this, android.R.anim.slide_in_left)
        imgSwitcher?.inAnimation = imgIn
  
        val imgOut = AnimationUtils.loadAnimation(
            this, android.R.anim.slide_out_right)
        imgSwitcher?.outAnimation = imgOut
  
        // previous button functionality
        val prev = findViewById<Button>(R.id.prev)
        prev.setOnClickListener {
            index = if (index - 1 >= 0) index - 1 else 1
            imgSwitcher?.setImageResource(flowers[index])
        }
        // next button functionality
        val next = findViewById<Button>(R.id.next)
        next.setOnClickListener {
            index = if (index + 1 < flowers.size) index +1 else 0
            imgSwitcher?.setImageResource(flowers[index])
        }
    }
}

chevron_right


AndroidManifest.xml file

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
package="com.geeksforgeeks.myfirstkotlinapp">
  
<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>

chevron_right


Run as Emulator:

Click next button then we get the other animated image in the View.

 



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.