Post
Ask Question

How to Scale and Rotate Image in Android

Introduction

 
This article explains how to scale and rotate images in Android.
 
In this application when you click on the button the image will both rotate and scale. So use an Image View and a button in the XML file. So you need to perform both rotations and scaling on a button click. First, create a folder inside the res folder and put the following in it:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true"  
  4.     android:interpolator="@android:anim/linear_interpolator" >  
  5.    
  6.     <scale  
  7.         xmlns:android="http://schemas.android.com/apk/res/android"  
  8.         android:duration="4000"  
  9.         android:fromXScale="1"  
  10.         android:fromYScale="1"  
  11.         android:pivotX="50%"  
  12.         android:pivotY="50%"  
  13.         android:toXScale="4"  
  14.         android:toYScale="4" >  
  15.     </scale>  
  16.    
  17.     <rotate  
  18.         android:duration="500"  
  19.         android:fromDegrees="0"  
  20.         android:toDegrees="360"  
  21.         android:pivotX="50%"  
  22.         android:pivotY="50%"  
  23.         android:repeatCount="10"  
  24.    
  25.         />  
  26.    
  27. </set> 
  • <Set>
    It is a container to hold the animation element (<sclae>, <rotate> and so on).
  • <scale> 
    Represents the scale of an animation object. 
  • android:duration
    It is an attribute to do the animation for a specified time.
  • android:fromXScale
    The starting X size offset where 1.0 is no change.
  • android:fromYScale
    The starting Y size offset where 1.0 is no change.
  • android:pivotX
    The x coordinate remains fixed when the object is scaled.
  • android:pivotY
    The Y coordinate remains fixed when the object is scaled,
  • <rotate>
    It represents the rotation of an animation.
  • android:formDegrees
    From which degrees you want to rotate your object.
  • androdi:toDegrees
    To which degrees you want to rotate your object.
In your Java file, you need to load this XML file by ing the path of this file. First, you will create an Animation reference variable and this animation object will hold the animation object that is returned by the loadAniamtion() method. Then you will call the setAnimationListener() method to set the animation. Because you need to perform all the operations on the button click so set the button on its clickListener and start the animation of the image. 
  1. Togetheraniamtion = AnimationUtils.loadAnimation(getApplicationContext(),  
  2.                            R.anim.together);  
  3.               // set animation listener  
  4.         Togetheraniamtion.setAnimationListener(this);  
  5.               // button click event  
  6.               rotatescale.setOnClickListener(new View.OnClickListener() {  
  7.                      @Override  
  8.                      public void onClick(View v) {  
  9.                            // start the animation  
  10.                            imageview.startAnimation(Togetheraniamtion);  
  11.                      }  
  12.          });   
  13.        } 
Step 1
 
Create an XML file and write this
 
Use an Image View and button in an XML file to do both rotation and scaling on button click.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">  
  5.      
  6.     <ImageView android:id="@+id/imageview"  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content"  
  9.         android:src="@drawable/ic_launcher"  
  10.         android:layout_centerInParent="true"/>  
  11.      
  12.     <Button android:id="@+id/btnStart"  
  13.         android:layout_width="150dp"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="RotateScale"  
  16.         android:layout_alignParentBottom="true"  
  17.         android:layout_centerHorizontal="true"  
  18.         android:layout_marginBottom="20dp"/>  
  19. </RelativeLayout> 
Step 2
 
In the together.xml file inside the animk folder, you will write the following.
 
Create a folder inside the res folder and write this:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true"  
  4.     android:interpolator="@android:anim/linear_interpolator" >  
  5.    
  6.     <scale  
  7.         xmlns:android="http://schemas.android.com/apk/res/android"  
  8.         android:duration="4000"  
  9.         android:fromXScale="1"  
  10.         android:fromYScale="1"  
  11.         android:pivotX="50%"  
  12.         android:pivotY="50%"  
  13.         android:toXScale="4"  
  14.         android:toYScale="4" >  
  15.     </scale>  
  16.    
  17.     <rotate  
  18.         android:duration="500"  
  19.         android:fromDegrees="0"  
  20.         android:toDegrees="360"  
  21.         android:pivotX="50%"  
  22.         android:pivotY="50%"  
  23.         android:repeatCount="infinite"  
  24.    
  25.         />  
  26.    
  27. </set> 
Step 3
 
Create a Java file and write the following.
 
In your Java file, you need to load this XML file by ing the path of this file. First, you will create an Animation reference variable and this animation object will hold the animation object returned by the loadAniamtion() method. Then call the setAnimationListener() method to set the animation, because you need to perform all operations on a button click so set the button on its clickListener and start the animation on the image. 
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.view.animation.Animation;  
  5. import android.view.animation.AnimationUtils;  
  6. import android.view.animation.Animation.AnimationListener;  
  7. import android.widget.Button;  
  8. import android.widget.ImageView;  
  9. public class TogetherActivity extends Activity implements AnimationListener {  
  10.    
  11.        ImageView imageview;  
  12.        Button rotatescale;  
  13.    
  14.        // Animation  
  15.        Animation Togetheraniamtion;  
  16.    
  17.        @Override  
  18.        protected void onCreate(Bundle savedInstanceState) {  
  19.               // TODO Auto-generated method stub  
  20.               super.onCreate(savedInstanceState);  
  21.               setContentView(R.layout.activity_together);  
  22.    
  23.               imageview = (ImageView) findViewById(R.id.imgLogo);  
  24.               rotatescale = (Button) findViewById(R.id.btnStart);  
  25.    
  26.               // load the animation  
  27.         Togetheraniamtion = AnimationUtils.loadAnimation(getApplicationContext(),  
  28.                            R.anim.together);  
  29.    
  30.               // set animation listener  
  31.         Togetheraniamtion.setAnimationListener(this);  
  32.    
  33.               // button click event  
  34.               rotatescale.setOnClickListener(new View.OnClickListener() {  
  35.                      @Override  
  36.                      public void onClick(View v) {  
  37.                            // start the animation  
  38.                            imageview.startAnimation(Togetheraniamtion);  
  39.                      }  
  40.               });  
  41.    
  42.        }  
  43.    
  44.        @Override  
  45.        public void onAnimationEnd(Animation animation) {  
  46.               // Take any action after completing the animation  
  47.    
  48.               // check for zoom in animation  
  49.               if (animation ==Togetheraniamtion) {  
  50.               }  
  51.    
  52.        }  
  53.    
  54.        @Override  
  55.        public void onAnimationRepeat(Animation animation) {  
  56.               // TODO Auto-generated method stub  
  57.    
  58.        }  
  59.    
  60.        @Override  
  61.        public void onAnimationStart(Animation animation) {  
  62.               // TODO Auto-generated method stub  
  63.    
  64.        } 
Step 4
 
Output
 
1.jpg
 
Step 5
 
image.jpg
 
Step 6
 
iamge2.jpg
 
It will rotate continuously unless you do not change the android:repeatcount to infinite.


Similar Articles