Animate An Image In Android

In android we can animate an ImageView with different multiple ways.  One of the way is to use ImageSwitcher for animation between Images.
You can learn  Animating Image Using ImageSwitcher.

 ImageSwitcher is helpful when we have multiple images and we need to switch between Images, but if we have to rotate an Image, we have to use  RotateAnimation class.

Steps:

1. Create the RotateAnimation object
2. Set the Animation Properties.
3. Start The Animation.

ImageView Animation Example

In this post I have an Image of Ball and rotating it through Top Left corner.

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_marginTop="80dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:gravity="center"
            android:textColor="#000099"
            android:textSize="30dp"
            android:text="ImageView Animation Demo" />

        <ImageView
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="120dp"
            android:id="@+id/imageView1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/ball" />
   
</LinearLayout>

MainActivity .java

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        ImageView image=(ImageView)findViewById(R.id.imageView1);
       
        // Step1 : create the  RotateAnimation object
        RotateAnimation anim = new RotateAnimation(0f, 350f, 15f, 15f);
        // Step 2:  Set the Animation properties
        anim.setInterpolator(new LinearInterpolator());
        anim.setRepeatCount(Animation.INFINITE);
        anim.setDuration(700);

        // Step 3: Start animating the image
         image.startAnimation(anim);

        // Later. if you want to  stop the animation
        // image.setAnimation(null);
    }
}

ImageView Animation in Android

In android we can animate an ImageView with different multiple ways.  One of the way is to use ImageSwitcher for animation between Images.
You can learn  Animating Image Using ImageSwitcher.

 ImageSwitcher is helpful when we have multiple images and we need to switch between Images, but if we have to rotate an Image, we have to use  RotateAnimation class.

Steps:

1. Create the RotateAnimation object
2. Set the Animation Properties.
3. Start The Animation.

ImageView Animation Example

In this post I have an Image of Ball and rotating it through Top Left corner.

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_marginTop="80dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:gravity="center"
            android:textColor="#000099"
            android:textSize="30dp"
            android:text="ImageView Animation Demo" />

        <ImageView
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="120dp"
            android:id="@+id/imageView1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/ball" />
   
</LinearLayout>

MainActivity .java

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        ImageView image=(ImageView)findViewById(R.id.imageView1);
       
        // Step1 : create the  RotateAnimation object
        RotateAnimation anim = new RotateAnimation(0f, 350f, 15f, 15f);
        // Step 2:  Set the Animation properties
        anim.setInterpolator(new LinearInterpolator());
        anim.setRepeatCount(Animation.INFINITE);
        anim.setDuration(700);

        // Step 3: Start animating the image
         image.startAnimation(anim);

        // Later. if you want to  stop the animation
        // image.setAnimation(null);
    }
}

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

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

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

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