360 CHAPTER 10: Android Animation: Making Your UI Designs Move
If you want a slower 2-second rotation, you would use a 250 value, a 3-second rotation would be
3000 divided by 8 or a value of 375 , and so forth. Using XML markup will make it easy to experiment
or “tweak” these values, until you get the exact animation motion you’re looking for.
Next, you will create your XML animation definition file using Eclipse ADT, using a very similar
work process to what you did in the previous chapter in order to create the XML for the multi-state
ImageButton UI elements.
Creating Frame Animation in MainActivity
The first thing you’ll need to do is to copy these eight lunarlander PNG files from the book files
repository into your project’s /res/drawable-xhdpi folder. These are indexed color PNG8 files, which
are 320 by 320 pixels. I’ll also include 160 by 160 (HDPI) versions and 80 by 80 (MDPI) versions for
those of you who want to provide a range of resolution density assets in your application. Figure 1 0- 1
shows the eight files, as well as a background plate ring image to composite behind them called
imageviewwhitering.png, copied into the XHDPI folder. The animation XML asset we will be
creating will be used in a source image plate for the
Figure 10-1. Copy the eight lunarlander PNG files and the imageviewwhitering.png background image to /res/drawable-xhdpi
Creating an anim_milkyway.xml File and Markup
Right-click on the /res/drawable folder and select the New ➤ Android XML File menu sequence to
open a New Android XML File dialog, shown in Figure 10-2. Name the file anim_milkyway, select
an animation-list root element from the center selector area, and then click the Finish button to
create the bootstrap XML file.