Dynamic ImageSwitcher in Kotlin
Last Updated :
09 Feb, 2025
Improve
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.
Steps of Implementing a Dynamic ImageSwitcher
Step 1: Create a new project in Android Studio
First we create a new project by following the below steps:
- Click on File, then New > New Project.
- After that include the Kotlin support and click on Next.
- Select the minimum SDK as per convenience and click Next button.
- Then select the Empty Views Activity > Next > Finish.
Step 2: Modify activity_main.xml file
In this file, we use constraint layout with ImageSwitcher and Buttons.
activity_main.xml:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white"
tools:context=".MainActivity">
<Button
android:id="@+id/prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
android:backgroundTint="@color/main_green_color"
android:text="Prev"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/next"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/main_green_color"
android:text="Next"
app:layout_constraintBottom_toBottomOf="@+id/prev"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/prev"
app:layout_constraintTop_toTopOf="@+id/prev" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create ImageSwitcher in MainActivity.kt file
Different methods of ImageSwitcher widget:
- 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.
First, we declare an array which contains the resource of the images used for the ImageView.
private val array = intArrayOf(
R.drawable.grape,
R.drawable.orange,
R.drawable.guava
)
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(20, 20, 20, 20)
imgView
})
Also, we should add the ImageSwitcher to the layout using.
val layout: ConstraintLayout = findViewById(R.id.main)
layout.addView(imgSwitcher)
MainActivity.kt:
package org.geeksforgeeks.demo
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 array = intArrayOf(
R.drawable.grape, R.drawable.orange,
R.drawable.guava
)
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 layout: ConstraintLayout = findViewById(R.id.main)
//add ImageSwitcher in constraint layout
layout.addView(imgSwitcher)
// set the method and pass array as a parameter
imgSwitcher.setImageResource(array[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(array[index])
}
// next button functionality
val next = findViewById<Button>(R.id.next)
next.setOnClickListener {
index = if (index + 1 < array.size) index + 1 else 0
imgSwitcher.setImageResource(array[index])
}
}
}
Output:
Click next button then we get the other animated image in the View.
