Android ImageSwitcher with Examples

In android, ImageSwitcher is a specialized view switcher that 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 a 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 the above methods, the ImageSwitcher class is having different methods available, those are

 

MethodDescription
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 a smooth animation transition effect using imageswitcher in the 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 the above program in the android studio we will get the result as shown below.

 

Android ImageSwitcher with Examples

 

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

 

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