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 rotation and scaling on a button click. First create a folder inside the res folder and put the following in it:
 

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true"

    android:interpolator="@android:anim/linear_interpolator" >

 

    <scale

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:duration="4000"

        android:fromXScale="1"

        android:fromYScale="1"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="4"

        android:toYScale="4" >

    </scale>

 

    <rotate

        android:duration="500"

        android:fromDegrees="0"

        android:toDegrees="360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatCount="10"

 

        />

 

</set>

<Set> 

It is a container to hold the animation element (<sclae>, <rotate> and so on).

<scale>

Represents the scale of an animation object.

adroid: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. 
  
Togetheraniamtion = AnimationUtils.loadAnimation(getApplicationContext(),

                           R.anim.together);

              // set animation listener

        Togetheraniamtion.setAnimationListener(this);

              // button click event

              rotatescale.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View v) {

                           // start the animation

                           imageview.startAnimation(Togetheraniamtion);

                     }
         }); 

       }

Step 1

Craeet an XML file and write this

Use an Image View and button in a XML file to do both rotation and scaling on button click.


<?
xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

   

    <ImageView android:id="@+id/imageview"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"

        android:layout_centerInParent="true"/>

   

    <Button android:id="@+id/btnStart"

        android:layout_width="150dp"

        android:layout_height="wrap_content"

        android:text="RotateScale"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="20dp"/>

</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:

<?xml version="1.0" encoding="utf-8"?>
<
set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true"

    android:interpolator="@android:anim/linear_interpolator" >

 

    <scale

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:duration="4000"

        android:fromXScale="1"

        android:fromYScale="1"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="4"

        android:toYScale="4" >

    </scale>

 

    <rotate

        android:duration="500"

        android:fromDegrees="0"

        android:toDegrees="360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatCount="infinite"

 

        />

 

</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. 
  
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.ImageView;

public class TogetherActivity extends Activity implements AnimationListener {

 

       ImageView imageview;

       Button rotatescale;

 

       // Animation

       Animation Togetheraniamtion;

 

       @Override

       protected void onCreate(Bundle savedInstanceState) {

              // TODO Auto-generated method stub

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_together);

 

              imageview = (ImageView) findViewById(R.id.imgLogo);

              rotatescale = (Button) findViewById(R.id.btnStart);

 

              // load the animation

        Togetheraniamtion = AnimationUtils.loadAnimation(getApplicationContext(),

                           R.anim.together);

 

              // set animation listener

        Togetheraniamtion.setAnimationListener(this);

 

              // button click event

              rotatescale.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View v) {

                           // start the animation

                           imageview.startAnimation(Togetheraniamtion);

                     }

              });

 

       }

 

       @Override

       public void onAnimationEnd(Animation animation) {

              // Take any action after completing the animation

 

              // check for zoom in animation

              if (animation ==Togetheraniamtion) {

              }

 

       }

 

       @Override

       public void onAnimationRepeat(Animation animation) {

              // TODO Auto-generated method stub

 

       }

 

       @Override

       public void onAnimationStart(Animation animation) {

              // TODO Auto-generated method stub

 

       }

 

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.

Up Next
    Ebook Download
    View all
    Learn
    View all