1 / 33

Objectives

Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 10: Move! Creating Animation. Objectives. In this chapter, you learn to: Create an Android application with Frame and Tween animation Understand Frame animation

urian
Download Presentation

Objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 10: Move! Creating Animation Android Boot Camp for Developers Using Java, 2nd Ed.

  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, 2nd Ed.

  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, 2nd Ed.

  4. Creating Animation • 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 Android Boot Camp for Developers Using Java, 2nd Ed.

  5. Creating Animation (continued) Steps to complete the App: • Add the five 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 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, 2nd Ed.

  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, 2nd Ed.

  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, 2nd Ed.

  8. Adding the Layout for the Frame Image and Button Controls (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  9. Adding the Layout for the Frame Image and Button Controls (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  10. 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="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/surf1" android:duration="100"/> <item android:drawable="@drawable/surf2" android:duration="100"/> <item android:drawable="@drawable/surf3" android:duration="100"/> <item android:drawable="@drawable/surf4" android:duration="100"/> </animation-list> Android Boot Camp for Developers Using Java, 2nd Ed.

  11. Coding the AnimationDrawable Object • The AnimationDrawable class • Contains methods to sequence frame-by-frame images Android Boot Camp for Developers Using Java, 2nd Ed.

  12. 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, 2nd Ed.

  13. Setting the Background Resource (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  14. Setting the Background Resource (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  15. Adding Two Button Controls Android Boot Camp for Developers Using Java, 2nd Ed.

  16. Adding Two Button Controls (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  17. Adding Two Button Controls (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  18. Using the Start and Stop Methods Android Boot Camp for Developers Using Java, 2nd Ed.

  19. Using the Start and Stop Methods (continued) • Adding the Layout for the Tween Image Android Boot Camp for Developers Using Java, 2nd Ed.

  20. Creating Tween Animation Tween effects are transitions that change objects from one state to another Android Boot Camp for Developers Using Java, 2nd Ed.

  21. Creating Tween Animation (continued) • Coding a Tween Rotation XML File Android Boot Camp for Developers Using Java, 2nd Ed.

  22. Creating Tween Animation (continued) Coding a Second Activity to Launch the Tween Animation Android Boot Camp for Developers Using Java, 2nd Ed.

  23. Creating Tween Animation (continued) Coding a StartAnimation • The StartAnimationmethod begins animating a View object by calling the AnimationUtils class utilities to access the resources necessary to load the animation Android Boot Camp for Developers Using Java, 2nd Ed.

  24. Creating Tween Animation (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  25. Creating Tween Animation (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  26. Creating Tween Animation (continued) Updating the Android Manifest File Android Boot Camp for Developers Using Java, 2nd Ed.

  27. Creating Tween Animation (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

  28. 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, 2nd Ed.

  29. 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, 2nd Ed.

  30. 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, 2nd Ed.

  31. Summary (continued) • 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, 2nd Ed.

  32. 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 AnimationDrawableJava object before setting it as the background Android Boot Camp for Developers Using Java, 2nd Ed.

  33. 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, 2nd Ed.

More Related