Image Switcher In Android

How to use ImageSwitcher in Android

In Android there will be some situations where we need to change to image in an image view with some animations and all this must be managed correctly and efficiently, otherwise some issues will happen. Here comes Android's ImageSwitcher. ImageSwitcher will switch between images easily. Image switcher will also allow you to add some animations in the way they appear. Here I am going to tell you the basic usage of image switcher with a button. On clicking on the button the image switcher will change its image 

 

Please see the main activity xml file for the usage,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
    <ImageSwitcher
android:id="@+id/imageSwitch"
android:layout_width="300dp"
android:layout_centerHorizontal="true"
android:layout_height="300dp" />
    <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch"
android:id="@+id/switchButton"
android:layout_margin="20dp"
android:layout_below="@+id/imageSwitch"
android:layout_centerHorizontal="true" />

</RelativeLayout>

Now bind the controls to the java file on the onCreate(),

imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitch);
Button button = (Button) findViewById(R.id.switchButton);

Next we need to implement the ViewFactory interface and override the makeView() to set the layout and image switcher properties each time while switching like the following.

imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
        ImageView myView = new ImageView(getApplicationContext());
        myView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        myView.setLayoutParams(new ImageSwitcher.LayoutParams(300,300));
return myView;
    }
});

Each time we are change the image in the ImageSwitcher this method will be called. Now go to the button and click and change the image according to some conditions. For that I declared a boolean variable, which will store the status of the image switched or not. See the button click listner below.

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(isImageSwitched){
imageSwitcher.setImageResource(R.drawable.android);
isImageSwitched = false;
        }else{
imageSwitcher.setImageResource(R.drawable.android_one);
isImageSwitched = true;
        }
    }
});

On the button click it will check the boolean variable and change the image according to the boolean value. But the switching of the image will be very smooth, that is the main property of the Image Switcher. For that I have added two images in the drawable folder. We need to call only the setImageResource each time to change the image in the Image Switcher. I did not set any images in the initial loading

 

Please see the screen shots also...