CHAPTER 10: Android Animation: Making Your UI Designs Move 365The final XML markup for your
look like the following:
<ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"
android:src="@drawable/anim_milkyway"android:background="@drawable/imageviewwhitering"
android:layout_below="@+id/llh" android:contentDescription="@string/galaxyone"
android:adjustViewBounds="true" android:padding="40dip" />
You can experiment with different padding values, until the corners of your animation asset stop
overlaying the ring background element and the shading inside of its rim, so that the white values
essentially hide any “seams” between these images. You can do image compositing using alpha
channels, and in many instances in a more simple fashion simply by making sure that background
and foreground colors match perfectly, eliminating any seam!
Next, let’s use a different AVD emulator, so you can see the entire ImageView UI element. Use the
Run As ➤ Run Configurations menu sequence to set the AVD to the Galaxy Nexus, which uses a
720 by 1280 resolution. The Nexus One AVD uses 480 by 800 resolution. If you want an image of the
Run Configurations dialog, see Figure 4-9.
Testing Your SlidingPane in a Galaxy Nexus AVD
After you set the Galaxy Nexus as the active or default AVD emulator in the Run Configurations
dialog, launch it from that dialog, or launch it using the Run As ➤ Android Applications menu
sequence. As you can see in Figure 10-7, the NinePatchDrawable has scaled down so that the
frame is thinner, and the entire background ring is visible, with the foreground animation composited
over it. The 40 DIP padding setting is no longer perfect, as you can see, the very tips of the corners
of the foreground animation overlaying the ring, so our composite is no longer “seamless.” To fix
this, we will need to scale down the foreground image another 10%, using the higher padding value
of 44 DIP. As you can now see, you also need to install an android:layout_marginLeft parameter
to push the ImageView UI element into the center of the frame, as you can see on the right side of
Figure 10-7.