Image Switcher in Android with Example

Sometimes, you may not want an image to appear suddenly on the screen. Instead, you might prefer a smooth transition from one image to another using animation. Android offers a tool called ImageSwitcher to help with this. An ImageSwitcher lets you add simple transition effects to your images.

What are we going to build?

In this article, we'll create an app where you can swipe images from left to right (and vice versa) using buttons. As you swipe, the ImageSwitcher will animate the change between images.

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 activity > next > finish.

We are going to implement this project using both Java and Kotlin.

Step 2: Modify activity_main.xml file

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

activity_main.xml:

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:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="8dp"
        app:layout_constraintBottom_toTopOf="@+id/prev"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:backgroundTint="@color/main_green_stroke_color"
        android:text="Prev"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/next"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <Button
        android:id="@+id/next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:backgroundTint="@color/main_green_stroke_color"
        android:text="Next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/prev"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Step 3: Access ImageSwitcher in MainActivity 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.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 file:

Java

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private final int[] array = {R.drawable.grape, R.drawable.guava, R.drawable.orange};
    private int index = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // access the ImageSwitcher
        ImageSwitcher imgSwitcher = findViewById(R.id.imageSwitcher);

        // Set the factory for ImageSwitcher
        imgSwitcher.setFactory(() -> {
            ImageView imgView = new ImageView(getApplicationContext());
            imgView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            imgView.setPadding(8, 8, 8, 8);
            return imgView;
        });

        // Set initial image
        imgSwitcher.setImageResource(array[index]);

        // Load animations
        imgSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left));
        imgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));

        // Previous button functionality
        Button prev = findViewById(R.id.prev);
        prev.setOnClickListener(v -> {
            index = (index - 1 >= 0) ? index - 1 : 2;
            imgSwitcher.setImageResource(array[index]);
        });

        // Next button functionality
        Button next = findViewById(R.id.next);
        next.setOnClickListener(v -> {
            index = (index + 1 < array.length) ? index + 1 : 0;
            imgSwitcher.setImageResource(array[index]);
        });
    }
}

Kotlin

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

class MainActivity : AppCompatActivity() {

    private val array = intArrayOf(R.drawable.grape,
        R.drawable.guava, R.drawable.orange)
    private var index = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // access the ImageSwitcher
        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
        })

        // 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 2
            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.