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

your tutorial is simple and clear ! I am a beginner of this part , thanks a lot! it helps me having a good start !
great tutorial. hard to find. thanks a lot.
your tutorial is simple and clear ! You did a great job Dear.
Your tutorial is very useful for me. But I want animate view 3 times. Please help me.
Take a look at my tutorial on building complex animations.
Click on next at end of page takes to Mathematical section.
Hi! Do you think it could be possible to rotate the full screen on its Y axis of 180 degrees? I need to see it as in a mirror, just to be clear.
Hi Johnny,
It depends on what you mean by the full screen. For instance, you won’t be able to rotate the Navigation Bar. If you want to rotate the contents of your application then you just need to wrap everything in a layout and rotate that. To mirror the contents you can change
android:valueTo="360"
toandroid:valueTo="180"
in theflip_on_vertical.xml
file