ImageSwitcher

The ImageSwitcher and TextSwitcher provide us a simple way to add animated transitions. These classes are used for a smooth transition animation in android view.

Sometimes you don't want an image to appear abruptly on the screen, rather you want to apply some kind of animation to the image when it transitions from one image to another. This is supported by android in the form of ImageSwitcher.

Some usages of these are:

  • Navigating through a list of dates with Left and Right buttons
  • Changing numbers in a date picker
  • Countdown timer clock
  • Smooth transition for a news headlines slider

An ImageSwitcher allows you to add some transitions on the images through the way they appear on screen. In order to use ImageSwitcher, you need to define its XML component first. Its syntax is given below

<ImageSwitcher
    android:id="@+id/imgSwitcher1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"/>

Let's understand ImageSwithcer by ImageSwitcherActivity.java below

ImageSwiterActivity.java
package com.theitbulls.uicomponentex;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.ImageSwitcher;
import android.widget.ViewSwitcher;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatImageView;

public class ImageSwiterActivity extends AppCompatActivity {
    // TODO please change these images accroding to your application
    private static final int[] imgResIds = new int[]{R.drawable.img1, R.drawable.img2, R.drawable.img3};

    private ImageSwitcher imgSwitcher;

    private int currImage = 0;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.image_switer_activity);
        imgSwitcher = findViewById(R.id.imgSwitcher1);

        imgSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                AppCompatImageView imgView = new AppCompatImageView(ImageSwiterActivity.this);
                imgView.setScaleType(AppCompatImageView.ScaleType.CENTER_INSIDE);
                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                imgView.setLayoutParams(params);
                return imgView;
            }
        });

        imgSwitcher.setImageResource(imgResIds[currImage]);

        Animation animationOut = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        Animation animationIn = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);

        imgSwitcher.setOutAnimation(animationOut);
        imgSwitcher.setInAnimation(animationIn);
    }

    public void previous(View view) {
        if (currImage < 0) {
            currImage = 2;
        }

        imgSwitcher.setImageResource(imgResIds[currImage]);
        currImage--;
    }

    public void next(View view) {
        if (currImage > 2) {
            currImage = 0;
        }

        imgSwitcher.setImageResource(imgResIds[currImage]);
        currImage++;
    }
}


image_switcher_activity.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:orientation="vertical">

    <ImageSwitcher
        android:id="@+id/imgSwitcher1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgSwitcher1"
        android:layout_centerHorizontal="true">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnPrevious"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:onClick="previous"
            android:text="<<Previous" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:onClick="next"
            android:text="Next>>" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>