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.
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.
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.
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:factor="2.5" /> <?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> <?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> 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();
}
}