Thursday, June 20, 2013

Using ImageSwitcher In Android

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 This Post I have given two Examples with Source Code

In Example 1, 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.


In Example 2, I have a ImageSwitcher ,and two Buttons "START"  and "STOP" , when User clicks on START, ImageSwitcher  automatically start  switching between Images and continue switching between Images, and when User clicks on STOP ImageSwitcher  will stop switching the Images, I have implemented it using Threads.


ImageSwitcher Example 1:


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>



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

     


ImageSwitcher Example 2:


In this Example I have following layout


ImageSwitcher


In the above layout, We  have an ImageSwitcher ,and two Buttons "START"  and "STOP" , when User clicks on START, ImageSwitcher  automatically start  switching between Images and continue switching between Images, and when User clicks on STOP ImageSwitcher  will stop switching the Images
.

example2_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" />
     
      <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="150dp"
            android:orientation="horizontal">
  
              <Button
                    android:id="@+id/buttonStart"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Start />
     
              <Button
                    android:id="@+id/buttonStop"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Stop"/>
          </LinearLayout>

</LinearLayout>



ImageSwitcherExample1Activity.java


public class ImageSwitcherExample1Activity extends Activity
{

            private ImageSwitcher imageSwitcher;
            Button btnStart,btnStop;
   
   
            // 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;
            int currentIndex=-1; // to keep current Index
            // Declare in and out Animation
            Animation in,out;
            Context mContext;
           
            private Handler mHandler = new Handler();
       
             // Create a Runnable Instance
            Runnable r=new Runnable() {
                // Override the run Method
                public void run() {
                    // TODO Auto-generated method stub
                    try
                    {
                        // Update the TextSwitcher text
                        updateImageSwitcherImage();
                       
                    }
                    finally
                    {
                        mHandler.postDelayed(this, 1000);
                    }
                }
            };
           
          

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

                       
setContentView(R.layout.example2_layout);               
                        mContext=this;
                       
                        // get The references
                        btnStart=(Button)findViewById(R.id.buttonStart);
                        btnStop=(Button)findViewById(R.id.buttonStop); 

                        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
                                 ImageView imageView = new ImageView(getApplicationContext());
                                    imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                                    imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
                                    return imageView;
                            }
                        });

                       
                        in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
                        out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);


                        // set the animation type to imageSwitcher
                        imageSwitcher.setInAnimation(in);
                        imageSwitcher.setOutAnimation(out);

                        mHandler.postDelayed(r, 1000);
                       
                       
                      
                        // ClickListener for Start button
                        // When clicked on Button ImageSwitcher will Start switch between Images
                        // The current Image will go OUT and next Image  will come in with specified animation

                        btnStart.setOnClickListener(new View.OnClickListener() {
                   
                            public void onClick(View v) {
                               
                                // Start The ImageSwitcher Animation  
                                mHandler.postDelayed(r,1000);   
                            }
                        });
               
                        // Button Stop Click Listener
                        // When clicked on This  Button, ImageSwitcher will Stop switching between Images

                       
                        btnStop.setOnClickListener(new View.OnClickListener() {
                   
                            public void onClick(View v) {
                                  
                                    // Stop the Image Switcher Animation
                                    mHandler.removeCallbacks(r);
                            }
                        });
               
                      
              
                 }
           
            // method to Update the ImageSwitcher Image
            private void updateImageSwitcherImage()
            {
                        currentIndex++;
                        if(currentIndex==messageCount)
                            currentIndex=0;
                        imageSwitcher.setImageResource(imageIds[currentIndex]);
            }
}

   


ImageSwitcher













1 comment: