1. Chapter 10: Move! Creating Animation

2. Objectives In this chapter, you learn to:
Create an Android application with Frame and Tween animation
Understand Frame animation
Understand Tween animation
Add an animation-list XML file
Code the AnimationDrawable object
Set the background Drawable resource
Launch the start( ) and stop( ) methods
Android Boot Camp for Developers using Java

3. Objectives (continued)
Add Tween animation to the application
Create a Tween XML file that rotates an image
Determine the rotation pivot, duration, and repeat count of a Tween animation
Load the startActivity Tween animation in a second Activity
Change the orientation of the emulator
Android Boot Camp for Developers using Java

4. Creating Animation Animation is everywhere
Words with Friends
Angry Birds
Cut the Rope
Roller Ball
A motion tween is used to animate the object
Specifies start state
Transition type
Number of times to animate
Figure 10-2 Wave Animation Android app using Tween animation
Android Boot Camp for Developers using Java

5. Creating Animation (continued)
Steps to complete the App:
Add the four images to the drawable folder.
Add a Frame animation XML file to the project.
Add the layout for the image and button objects in main.xml.
Set the duration between frames in the frame-by-frame animation.
Declare and instantiate the ImageView, Button, and AnimationDrawable controls.
Code the OnClickListeners for the Button controls.
Run the frame-by-frame Animation application.
Add a layout for an ImageView control for the Tween animation.
Add a Tween animation XML file to rotate the last surfing image.
Create a second Activity named Tween.java to launch the rotation Tween animation.
When the application executes, change the orientation of the emulator.
Android Boot Camp for Developers using Java

6. Android Animation Two types of animation for Android: Frame animation
A sequence of photos playing as a slide show
Similar to cartoon animation
Images rapidly replaced by new, similar images
Tween animation
Created by a series of transformations on a single image
Transformations include position, size, shape rotation, color, and transparency
Android Boot Camp for Developers using Java

7. Adding the Layout for the Frame Image and Button Controls
This app requires nested layout – relative layout within a linear layout
Linear layout
ImageView control displays the animation images
Relative layout
Buttons arranged side by side (not allowed in linear layout)
Android Boot Camp for Developers using Java

8. Adding the Layout for the Frame Image and Button Controls (continued)
Figure 10-5 Two button controls in XML code
Android Boot Camp for Developers using Java

9. Adding the Layout for the Frame Image and Button Controls (continued)
Creating Frame-by-frame Animation
Animation-list root element is needed to reference images stored in the drawable folders
Set the android:oneshot property to false for the animation plays repeatedly
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="
android:oneshot="false" >
<item android:duration="100"/>
<item android:duration="100"/>
<item android:duration="100"/>
<item android:duration="100"/>
</animation-list>
Android Boot Camp for Developers using Java

10. Coding the AnimationDrawable Object
The AnimationDrawable class
Contains methods to sequence frame-by-frame images
Figure Instantiating AnimationDrawable
Android Boot Camp for Developers using Java

11. Setting the Background Resource
Image backgrounds can be set to:
A 9-patch image
Contains pre-defined stretching areas that maintain the same look on different screen sizes
Named for the nine areas, called patches, that scale separately
A solid color background
Android Boot Camp for Developers using Java

12. Setting the Background Resource (continued)
Figure getBackground prepares the Animation drawable
Android Boot Camp for Developers using Java

13. Adding Two Button Controls
Figure btFrame is the instance of the first button
Figure btTween is the instance of the second button
Android Boot Camp for Developers using Java

14. Adding Two Button Controls (continued)
Figure First button OnClickListener
Android Boot Camp for Developers using Java

15. Adding Two Button Controls (continued)
Figure Second button OnClickListener
Android Boot Camp for Developers using Java

16. Using the Start and Stop Methods
Figure Entering the start() method
Figure Entering the stop() method
Android Boot Camp for Developers using Java

17. Using the Start and Stop Methods (continued)
Adding the Layout for the Tween Image
Figure ImageView control coded in tween.xml
Android Boot Camp for Developers using Java

18. Using the Start and Stop Methods (continued)
Creating Tween Animation
Tween effects are transitions that change objects from one state to another
Table10-1 Tween animation effects
Android Boot Camp for Developers using Java

19. Using the Start and Stop Methods (continued)
Coding a Tween Rotation XML File
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android=" android:fromDegrees="0"
android:toDegrees="359"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:repeatCount="5"
rotate />
Android Boot Camp for Developers using Java

20. Using the Start and Stop Methods (continued)
Coding a Second Activity to Launch the Tween Animation
Figure Main.java launches the second Activity (complete code for Main.java)
Android Boot Camp for Developers using Java

21. Using the Start and Stop Methods (continued)
Coding a StartAnimation
Figure onCreate method in Tween.java
Figure tween.xml layout is set
Android Boot Camp for Developers using Java

22. Using the Start and Stop Methods (continued)
Figure ImageView is instantiated
Figure Image rotates using Tween animation (complete code for Tween.java)
Android Boot Camp for Developers using Java

23. Using the Start and Stop Methods (continued)
Updating the Android Manifest File
Figure Adding the Tween Activity to the Android Manifest File
Android Boot Camp for Developers using Java

24. Using the Start and Stop Methods (continued)
Updating the Android Manifest File
Figure Adding the theme to the Android Manifest File
Android Boot Camp for Developers using Java

25. Changing the Emulator to Landscape Orientation
Most Android devices automatically rotate the display from portrait to landscape when the user turns the device
The default screen orientation layout is vertical
Ctrl + F12 rotates the phone emulator to landscape orientation
You can also press the 7 key on the keypad when Num Lock is turned off
Android Boot Camp for Developers using Java

26. Running and Testing the Application
Click Run on the menu bar
Select Android Application from the dialog box
Save all the files when prompted
Unlock the emulator (if necessary)
Click the Start Frame Animation and begin the rotation
The animation should rotate six times and then end
Android Boot Camp for Developers using Java

27. Summary
Frame animation and Tween animation are the two types of animation provided by Android
Nest a relative layout within a linear layout to display two controls side by side
To create frame animation, load images in a drawable folder and then create an animation list
Set the oneshot property of the animation-list to false to repeatedly play the animation
In the XML file, select drawable as the resource type and animation-list as the root element
Android Boot Camp for Developers using Java

28. Summary (continued)
Frame-based animations and image transitions are defined as drawables in Android Development
The Background property can be set to any full drawable resource
Main.java includes an instance of AnimationDrawable and assigns it as the background of the animation images. Android constructs an AnimationDrawable Java object before setting it as the background
Android Boot Camp for Developers using Java

29. Summary (continued)
Use the start( ) and stop( ) methods of the drawable objects to control a Frame animation
A Tween animation manipulates a Drawable image by adding tween effects, which are predefined transitions that change an object from one state to another
The XML file for a Tween animation defines rotate attributes such as the number of degrees to spin, the pivot location, the rotation duration, and the number of times to repeat the rotation
Android Boot Camp for Developers using Java

30. Summary (continued)
To launch a Tween animation, use the startAnimation method, which begins animating a View object by calling the AnimationUtils class utilities to access the resources it needs to play the animation
To switch the emulator to use a landscape orientation on a PC, press the Ctrl+F12 keys. To rotate the emulator to the original portrait position, press the Ctrl+F12 keys again. Mac users can press the Fn+Ctrl+F12 keys to change the orientation
Android Boot Camp for Developers using Java