Android Property Animations: Introduction

In a previous post I introduced you to the different types of animation systems that Android provides before explaining the View Animation System. The View Animation System allowed you to simply animate changes in the appearance of a View element. The View Animation system was simple but it was also quite limited. Only a few basic transformations are supported by the system, the scale, translation and rotation transformation and the alpha property that allows you animate the transparency of a View. For some situations this might be sufficient but in many cases the View Animation System is too restrictive. For example, imagine you wanted to animate the 3d rotation using the rotationX or rotationY properties that were introduced in API 11. Or maybe you want to animate a colour change or animate the change of a drawable. This is not possible using View Animations. This is where the Property Animation System comes in. Property Animations let you animate essentially anything.  You are not limited by predefined animation types or by the type of object that you want to animate. At first the usage of the Property Animation System might seem a little complicated. However, in most cases you can use the very versatile ObjectAnimator that uses reflection. The ObjectAnimator makes creating Property Animations almost as easy as creating View Animations.

A Motivating Example

Let’s start with a motivating example. In this example I will rotate a View around its vertical axis using the rotationY property. This can be done by creating an XML resource file in the /res/animator directory. We will call it flip_on_vertical.xml.

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
  android:propertyName="rotationY"
  android:duration="500"
  android:valueFrom="0"
  android:valueTo="360"
  android:valueType="floatType" />

This defines a rotation around the y-axis from 0 to 360 degrees that will take 500 milliseconds. Two attributes in the XML should be explained a little bit at this point. The propertyName attribute defines the property that should be animated. In the example the property is rotationY. In this case the ObjectAnimator will look for a method called setRotationY in the object that is to be animated. This is done using Java reflection. Note that, while rotationY is also a valid view attribute that can be specified in a layout resource, the ObjectAnimator does not make use of this. Properties are not limited to View properties but can be applied to any setter method of the animated object. We will come back to this later. The argument type of the method is specified using the valueType attribute. The animation has to be applied to an object. In our case we will apply it to an ImageView that is centred on the screen. We can use a Relative Layout for this purpose.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity" >

  <ImageView
    android:id="@+id/some_image"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:cropToPadding="true"
    android:layout_centerInParent="true"
    android:src="@drawable/ferriswheel"
    android:text="@string/example1"
    android:onClick="flipOnVertical" />

</RelativeLayout>

Now all we need to do is to make the animation run. To do this we have defined a callback on the ImageView called flipOnVertical. The callback method in the activity looks like this.

public void flipOnVertical(View view) {
  View image = findViewById(R.id.some_image);
  Animator anim = AnimatorInflater
    .loadAnimator(this, R.animator.flip_on_vertical);
  anim.setTarget(image);
  anim.start();
}

The property animation in action.

The first line in the method flipOnVertical simply retrieves the ImageView from the layout. We do not need any ImageView specific behaviour so we don’t need to cast it from View. The second line creates an Animator object from the XML resource. This is done by the static method loadAnimator defined in the AnimatorInflater class. The method takes a context and a resource id that references the animation we defined earlier. Next we define the target object for the animation using Animator.setTarget. Note that the method does not require a View object but will take any type of object as argument. Finally Animator.start will start the animation. The resulting animation can be seen on the right.

The code for this tutorial can be found here.

Follow the author