Android UI in Action: Layout Animations

Editor's Note: This post is a free chapter from Manning Publications' "Android UI in Action" by Carlos Sessa.

Android has three main types of animation. They are:

•  Frame based
•  View based
•  Property based

These three types of animation fall into two categories: frame animations and tweened animations. Unsurprisingly, frame-base animations are a type of frame animation, whereas View- and Property-based animations are types of tweened animations.

A frame animation is one of the simplest and most straightforward types of animations. This type of animation is implemented by displaying a succession of slightly changing images one after another. By displaying these images in quick succession we have a resulting smooth animation.

Unlike frame-based animations, where we have to explicitly define each image for each frame of the animation, for tween-based animations, we only need to define a number of key points in the animation and the system creates the in between frames for us. For example, if we wanted to animate the rotation of a square, we might specify the start angle of 0 degrees and the final angle as 45 degrees. When we play the animation, the system will create and display the in-between frames to give a smooth rotation animation. Figure 1 depicts a square being animated by rotating it from 0 to 45 degrees. The dashed square represents the in-between or tweened value that is calculated by the animation system.

Figure 1 Rotating a square with tweened values

View animations

View animations are tween-based animations. With view animations we can only animate Views. View based animations use a number of classes that can be found in the android.view.animation package. With this type of animation we can apply four different animation effects to views, these are:

• Scale animation-changing the size.
• Translate animation-moving the view.
• Alpha animation-adjust the transparency of a view.
• Rotate animation-Rotate a view by a given angle.

For each of the animations we have a corresponding animation class in android.view.animations. All of the animation classes extend a common abstract Animation class. Figure 2 shows the class hierarchy for these classes.

Figure 2 Class hierarchy for view Animations

Notice that in figure 2 we have also shown a class AnimationSet. This class allows you to group animations together and choreograph how they're played. With the AnimationSet, you can play a number of animations simultaneously or organize them to be played sequentially.

There are two basic steps to using a View animation. First, we have to create and define the animation and then we have to start the animation on the view we wish to animate. To create a View Animation, you can simply create a new class in Java code.  

Let's take a look at creating layout animations, which involves the use of translate animations.

Layout animations

Within View animations, we also have layout animations. With Android, it is also possible to apply animations to layouts. Layout animations allow you to apply an animation to each child view in the layout as it is added or removed. Within layout animations, we do not need to explicitly start the animation; it will be started when the layout is displayed. Android uses the LayoutAnimationController class for layout animations. Any ViewGroup class in android can have a LayoutAnimationController class. This means that we can apply layout animations to any type of layout such as a LinearLayout or any type of AdapterView, such as a ListView.

The LayoutAnimationController can be defined in Java or XML, but, most often, it's defined in XML. Table 1 shows the attributes for the LayoutAnimationController.

Table 1 LayoutAnimationController attributes

The LayoutAnimationController has a number of attributes that control how layout animations are applied. You have the animation attribute, which defines the animation that will be applied to each child view in the layout. This could be a simple single animation or a more complicated animation set. The delay attribute sets the time between the starts of animation on each child in the layout. This is a percentage value. You can also set the animation order. This can be set to normal, which means the first child in the layout is added first; reverse, the last child is added first or random; finally, you can also set an interpolator to vary the rate of change between the animation delays.

As an example, here is a LinearLayout with a layout animation applied to it. Here we have a very simple LinearLayout with three text views.

Figure 3 Simple LinearLayout with TextViews

We've defined a very simple linear layout, but we have to add one very important attribute-the layout animation attribute that states which layout controller we are going to use to animate the TextViews within the layout. The XML for this LayoutAnimation Controller is shown in listing 1.

Listing 1 XML for a LayoutAnimationController

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="25%"
    android:animationOrder="normal"
    android:animation="@android:anim/slide_in_left" />

This LayoutAnimationController uses a translate animation, which has the effect of bringing in the TextViews from off the left of the screen. This translate animation allows you to move views about the screen. With this animation, you can move views along both the X and Y axis. As an example, let's take a look at a translate animation that takes the ImageView and moves it to the right and off the screen.

Figure 4 Moving an ImageView with a translate animation

When this translate animation is used with the LayoutAnimationController, it has the effect moving each TextView onto screen one by one, starting with the topmost TextView.

Figure 5 TextViews animated onto the Layout

To bring this all together, we simply load the layout via an Activity. This is a layout animation so we don't have to start it. Listing 2 shows the Activity used to run this example.

Listing 2 Activity to load layout with a LayoutAnimationController

public class AnimateLayoutActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout_animation);
    }
}

What we've shown here is just a simple example of what can be done with a layout animation. This type of animations can be used with any type of ViewGroup including AdapterViews, such as the ListView and GridView. In fact, GridView has its own type of layout animation controller, GridLayoutAnimationController. This controller extends the LayoutAnimationController, so that we can control how animations are sequenced on a column and row basis. For more examples of using layout animations, take the sample API Demos code on the Google developers' website.

Summary

View animations are simple to understand and use and give a great way to animate Android Views. With View animations, you can animate the scale, position, rotation, and alpha of any type of View. To create more complex animations, you can also group View animations into sets while using different types of interpolators to achieve realistic movement. In this article, we zeroed in on layout animations, a type of View animations that allows you to apply an animation to each child view in the layout as it is added or removed.

Android UI

By Carlos Sessa

With View animations, you can animate the scale, position, rotation, and alpha of any type of View. In this article, based on chapter 10 of Android UI, the author a type of View animations that allows you to apply an animation to each child view in the layout as it is added or removed.

Here are some other Manning titles you might be interested in:

Android in Action, Third Edition

W. Frank Ableson, Robi Sen, Chris King, and C. Enrique Ortiz

Android in Practice

Charlie Collins, Michael D. Galpin, and Matthias Kaeppler

60 Android Hacks

Carlos Sessa