Animating the List View

Now that you have the test harness ready (see Listings 6-6 and 6-7), you'll learn how to apply scale animation to this ListView. Take a look at how this scale animation is defined in an XML file (see Listing 6-8).

Listing 6-8. Defining Scale Animation in an XML File

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <scale android:fromXScale="1"

android:toXScale="1"

android:fromYScale="0.1"

android:toYScale="1.0"

android:duration="500"

android:pivotX="50%"

android:pivotY="50%"

android:startOffset="100" />

These animation-definition files reside in the /res/anim subdirectory. Let's break down these XML attributes into plain English. The from and to scales point to the starting and ending magnification factors. Here, the magnification starts at 1 and stays at 1 on the x axis. This means the list items will not grow or shrink on the x axis. On the y axis, however, the magnification starts at 0.1 and grows to 1.0. In other words, the object being animated starts at one-tenth of its normal size and then grows to reach its normal size. The scaling operation will take 500 milliseconds to complete. The center of action is halfway (50%) between x and y. The startOffset value refers to the number of milliseconds to wait before starting the animation.

The parent node of scale animation points to an animation set that could allow more than one animation to be in effect. We will cover one of those examples as well. But for now, there is only one animation in this set.

Name this file scale.xml and place it in the /res/anim subdirectory. You are not yet ready to set this animation XML as an argument to the ListView; the ListView first requires another XML file that acts as a mediator between itself and the animation set. The XML file that describes that mediation is shown in Listing 6-9.

Listing 6-9. Definition for a Layout-Controller XML File

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="30%" android:animationOrder="reverse" android:animation="@anim/scale" />

You will also need to place this XML file in the /res/anim subdirectory. For our example, assume that the file name is list_layout_controller. Once you look at this definition, you can see why this intermediate file is necessary. This XML file specifies that the animation in the list should proceed in reverse, and that the animation for each item should start with a 30 percent delay with respect to the total animation duration. This XML file also refers to the individual animation file, scale.xml. Also notice that instead of the file name, the code uses the resource reference @anim/scale.

Now that you have the necessary XML input files, we'll show you how to update the ListView XML definition to include this animation XML as an argument. First, review the XML files you have so far:

// individual scale animation /res/anim/scale.xml

// the animation mediator file /res/anim/list_layout_controller.xml

// the activity view layout file /res/layout/list_layout.xml

With these files in place, you need to modify the XML layout file list_layout.xml to have the ListView point to the list_layout_controller.xml file (see Listing 6-10).

Listing 6-10. The Updated Code for the list_layout.xml File <?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" >

<ListView android:id="@+id/list_view_id"

0 0

Post a comment