Developer

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

Editor's Picks