1. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp for Developers Using Java, 3E Chapter 10: Move! Creating Animation 1 Android Boot Camp for Developers Using Java, 3rd Ed.

2. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 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 2 Android Boot Camp for Developers Using Java, 3rd Ed.

3. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 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 3 Android Boot Camp for Developers Using Java, 3rd Ed.

4. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Animation 4 Android Boot Camp for Developers Using Java, 3rd Ed. Animation is everywhere –Words with Friends –Angry Birds –Cut the Rope –Candy Crush A motion tween is used to animate the object –Specifies start state –Transition type –Number of times to animate

5. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Animation (continued) Steps to complete the App: 1.Add the four images to the drawable folder. 2.Add a Frame animation XML file to the project. 3.Add the layout for the image and button objects in main.xml. 4.Set the duration between frames in the frame-by-frame animation. 5.Declare and instantiate the ImageView, Button, and AnimationDrawable controls. 6.Code the OnClickListeners for the Button controls. 7.Run the Frame animation application. 8.Add a Tween animation XML file to rotate the last surfing image. 9.Create a second Activity named Tween.java to launch the rotation Tween animation. 10.When the application executes, change the orientation of the emulator. 5 Android Boot Camp for Developers Using Java, 3rd Ed.

6. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 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 6 Android Boot Camp for Developers Using Java, 3rd Ed.

7. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding the Layout for the Frame Image and Button Controls 7 Android Boot Camp for Developers Using Java, 3rd Ed.

8. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 8 Android Boot Camp for Developers Using Java, 3rd Ed. Adding the Layout for the Frame Image and Button Controls (continued)

9. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 9 Android Boot Camp for Developers Using Java, 3rd Ed. Adding the Layout for the Frame Image and Button Controls (continued)

10. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 10 Android Boot Camp for Developers Using Java, 3rd Ed. Adding the Layout for the Frame Image and Button Controls (continued)

11. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Frame-by-frame Animation 11 Android Boot Camp for Developers Using Java, 3rd Ed. 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

12. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Frame-by-frame Animation (continued) 12 Android Boot Camp for Developers Using Java, 3rd Ed.

13. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Frame-by-frame Animation (continued) 13 Android Boot Camp for Developers Using Java, 3rd Ed.

14. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. The AnimationDrawable class –provides the methods for drawable animations to create a sequence of frame-by-frame images –In Android development, frame-based animations and image transitions are defined as drawables –The instance of AnimationDrawable is instantiated as a class variable because it is used in multiple methods within the MainActivity class Coding the AnimationDrawable Object 14 Android Boot Camp for Developers Using Java, 3rd Ed.

15. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Setting the Background Resource 15 Android Boot Camp for Developers Using Java, 3rd Ed. –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 –setBackgroundResource method places images in the frame-by-frame slide type display Each frame points to one of the images that were assembled in the XML resource file The imgFrame instance is the image that you want to animate and is set to the animation drawable as its background

16. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Setting the Background Resource (continued) 16 Android Boot Camp for Developers Using Java, 3rd Ed.

17. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Setting the Background Resource (continued) 17 Android Boot Camp for Developers Using Java, 3rd Ed.

18. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 18 Android Boot Camp for Developers Using Java, 3rd Ed. Setting the Background Resource (continued)

19. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding Two Button Controls 19 Android Boot Camp for Developers Using Java, 3rd Ed.

20. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding Two Button Controls (continued) 20 Android Boot Camp for Developers Using Java, 3rd Ed.

21. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding Two Button Controls (continued) 21 Android Boot Camp for Developers Using Java, 3rd Ed.

22. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding Two Button Controls (continued) 22 Android Boot Camp for Developers Using Java, 3rd Ed.

23. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Using the Start and Stop Methods 23 Android Boot Camp for Developers Using Java, 3rd Ed.

24. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Using the Start and Stop Methods (continued) 24 Android Boot Camp for Developers Using Java, 3rd Ed.

25. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating Tween Animation 25 Android Boot Camp for Developers Using Java, 3rd Ed. Tween effects are transitions that change objects from one state to another

26. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating a Second Activity and XML Layout to Launch the Tween Animation 26 Android Boot Camp for Developers Using Java, 3rd Ed.

27. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating a Second Activity and XML Layout to Launch the Tween Animation 27 Android Boot Camp for Developers Using Java, 3rd Ed.

28. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Adding the Layout for the Tween Image 28 Android Boot Camp for Developers Using Java, 3rd Ed.

29. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Coding a Tween Rotation XML File 29 Android Boot Camp for Developers Using Java, 3rd Ed.

30. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Coding a StartAnimation 30 Android Boot Camp for Developers Using Java, 3rd Ed. The StartAnimation method begins animating a View object by calling the AnimationUtils class utilities to access the resources necessary to load the animation

31. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Coding a StartAnimation (continued) 31 Android Boot Camp for Developers Using Java, 3rd Ed.

32. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Changing the Emulator to Landscape Orientation 32 Android Boot Camp for Developers Using Java, 3rd Ed. Most Android devices automatically rotate the display from portrait to landscape when the user turns the device The default screen orientation layout is vertical Pressing the Fn+left Ctrl+F12 keys simultaneously rotates the phone emulator to landscape orientation You can also press the 7 key on the keypad when Num Lock is turned off

33. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Running and Testing the Application Tap or click the Run ‘app’ button on the Standard toolbar and display the app in the Nexus 5 emulator Tap or click the START FRAME ANIMATION button to begin the Frame animation of the four Northern Lights images, as shown in Figure 10-1 The animation should rotate six times and then end 33 Android Boot Camp for Developers Using Java, 3rd Ed.

34. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary Frame animation assigns a sequence of images to play as in a slide show with a specified interval between images To create a Frame animation, you write code in an XML file to load a sequence of images from the drawable folder In the animation-list code, you can include the oneshot property to determine how many times to play the animation 34 Android Boot Camp for Developers Using Java, 3rd Ed.

35. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary (continued) When you add the XML file with the animation-list code to the Android project, select Drawable as the resource type and select animation-list as the root element so that Android stores the XML file in the res/drawable folder The AnimationDrawable class provides the methods for drawable animations to create a sequence of frame-by-frame images You can set the Background property of an image to any full Drawable resource such as a.png file 35 Android Boot Camp for Developers Using Java, 3rd Ed.

36. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary (continued) In MainActivity.java, also include an instance of AnimationDrawable and assign it as the background of the animation images You can 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 36 Android Boot Camp for Developers Using Java, 3rd Ed.

37. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary (continued) 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 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 37 Android Boot Camp for Developers Using Java, 3rd Ed.

38. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary (continued) To switch the emulator to use a landscape orientation on a PC, press the Fn+left Ctrl+F12 keys. To rotate the emulator to the original portrait position, press the Fn+left Ctrl+F12 keys again. Mac users can press the Fn+Ctrl+F12 keys to change the orientation 38 Android Boot Camp for Developers Using Java, 3rd Ed.