The changed lines are highlighted in bold. android:layoutAnimation is the key tag, which points to the mediating XML file that defines the layout controller using the XML tag layoutAnimation (see Listing 6-9). The layoutAnimation tag, in turn, points to the individual animation, which in this case is the scale animation defined in scale.xml. Android also recommends setting the persistentDrawingCache tag to optimize for animation and scrolling. Refer to the Android SDK documentation for more details on this tag.

When you update the list_layout.xml file as shown in Listing 6-10, Eclipse's ADT plug-in will automatically recompile the package taking this change into account. If you were to run the application now, you would see the scale animation take effect on the individual items. We have set the duration to 500 milliseconds so that you can observe the scale change clearly as each item is drawn.

Now you're in a position to experiment with different animation types. You'll try alpha animation next. To do this, create a file called /res/anim/alpha.xml and populate it with the content from Listing 6-11.

Listing 6-11. The alpha.xml File to Test Alpha Animation

<alpha xmlns:android="" android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" />

Alpha animation is responsible for controlling the fading of color. In this example, you are asking the alpha animation to go from invisible to full color in 1000 milliseconds, or 1 second. Make sure the duration is 1 second or longer; otherwise, the color change is hard to notice.

Every time you want to change the animation of an individual item like this, you will need to change the mediator XML file (see Listing 6-9) to point to this new animation file. Here is how to change the animation from scale animation to alpha animation:

<layoutAnimation xmlns:android="" android:delay="30%" android:animationOrder="reverse" android:animation="@anim/alpha" />

The changed line in the layoutAnimation XML file is highlighted. Let us now try an animation that combines a change in position with a change in color gradient. Listing 6-12 shows the sample XML for this animation.

Listing 6-12. Combining Translate and Alpha Animations Through an Animation Set

<set xmlns:android="" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromYDelta="-100%" android:toYDelta="0" android:duration="500" />

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set>

Notice how we have specified two animations in the animation set. The translate animation will move the text from top to bottom in its currently allocated display space. The alpha animation will change the color gradient from invisible to visible as the text item descends into its slot. The duration setting of 500 will allow the user to perceive the change in a comfortable fashion. Of course, you will have to change the layoutAnimation mediator XML file again with a reference to this file name. Assuming the file name for this combined animation is /res/ anim/translate-alpha.xml, your layoutAnimation XML file will look like this:

<layoutAnimation xmlns:android="" android:delay="30%" android:animationOrder="reverse" android:animation="@anim/translate-alpha" />

Let us see now how to use rotate animation (see Listing 6-13).

Listing 6-13. Rotate Animation XML File

<rotate xmlns:android="" android:interpolator="@android:anim/accelerate_interpolator" android:fromDegrees="0.0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="500" />

The code in Listing 6-13 will spin each text item in the list one full circle around the midpoint of the text item. The duration of 500 milliseconds is a good amount of time for the user to perceive the rotation. As before, to see this effect you must change the layout-controller XML file and the ListView XML layout file and then rerun the application.

Now we've covered the basic concepts in layout animation, where we start with a simple animation file and associate it with a ListView through an intermediate layoutAnimation XML file. That's all you need to do to see the animated effects. However, we need to talk about one more thing with regard to layout animation: interpolators.

0 0

Post a comment