Related Tutorial: Android Animation in Flappy Bird Game

Android View Animation is the basic animation in android system. It lets us perform tween animation on View objects easily. A view animation can perform a series of simple transformations sequentially or simultaneously, all depending on how you set the animation start time. Android view animation can make animation on any View objects, such as ImageView, TextView, or Button objects. View animation can only animate simple properties like position, size, rotation, and transparency.

Android View Animation can be defined by either XML or Android Java code. According to Google suggestion, XML is recommended way because of its readable, reusable and swappable. In this view animation example, I am going to show you how to define the animation in both XML and code.

Android Image View Rotate Animation Around a Point Example

The following example will show you how to make a rotation animation by Android View Animation. I will put a button on the top screen and image in the middle of the screen. When we click the button, the image will start to do rotate animation around its center point. Here is the snapshot of the example application.

This is the source code for the layout main.xml:

<?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">
    <Button android:id="@+id/testButton" android:text="@string/animationText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView android:id="@+id/testImage" android:src="@drawable/cat2"
        android:contentDescription="@string/image_desc"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="fitCenter"/>
</RelativeLayout>

To implement the rotation animation, we can define the animation by XML or Java code. If we want to write the animation in the xml, we need to create an animation xml file under /res/anim folder. Here, we create a xml file named rotate_around_center_point.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="0"
    android:valueTo="360"
    android:valueType="floatType"
    android:propertyName="rotation"
    android:repeatCount="0"/>

Using follow code to apply the animation to View

ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animator animation = AnimatorInflater.loadAnimator(this, R.anim.rotate_around_center_point);
animation.setTarget(animationTarget);
animation.start();

We can also create rotation animation dynamically in Java code.

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(animationTarget, "rotation", 360f);
scaleXAnimator.setRepeatCount(0);
scaleXAnimator.setDuration(1000);
scaleXAnimator.start();

Download and Install .apk on Your Android

Android Image View Zoom/Scale Animation Example

Android View Animation can not only let us do rotation animation, but we can also do scale animations in both xml way and coding way. We will using the same layout which we are using in previous animation example. So I will only show you the animation xml file.

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="1"
    android:valueTo="0.5"
    android:valueType="floatType"
    android:propertyName="scaleX"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

We can use the same code to apply the animation on the view.

ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animator animation = AnimatorInflater.loadAnimator(this, R.anim.scale_animation);
animation.setTarget(animationTarget);
animation.start();

Or we can also implement the animation by Java code dynamically.

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(animationTarget, "scaleX", 0.5f);
scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleXAnimator.setRepeatCount(1);
scaleXAnimator.setDuration(1000);
scaleXAnimator.start();

Download and Install .apk on Your Android

Android Image View Zoom In And Zoom Out Animation Example

Just now, I show you how to apply one simple animation on image view. Now let’s talk about how to apply a group of animations on an image view. In this example, I will use AnimatorSet object, which can group a set of animations and play all these animation simultaneously in android. Here is an Android animation in xml example.

<set>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueFrom="1"
        android:valueTo="0.5"
        android:valueType="floatType"
        android:propertyName="scaleX"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueFrom="1"
        android:valueTo="0.5"
        android:valueType="floatType"
        android:propertyName="scaleY"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

In this example, I define two animators in the xml. One animator will scale the image in x and the other one will scale it in y concurrently. So this set of animations will zoom in and zoom out the image in 1 second. Here is how to apply and start the animations on the image view in Android.

ImageView zoomTarget = (ImageView) findViewById(R.id.testImage);
Animator zoomAnimation = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.anim.zoom_in_out_animation);
zoomAnimation.setTarget(zoomTarget);
zoomAnimation.start();

Additionally, I will also provide an example about how to create a set of animations in Android by Java code. So you can dynamically create and apply animations to image view in Android.

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX", 0.5f);
scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleXAnimator.setRepeatCount(1);
scaleXAnimator.setDuration(1000);

ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY", 0.5f);
scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleYAnimator.setRepeatCount(1);
scaleYAnimator.setDuration(1000);

AnimatorSet set = new AnimatorSet();
set.playTogether(scaleXAnimator, scaleYAnimator);
set.start();

Download and Install Zoom in and Zoom out Example .apk File

Or you can scan following QR code to download this example on your Android device.

Android Zoom And Rotation Animation Example

We know how to zoom or rotation image in Android so far. Next, I will give an example to show you how to zoom and rotation one image in android at the same time. Here is the zoom and rotation animation set xml example:

<?xml version="1.0" encoding="utf-8"?>
<set>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueFrom="1"
        android:valueTo="0.5"
        android:valueType="floatType"
        android:propertyName="scaleX"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueFrom="1"
        android:valueTo="0.5"
        android:valueType="floatType"
        android:propertyName="scaleY"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueFrom="0"
        android:valueTo="360"
        android:valueType="floatType"
        android:propertyName="rotation"
        android:repeatCount="1"
        android:repeatMode="restart"/>
</set>

We can use the same Java code to apply and start the animation on one View, such as ImageView.

ImageView zoomTarget = (ImageView) findViewById(R.id.testImage);
Animator zoomAnimation = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.anim.zoom_rotation_animation);
zoomAnimation.setTarget(zoomTarget);
zoomAnimation.start();

If we want to implement this set of animations dynamically in Java code, it should be a piece of cake. Here is the example source code:

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX", 0.5f);
scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleXAnimator.setRepeatCount(1);
scaleXAnimator.setDuration(1000);

ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY", 0.5f);
scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleYAnimator.setRepeatCount(1);
scaleYAnimator.setDuration(1000);

ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(zoomTarget, "rotation", 0f, 360f);
rotationAnimator.setRepeatMode(ValueAnimator.RESTART);
rotationAnimator.setRepeatCount(1);
rotationAnimator.setDuration(1000);

AnimatorSet set = new AnimatorSet();
set.playTogether(scaleXAnimator, scaleYAnimator, rotationAnimator);
set.start();

You can download and install this android app by click the following link, or scan the following QR code to download and install on your android phone simply.

Download and Install Zoom and Rotation Animation Example .apk File

Android Sequential Animations Example Source Code

All examples above are concurrent animations. Next, I will give an Android sequential animations example. In this example, I will still zoom in, zoom out and rotate an image view, but I will play all these animations sequentially. Here is the example source code:

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX", 0.5f);
scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleXAnimator.setRepeatCount(1);
scaleXAnimator.setDuration(1000);

ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY", 0.5f);
scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);
scaleYAnimator.setRepeatCount(1);
scaleYAnimator.setDuration(1000);

ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(zoomTarget, "rotation", 0f, 360f);
rotationAnimator.setRepeatMode(ValueAnimator.RESTART);
rotationAnimator.setRepeatCount(1);
rotationAnimator.setDuration(1000);

//sequencial animation
AnimatorSet set = new AnimatorSet();
set.play(scaleXAnimator).with(scaleYAnimator);
set.play(scaleXAnimator).before(rotationAnimator);
set.start();

You can try this example animation on your Android device by installing following apk.
Download and Install Zoom and Rotation Animation Example .apk File