Apps

Create slick transitions with Android's ObjectAnimator class

App developer William J. Francis explores Android's ObjectAnimator class, which manipulates object properties resulting in impressive animations that you can apply to any view or widget.

As the number of apps in Google Play continues to grow, it's no longer always enough to write a quality application that does a job well. Given two apps that perform equally well, users tend to gravitate to the one with the more interesting user experience. In fact, I know some users who will choose a less functional app when presented with enough eye candy.

Luckily, you don't have to be a UI jedi to whip up some pretty slick animations. The folks at Google are constantly adding functions to the API to make the job of creating smooth fades and eye-catching transitions a breeze. In this tutorial we will explore the ObjectAnimator, a straightforward class for manipulating object properties resulting in impressive animations that can be applied to any view or widget. You can follow along with the step-by-step instructions below, or download and import the entire project into Eclipse.

1. Start a new Android project in Eclipse. You must target at a minimum SDK version 11 (Honeycomb).  Name your startup activity Main.java and the layout main.xml, respectively.

2. In our /res/layout folder, we will modify main.xml to consist of a linear layout and two widgets: a text view and a button.

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textColor="#000000"
        android:textSize="25sp"
        android:id="@+id/text_view"
        android:layout_marginBottom="50dip"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply Transition"
        android:id="@+id/button" />
</LinearLayout>

3. We will move on to the /src/Main.java file. The on create override is your standard Android UI paradigm: attach a layout and wire up the button. Meanwhile, our on click handler is where the magic happens. You can see how handily the object animator combines with the animator set and builder to allow us to apply multiple transitions to a single object in tandem.

Main.java

package com.authorwjf.transition;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
public class Main extends Activity implements OnClickListener{

private final boolean IN = true;
       private boolean state = IN;
       @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       findViewById(R.id.button).setOnClickListener(this);
    }
       @Override
       public void onClick(View v) {
              TextView tv = (TextView)findViewById(R.id.text_view);
              tv.setText("Hello Transition!");
              ObjectAnimator scaleXOut = ObjectAnimator.ofFloat(tv, "scaleX", 1f, 0f);
          ObjectAnimator scaleXIn = ObjectAnimator.ofFloat(tv, "scaleX", 0f, 1f);
          ObjectAnimator scaleYOut = ObjectAnimator.ofFloat(tv, "scaleY", 1f, 0f);
          ObjectAnimator scaleYIn = ObjectAnimator.ofFloat(tv, "scaleY", 0f, 1f);
          ObjectAnimator rotateClockWise = ObjectAnimator.ofFloat(tv, "rotation", 0f, 360f);
          ObjectAnimator rotateCounterClockWise = ObjectAnimator.ofFloat(tv, "rotation", 0f, -360f);
          AnimatorSet set = new AnimatorSet();
          if (state == IN) {
             set.play(scaleXIn).with(rotateClockWise).with(scaleYIn);
             } else {
                    set.play(scaleXOut).with(rotateCounterClockWise).with(scaleYOut);
             }
             state = !state;
             set.setDuration(1000);
             set.start();
     }
}
Are you ready for some GUI goodness? Load up the demo and give it a whirl (Figure A). Pressing the button causes the text to alternately transition in and out, spinning while simultaneously shrinking or growing. You have to admit, the resulting animation is pretty cool, and the API does all the hard work. Figure A

If you were not already dressing up your apps with Google's animation framework, I encourage you to investigate it further. You can read Google's complete and official documentation for Property Animation.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

6 comments
countgreen
countgreen

Thanks William, looks like a great class. Is there documentation for animation of other properties of an object?

dogknees
dogknees

You cover the technology, but offer little in the way of when it makes sense to use these effects. To make that decision, contrary to your statement, you do need to be a UI jedi. Else we see a repeat of the mess that desktop publishing created 15 years ago. Everyone could suddenly use as many fonts and colours as they wanted, so they did, and the result was ugly to say the least. I recall a friend creating his first webpage and putting animations all over it. He thought it was brilliant. It wasn't. It made you want to slit your wrists if you spent more than about 20 seconds looking at it.

LoTanX
LoTanX

The framework essentially treats it as a Java bean and looks for getters and setters for whatever property you want to manipulate. You could pass a custom class to an object animator and it would work as long as the field accessor and manipulator is there. The great thing about object animator is its interpolation of your values based on the duration, and it's flexibility to work with any object.

authorwjf
authorwjf

It is possible to animate any property. So the property map for the object is the documentation. Keep an eye on the app builder column as I have another tutorial in the works on this same topic.

authorwjf
authorwjf

I agree that it is certainly possible to over do it. I'm not a UI guru by any means, but I use these effects in my own projects as transitions. Unless you want to become a UI designer yourself or hire one my advice is simply look at popular apps that have transitions you like and use the provided framework to emulate them.