Monday, June 24, 2013

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



ImageSwitcher



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


ImageSwitcher



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]);
                            }
                        });
                       
            }
           
}

   


12 comments:

  1. This example is incomplete where is slide_in_left & slide_out_right file ?

    ReplyDelete
    Replies
    1. Hi Ajay
      The example is complete, slide_in_left and slide_in_right are not used here, but if you still want those files, kindly go to http://learnandroideasily.blogspot.in/2013/06/android-viewflipper-example.html

      Delete
  2. hi.can u help me how to create a animated live wallpaper by using .obl files and .fbx files

    ReplyDelete
  3. Haii bro, could you fill coding make a previous button ?
    thankz

    ReplyDelete
  4. really its a nice blog for all android learners provide more for us thanx--krish

    ReplyDelete
  5. really nice tutorial. will these work with gesture ?
    i mean on the basis of gesture it will change image ?

    ReplyDelete
  6. What import should I use for LayoutParams there are a lot of choices
    I tried a few but it didn't seem to be working

    ReplyDelete
    Replies
    1. ViewGroup.LayoutParams

      Delete
  7. Nice Example.

    You can also follow my blogs.

    http://emergingandroidtech.blogspot.in

    Thank you.

    ReplyDelete
  8. is it possible to swipe and show images vertically. if yes, can you please help me with it. it would be great if you could have 3 images in each swipe in our screen instead of one.

    ReplyDelete