Android ImageSwitcher Example

The Android Development Tutorials blog contains Basic as well as Advanced android tutorials.Go to Android Development Tutorials to get list of all Android Tutorials.

ImageSwitcher

A ImageSwitcheris a specialized ViewSwitcher that contains only children of type ImageView. A ImageSwitcher is useful to animate an Image on screen.
        ImageSwitcher switches smoothly between two images and thus provides a way of transitioning from one Image to another through appropriate animations.

In the below snapshot we can see an Image is coming IN and other Image is going OUT

Two types animations are required for  for ImageSwitcher to switch between the texts.
1: In Animation: with which  Image come in the Screen.
2: Out Animation: with which Image goes out from the Screen.

We can  provide following Animations

For In Animation
     R.anim.slide_in_left
     R.anim.fade_in

For Out Animation
     R.anim.slide_out_right
     R.anim.fade_out  


In Example, I have an ImageSwitcher and a button called "NEXT" , when user clicks on NEXT button   ImageSwitcher will switch between Images . The current Image will go OUT and next Image will come in with specified Animation.

ImageSwitcher Example:

In this Example I have following layout

In the above layout, we  have an ImageSwitcher and a button called "NEXT" , when user clicks on NEXT button   ImageSwitcher will switch between Images . The current Image will go OUT and next Image will come in with specified Animation.

example1_layout.xml

<LinearLayout 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/imageSwitcher"
            android:layout_marginTop="50dp"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal" />
  
 
      <Button
            android:id="@+id/buttonNext"
            android:layout_marginTop="150dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="NEXT"
           />
    
</LinearLayout>

ImageSwitcherExampleActivity.java

   

public class ImageSwitcherExample1Activity extends Activity
{

            private ImageSwitcher imageSwitcher;
            Button btnNext;
           
           
            // Array of Image IDs to Show In ImageSwitcher
            int imageIds[]={R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,R.drawable.image6,};
            int messageCount=imageIds.length;
            // to keep current Index of ImageID array
            int currentIndex=-1;

           

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

                        setContentView(R.layout.example_layout);
                       
                        // get The references
                        btnNext=(Button)findViewById(R.id.buttonNext);
                        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
                       
                        // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked
                        imageSwitcher.setFactory(new ViewFactory() {
                           
                            public View makeView() {
                                // TODO Auto-generated method stub
                               
                                    // Create a new ImageView set it's properties
                                    ImageView imageView = new ImageView(getApplicationContext());
                                    imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                                    imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
                                    return imageView;
                            }
                        });

                        // Declare the animations and initialize them
                        Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
                        Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
                       
                        // set the animation type to imageSwitcher
                        imageSwitcher.setInAnimation(in);
                        imageSwitcher.setOutAnimation(out);
                   

                        // ClickListener for NEXT button
                        // When clicked on Button ImageSwitcher will switch between Images
                        // The current Image will go OUT and next Image  will come in with specified animation
                        btnNext.setOnClickListener(new View.OnClickListener() {
                           
                            public void onClick(View v) {
                                // TODO Auto-generated method stub
                                 currentIndex++;
                                   // If index reaches maximum reset it
                                    if(currentIndex==messageCount)
                                        currentIndex=0;
                                    imageSwitcher.setImageResource(imageIds[currentIndex]);
                            }
                        });
                       
            }
           
}