Android View Animation Example

On July 20, 2012, in Android, by James

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 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.

Android View Animation Rotate Example

Android View Animation Rotate Example

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"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
 	<rotate android:toDegrees="360"
		android:duration="700" 
		android:pivotX="205"
		android:pivotY="180"
		android:interpolator="@android:anim/linear_interpolator"/>
</set>

Using follow code to apply the animation to View

ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_around_center_point);
animationTarget.startAnimation(animation);

We can also create the animation dynamically in Java code.

Animation newAnimation = new RotateAnimation(0, 360, 205, 180);
newAnimation.setDuration(700);
animationTarget.startAnimation(newAnimation);

Download and try the example app

Android View 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"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <scale android:interpolator="@android:anim/decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="0.5"
        android:fromYScale="1.0"
        android:toYScale="0.5"
        android:duration="700"
        android:pivotX="205"
        android:pivotY="180"/>
</set>

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

ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_animation);
animationTarget.startAnimation(animation);

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

Animation scaleAnimation = new ScaleAnimation(1, (float) 0.5, 1, (float) 0.5, 205, 180);
scaleAnimation.setDuration(700);
animationTarget.startAnimation(scaleAnimation);

Download and try the example app

Tagged with: Androidanimation 

1 Response » to “Android View Animation Example”

  1. Rafael says:

    Finnally i got a solution to my problem…

    thanks for the help!

Leave a Reply

WordPress Themes
Premium WordPress Themes