Android Development – More Animations, Part 1

In this first part of the series we will present a few animations using TextViews on the same screen. The finished result will look like below.

The Goal

For this sample, we will be demonstrating three different animations: alpha, translate, and rotate. We will be defining the animations in XML files instead of code, and we will associate these animations with three different TextViews, starting them at the same time. In prior posts I took a more code-oriented approach to defining graphical elements. We will see how the code becomes much cleaner when our graphical definitions are stored as external XML resources.

Animation Files

To begin, create a new Android project, calling it whatever you like. We will begin by adding three new animation resources. Right click on the root project node and add a new Android XML file.

We are presented with a dialog that lets us choose what kind of Android XML file to add. We want to add an animation file, so we enter “alpha.xml” as the filename, select “Animation” from the resource type, and select “alpha” as the root element for the XML file.

Clicking Finish creates an anim folder in our res node that contains an XML file named “alpha.xml”.

Double click on the alpha.xml file and you’ll see that Eclipse didn’t do much else for us.

<?xml version="1.0" encoding="utf-8"?>
<alpha>
</alpha>

It’s up to us to define the alpha animation the way we want it. Alpha animations are generally used to fade drawable objects in and out based on the configuration. For our sample, we want to fade in our text from nothing over the course of three seconds. This configuration appears as below.

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="3000" />

We simply defined the namespace, and then defined the from and to alpha weightings, and then finally defined how long we want the animation to run.

Next, we want to add our translate and rotate animations the same way we added our alpha animation. After adding these animation files to our project, our layout should look as below.

We’ll define our translate animation to zoom our text in from twice the text width to the right and below of the final resting position, over the course of three seconds. This configuration appears below.

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="200%"
    android:toXDelta="0%"
    android:fromYDelta="200%"
    android:toYDelta="0%"
    android:duration="3000"
    android:zAdjustment="top" />

Note the percentages for the from and to values. We could have used absolute numbers here as well.  Next, we will have our rotate animation start rotated 90 degrees from the horizontal and come to rest 0 degrees off. We will go ahead and specify the coordinates around which we want the rotation to occur, though with the values we are choosing, the effect won’t be all too noticeable. In later parts we will experiment with crazier numbers here to better see their effects. Finally, we will have the animation run over three seconds. The corresponding configuration is given below.

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="0"
    android:pivotX="-5%"
    android:pivotY="5%p"
    android:duration="3000" />

The Layout

The layout for our sample is trivial, comprising of three TextViews in a LinearLayout. The XML is given below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal">
    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Wow"
        android:textSize="42sp"/>
    <TextView
        android:text="Some"
        android:id="@+id/secondTextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="42sp"></TextView>
    <TextView
        android:text="Text"
        android:id="@+id/thirdTextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="42sp"></TextView>
</LinearLayout>

Again, nothing crazy. We are simply centering the text in our three TextViews and filling the parent layout.

The Code

Now that we have our animations in external resources and our layout defined, we can write the code to use them. We will define a method to contain our animation code, called RunAnimations. In this method, we will use the static method loadAnimation in the AnimationUtils library to load our external animations so that we can subsequently set them to the corresponding TextViews. The code is below.

private void RunAnimations() {
    Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
    a.reset();
    TextView tv = (TextView) findViewById(R.id.firstTextView);
    tv.clearAnimation();
    tv.startAnimation(a);

    a = AnimationUtils.loadAnimation(this, R.anim.translate);
    a.reset();
    tv = (TextView) findViewById(R.id.secondTextView);
    tv.clearAnimation();
    tv.startAnimation(a);

    a = AnimationUtils.loadAnimation(this, R.anim.rotate);
    a.reset();
    tv = (TextView) findViewById(R.id.thirdTextView);
    tv.clearAnimation();
    tv.startAnimation(a);
}

The first thing you’ll notice is how much cleaner the code looks when our animation definitions are stored externally. Defined correctly, our animation files could become portable across our application as well.

You’ll also notice that we are resetting our animations and clearing the animation on the TextViews before we start them back up – this is so that they will repeat whenever our new method is called. You’ll also notice that Eclipse graciously created tokens for us in the R.anim namespace with which we can refer to our external animations.

To make our animations easily demonstrable, we will call the RunAnimations method whenever the device’s screen is pressed. The code is below.

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        RunAnimations();
    }
    return true;
}

Now we can run the application, press the screen, and see the effect shown in the video at the beginning of the post.

Next Steps

In future posts in this series, we will explore combining animations on the same View elements, and we will incorporate interpolators in more creative ways than what we did in the simple bounce animation post.