ZOFTINO.COM android and web dev tutorials

Android ImageSwitcher Tutorial

Android ImageSwitcher is a subclass of ViewSwitcher and can contain only two ImageViews. Android ImageSwitcher can be used to switch between two images. Image switch occurs every time you set a new image on ImageSwitcher. You can add animations to ImageSwitcher to animate the image flip transition.

In this post, you can learn how to use ImageSwitcher with an example, ImageSwitcher custom animations, and how to automate switching images of ImageSwitcher automatically.

Android ImageSwitcher Example

To provide image switch function in your app, first you need to define ImageSwitcher element in your activity layout. Then add two child ImageView elements to ImageSwitcher. You can set ImageSwitcher default image by adding image to one of the image views either in xml or in onCreate method of activity by calling one of the setImage methods.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageSwitcher
        android:id="@+id/image_switcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/android_img_one"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>
    </ImageSwitcher>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_margin="16dp"
        android:text="Show Next Image With Animation"
        android:onClick="showNextImage"
        app:layout_constraintTop_toBottomOf="@+id/image_switcher"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout> 

Then get the ImageSwitcher object in your activity, add animations to be shown while switching images by calling setOutAnimation and setInAnimation methods on ImageSwitcher object programmatically or by setting android:outAnimation and android:inAnimation attributes in xml.

In this example, I used android.R.anim.slide_in_left and android.R.anim.slide_out_right animations.

In this example, I used button onclick event for triggering image switch. To trigger image switch, you simply need to call one of set image methods such as setImageResource, setImageDrawable, and setImageURI and set new image.

 import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;

public class ImageSwitcherActivity extends AppCompatActivity {
    private ImageSwitcher imageSwitcher;
    private int count =0;

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

        imageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);

        Animation imgAnimationIn =  AnimationUtils.
                loadAnimation(this,   android.R.anim.slide_in_left);
        imgAnimationIn.setDuration(2700);
        imageSwitcher.setInAnimation(imgAnimationIn);

        Animation imgAnimationOut =  AnimationUtils.
                loadAnimation(this,   android.R.anim.slide_out_right);
        imgAnimationOut.setDuration(2700);
        imageSwitcher.setOutAnimation(imgAnimationOut);
    }

    public void showNextImage(View view){
        count++;
        if(count%2 == 0){
            imageSwitcher.setImageResource(R.drawable.android_img_one);
        }else{
            imageSwitcher.setImageResource(R.drawable.android_img_two);
        }
    }
} 

Below is the output of image switcher example.

android imageswitcher example

Android ImageSwitcher Custom Animation

You can define your own animations for ImageSwitcher using combination of different Interpolators and alpha, scale, translate and rotate transitions.

Below is an example of ImageSwitcher custom animations using overshoot interpolator and scale and alpha transitions.

Custom overshoot interpolator

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2.5" />

ImageSwitcher custom in-animation

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <scale     android:interpolator="@anim/overshoot"
        android:fromXScale="0.0" android:toXScale="1.0"
        android:fromYScale="0.0" android:toYScale="1.0"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="900" />
    <alpha     android:interpolator="@anim/overshoot"
        android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="900" />
</set> 

ImageSwitcher custom out-animation

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <scale     android:interpolator="@anim/overshoot"
        android:fromXScale="1.0" android:toXScale="0.0"
        android:fromYScale="1.0" android:toYScale="0.0"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="900" />
    <alpha     android:interpolator="@anim/overshoot"
        android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="900" />
</set> 

Android ImageSwitcher Auto Switch Using Handler

You can automate image switching using Handler and creating runnable which just sets image on ImageSwitcher. We can use handler postDelayed method to periodically run the runnable. It runs on main thread, so don’t do time consuming tasks in the runnable. You can stop auto switching by simply calling removeCallbacks method on the handler.

 public class ImageSwitcherActivity extends AppCompatActivity {
    private ImageSwitcher imageSwitcher;
    private boolean firstImage;

    private Handler imageSwitchHandler;

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

        firstImage = true;
        imageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);

        Animation imgAnimationIn =  AnimationUtils.
                loadAnimation(this,   R.anim.shrink);
        imageSwitcher.setInAnimation(imgAnimationIn);

        Animation imgAnimationOut =  AnimationUtils.
                loadAnimation(this,   R.anim.grow);
        imageSwitcher.setOutAnimation(imgAnimationOut);

        imageSwitchHandler = new Handler();
        imageSwitchHandler.post(runnableCode);
    }
    private Runnable runnableCode = new Runnable() {
        @Override
        public void run() {

            if(firstImage){
                imageSwitcher.setImageResource(R.drawable.android_img_one);
                firstImage = false;
            }else{
                imageSwitcher.setImageResource(R.drawable.android_img_two);
                firstImage = true;
            }

            imageSwitchHandler.postDelayed(this, 3000);
        }
    };
    @Override
    protected void onStop() {
        imageSwitchHandler.removeCallbacks(runnableCode);
        super.onStop();
    }
}