Android ImageSwitcher with Examples

In android, ImageSwitcher is a specialized view switcher which will provide a smooth transition animation effect to the images while switching from one image to another.

To use ImageSwitcher in our application, we need to define an XML component .xml like as shown below.

<ImageSwitcher android:id="@+id/imgSw"
    android:layout_width="match_parent"
    android:layout_height="250dp">
</ImageSwitcher>

After that we need to create an instance of ImageSwitcher and use setFactory() method to implement the ViewFactory interface to return the ImageView. We need to add the required animation effects to ImageSwitcher based on our requirements.

Following is the syntax of using ImageSwitcher to add smooth transition animation effect to images while switching from one image to another.

ImageSwitcher imgsw = (ImageSwitcher) findViewById(R.id.imgSw);imgsw.setFactory(new ViewSwitcher.ViewFactory() {
    @Override
    public View makeView() {
        ImageView imgVw= new ImageView(MainActivity.this);
        imgVw.setImageResource(images[position]);
        return imgVw;
    }
});imgsw.setInAnimation(this, android.R.anim.slide_in_left);imgsw.setOutAnimation(this, android.R.anim.slide_out_right);

If you observe above code snippet, we created an instance of ImageSwitcher, used setFactory() method to implement ViewFactory interface and added required animation effects.

Apart from above methods, the ImageSwitcher class is having different methods available, those are

Method	Description
setImageDrawable	This method is used to set a new drawable on the next ImageView in the switcher.
setImageResource	This method is used to set a new image on the ImageSwitcher with the given resource id.
setImageURI	This method is used to set a new image on the ImageSwitcher with the given Uri.

Now we will see how to use ImageSwitcher to add smooth transition animation effects while switching between the images in android application with examples.

Android ImageSwitcher Example

Following is the example of switching between the images with smooth animation transition effect using imageswitcher in android application.

Create a new android application using android studio and give names as ImageSwitcherExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Now open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">
    <ImageSwitcher android:id="@+id/imgSw"
        android:layout_width="match_parent"
        android:layout_height="250dp"/>
    <Button
        android:id="@+id/btnPrevious"
        android:layout_below="@+id/imgSw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Previous" android:layout_marginLeft="100dp" />
    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/btnPrevious"
        android:layout_toRightOf="@+id/btnPrevious"
        android:text="Next" />
</RelativeLayout>

Now open your main activity file MainActivity.java from \java\com.tutlane.imageswitcherexample path and write the code like as shown below

MainActivity.java

package com.tutlane.imageswitcherexample;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.ImageSwitcher;import android.widget.ImageView;import android.widget.ViewSwitcher;
public class MainActivity extends AppCompatActivity {
    private Button previousbtn, nextbtn;
    private ImageSwitcher imgsw;
    private int[] images = {R.drawable.bangkok,R.drawable.bangkok2};
    private int position = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        previousbtn = (Button)findViewById(R.id.btnPrevious);
        nextbtn = (Button)findViewById(R.id.btnNext);
        imgsw = (ImageSwitcher) findViewById(R.id.imgSw);
        imgsw.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imgVw= new ImageView(MainActivity.this);
                imgVw.setImageResource(images[position]);
                return imgVw;
            }
        });
        imgsw.setInAnimation(this, android.R.anim.slide_in_left);
        imgsw.setOutAnimation(this, android.R.anim.slide_out_right);
        previousbtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(position>0)
                position--;
                else if(position<0)
                    position = 0;
                imgsw.setImageResource(images[position]);
            }
        });
        nextbtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(position<images.length)
                    position++;
                if(position>=images.length)
                    position = images.length-1;
                imgsw.setImageResource(images[position]);
            }
        });
    }
}

If you observe above code, we used a set of images (bangkok, bangkok2) from drawable folder, you need to add your images in drawable folder and by using imageswitcher setFactory() and setImageResource() methods we are switching the images with slide in / slide out animation effect.

Output of Android ImageSwitcher Example

When we run above program in android studio we will get the result like as shown below.

If you observe above result, when we are click on Next button the next image will be shown with smooth transition animation effect, same way when we click on Previous button the previous image will be shown with smooth transition effect.

This is how we can use imageswitcher in our android applications to transition between the images based on our requirements.