Image Switcher in Android with Example

In certain cases, you may not want an image to appear abruptly on screen, rather you would prefer that its transition from one image to another with some kind of animation. Android supports this in the form of ImageSwitcher. An image switcher allows you to add some transitions to the images through the way they appear on the screen.

What we are going to build in this article?

In this article, we will be using buttons to swipe images from left to right and vice versa along with ImageSwithcer performing its operation. Here is a sample video of the application which we are going to build. Note that we are going to implement this project in Java Language.

Step by Step Implementation

Step 1: Create a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Add  new vector assets in drawable

Navigate to drawable > right-click > new > vector asset and then select the following assets from clip art.

1.  Navigate next:

2. Navigate before:

Step 3: Working with XML files

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.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Linear Layout as parent layout-->
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    tools:context=".MainActivity">

    <!-- Left button to swipe image-->
    <ImageButton
        android:layout_width="50dp"
        android:layout_height="80dp"
        android:id="@+id/bt_previous"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_navigate_before"
        />

    <!-- Image switcher -->
    <ImageSwitcher
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:id="@+id/image_switcher"
        />

    <!-- Right button to swipe image-->
    <ImageButton
        android:layout_width="50dp"
        android:layout_height="80dp"
        android:id="@+id/bt_next"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_navigate_next"
        />

</LinearLayout>

Follow the path app > res > right-click > new > directory > Name it as “anim“. Create a new animation resource file in anim and name it as from_left.xml. Below is the code for from_left.xml file-

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:fromXDelta="-100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="250"
        />
</set>

Create a new animation resource file in anim and name it as from_right.xml. Below is the code for the from_right.xml file

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

      <translate
        android:fromXDelta="100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="250"
        />
</set>

Create a new animation resource file in anim and name it as to_right.xml. Below is the code for the to_right.xml file-

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:fromXDelta="0%" android:toXDelta="100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="250"

        />
</set>

Create a new animation resource file in anim and name it as to_left.xml. Below is the code for the to_left.xml file-

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="250"
        />
</set>

Step 4: Working with MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 

Java

package com.example.imageswitcher;

import androidx.appcompat.app.AppCompatActivity;

import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity {

    // initialize variables
    ImageButton btPrevious,btNext;
    ImageSwitcher imageSwitcher;

    int imageList[]={R.drawable.android,R.drawable.java,R.drawable.js
    ,R.drawable.python,R.drawable.php};
    int count=imageList.length;
    int currentIndex=0;

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

        // assign variables
        btPrevious=findViewById(R.id.bt_previous);
        btNext=findViewById(R.id.bt_next);
        imageSwitcher=findViewById(R.id.image_switcher);

        // implement the ViewFactory interface and implement
        // unimplemented method that returns an imageView
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory(){
            @Override
            public View makeView() {
                ImageView imageView= new ImageView(getApplicationContext());
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT
                        ,ViewGroup.LayoutParams.FILL_PARENT
                ));
                // returning imageview
                return imageView;
            }
        });
        imageSwitcher.setImageResource(imageList[0]);
        // set on click listener on left button
        btPrevious.setOnClickListener(new  View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // setting animation to swipe image from right to left
                imageSwitcher.setInAnimation(MainActivity.this,R.anim.from_right);
                imageSwitcher.setOutAnimation(MainActivity.this,R.anim.to_left);
                --currentIndex;
                // condition
                if(currentIndex<0)
                    currentIndex=imageList.length-1;
                imageSwitcher.setImageResource((imageList[currentIndex]));
            }
        });

        // set on click listener on right(next) button
        btNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // setting animation to swipe image from left to right
                imageSwitcher.setInAnimation(MainActivity.this,R.anim.from_left);
                imageSwitcher.setOutAnimation(MainActivity.this,R.anim.to_right);
                currentIndex++;
                // condition
                if(currentIndex==count)
                    currentIndex=0;
                imageSwitcher.setImageResource(imageList[currentIndex]);
            }
        });
    }
}

Here is the final output of our application.

Output: