VOOZH about

URL: https://www.geeksforgeeks.org/kotlin/imageswitcher-in-kotlin/

⇱ ImageSwitcher in Kotlin - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

ImageSwitcher in Kotlin

Last Updated : 7 Feb, 2025

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. Generally, we use ImageSwitcher in two ways manually in XML layout and programmatically in Kotlin file.

We should define an XML component, to use ImageSwitcher in our android application. 

<ImageSwitcher 
 android:id="@+id/view"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
</ImageSwitcher>

Different attributes of ImageSwitcher widget

XML attributesDescription
android:idUsed to specify the id of the view.
android:onClickUsed to specify the action when this view is clicked.
android:backgroundUsed to set the background of the view.
android:paddingUsed to set the padding of the view.
android:visibilityUsed to set the visibility of the view.
android:inAnimationUsed to define the animation to use when view is shown.
android:outAnimationUsed to define the animation to use when view is hidden.
android:animateFirstViewUsed to define whether to animate the current view when the view animation is first displayed.

Steps of Implementing ImageSwitcher

Step 1: Create a new project in Android Studio

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.

Step 2: Modify activity_main.xml file

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

activity_main.xml:

Design UI:

👁 imageswitcher-design-ui

Step 3: Access ImageSwitcher in MainActivity.kt file

Different methods of ImageSwitcher widget:

  1. setImageDrawable: It is used to set a new drawable on the next ImageView in the switcher.
  2. setImageResource: It is used to set a new image on the ImageSwitcher with the given resource id.
  3. 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.guava, R.drawable.orange)

then, we access the ImageSwitcher from the XML layout and set ImageView to display the image. 

val imgSwitcher: ImageSwitcher = findViewById(R.id.imageSwitcher)
imgSwitcher.setFactory({
 val imgView = ImageView(applicationContext)
 imgView.scaleType = ImageView.ScaleType.FIT_CENTER
 imgView.setPadding(8, 8, 8, 8)
 imgView
})


Also, we will use one of the above method for ImageSwitcher. 

imgSwitcher.setImageResource(array[index])

MainActivity.kt:

Output:

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


Comment
Article Tags:

Explore