[BLANK_AUDIO]Hi, I'm Adam Porter.And this is Programming MobileApplications for Android handheld systems.In the bubble view examples that we justsaw, I demonstrated a simple kind ofanimation.I took a single view, and I changed someof its properties.Specifically, its location, andorientation, and I did this overa period of time.Animations like this are fairly common.Applications often animate changes tothing to properties of a view likeit's size, it's position, it'stransparency, it's orientation,and more.To make animation easier Android providesseveral different view animation supportclasses and three that we'll talk aboutnow are the Transition Drawable class foranimating a transition between two views,the Animation Drawable for creatingframe-by-frame animations, andthe Animation class for creating tweenanimations, where you specify certainframes or moments in the animation andAndroid interpolates or fillsin the points in between.Let's look at each of these classes one ata time.The first animation class we'll discuss isthe Transition Drawable.This class specifies a two layer drawable,and when it's displayed, the usersees the first layer, and then a bitlater, sees the second layer.Our example application is calledGraphics Transition Drawable, and thisapplication takes us backto the Graphics Shape Draw applicationsthat we saw earlier.But this time, instead displaying bothshapes at the same time, thisapplication first displays the leftmostcyan colored shape,which then fades into a display of therightmost magenta colored shape.Let's see how that works.So here's my device, and when I start upthe GraphicsTransition Drawable application you'll seethe first shape fading into the second.So here we go.Here's the first shape,and here's the second.So let's take a look at the source code.So here's the Graphics Transition Drawableapplication, open in the IDE.

Now I'll open the main activity.In OnCreate, this application loads atransition drawablefrom a file called shape_transition.xml.Let's open that file.This file defines a transition resource.Resources of this type can have up to twoitem tags, and each item tag describes onedrawable.In this case, the drawables are ourfamiliar cyan and magenta shapes.Now, back in the main activity, the codecalls set crossfade enabled with theparameter true,and this causes the first drawable tovisually fade into the second drawable.Next, the code sets the transition, as thedrawable for the image view, by callingset image drawable, and then finally, itcalls start on the transition,passing in a value of 5000 for theanimation's duration.The next kind of animation that we'll talkabout is the Animation Drawable.This drawable animates a series of otherdrawables,showing each one for some period of time.Our next example application is calledGraphics Frame Animation.This application uses an AnimationDrawable todisplay a kind of splash screen, whichitself presents a series of imagescountingdown to the start of the main application.Let's see what this does.[BLANK_AUDIO]So here's my device.When I start up the graphics frameanimation application, you'll see a seriesof images,counting down to a final image.Okay, let's get started.Nine, eight, seven, six, five,four, three, two, one, and finally, theimage we've allbeen waiting for.So let's go to the source code for thisapplication.So here's the Graphics Frame Animationapplication open in the IDE.Now I'll open the main activity and inOnCreate this application loads anAnimation Drawable from a file calledview_animation.xml.Andthen it sets that animation drawable asthe background on an image view.This code then stores that drawable in avariable called mAnim.

And before we go forward, let's take alook at the view_animation.xml file.So here's the view_animation.xml file andthis file defines an animation listresource.This resource contains a list of itemtags, where each tagrepresents a drawable, and in this case,the first drawable is just ablack screen, and that displays for onesecond, and this isfollowed by nine other images, each ofwhich is displayed also for one second.Now back in the main activity, the codewaits until the on window focus changedmethod is called, and this method iscalledwhen the applications window gains orloses focus.In this method the code first checkswhether the window iscurrently gaining focus and if it is itthen starts the animation.Next class is the animation class, andthis class is used to createanimations in which transformations areapplied to the contents of a view.Applications can play with the timing ofthese transformations tosequence and combine differenttransformationsto make more complex animations.The graphics Tween Animationapplication demonstrates the use of theanimation class.When this application runs, it displays abubble view andthen proceeds to animate a number ofchanges to that bubble.Let's see it in action.So here's my device.When I start up the Graphics TweenAnimation application you'll see thebubble, andthen you'll see a series oftransformations applied to that bubble.You'll see it fade in, rotate, move,change its size, and finally, fade out,and you'll also seethat the timing of these transformationsis not always linear.That is, some transformations will happenat a uniform pace,some will start slow and build up speed,some willstart fast and then reduce their speed,some will bothspeed up and slow down at different pointsin the animation.Now, I'll slow down the video here a

little bit, so youcan see these effects more clearly.So, here we go, first the bubble fades inandnext the bubble rotates twice, gettingfaster as it goes.Now the bubble will move, overshoot itsfinal position and then pull back a bit.After that, the bubble will shrink a bitbefore quickly doubling its size,and finally the bubble fades out of view,quicklyat first, and then more slowly near theend.Let's take a look at the source code forthis application.So here's the Graphics Tween Animationapplication open in the IDE.Now, I'll open the main activity.And this application sets the, callssetContentView, passing in the main.xmlfile.And then it finds an image view in thatlayout.And after that itreads an animation from theview_animation.xml filewhich is stored in the res/Anim directory.Here's the resource and nested within theset tag there are several other tags,each of which indicates a specifictransformation to be applied to the view.The first is an alpha transformation, theduration of the animation is threeseconds.It goes from an alpha of zero, orcompletely transparent, to analpha of one, completely opaque.The transformation also uses the linearinterpolator, so the effect is applieduniformly throughout the animation.The next tag is a rotate transformation.The duration is set to four seconds, butit'salso set to start only after three secondshave passed.So, the first transformationwill occur and finish, and then this onewill start up.This animation goes from 0 to 720 degrees,or two full turns,and its interpolator accelerates, orspeeds, up asthe animation proceeds and you can look atall theother tags on your own when we take abreak.Going back now to the main activity, let'sgo to the on window focus changed method.Again, this code checks to see if the

window iscurrently gaining focus, and if so, itstarts the animation.[BLANK_AUDIO]The last concept I'll talk about isproperty animation.The previous examples showed classes thatare designed toanimate a set of simple property changeson views.But sometimes, you want to animate morethan just those things and tosupport that, Android has developed asystemfor changing general ,properties ofgeneric objectsover a given period of time, andthis system of Property Animation hasseveral components.First, there is a Value Animator, and thisis the main class that controls theanimation.The Value Animator contains a timeinterpolator which determineshow values change as a function of time.For instance, over time do the changeshappen uniformly, do they speed up, slowdown, or use some combination of the two?Value Animator also defines a listenerinterfacecalled Animator Update Listener, and thisinterface definesthe on animation update method which getscalledeach time a new animation frame iscreated.And lastly, while Android knows how toanimate the values of common types, likeimagers or floats, it doesn't know how toanimate custom types that you create.So if you need to animate your own types,or animateexisting types in new ways you canimplement the Type Evaluator Interface.This interface defines anEvaluate method that gets called to settheanimation values at a particular point inthe animation.The last piece of property animation isthe Animator Set Class.This class allows you to combine animatorobjects, like the value animator we justdiscussed, into more complex animations.So let's look at some exampleapplications that make use of propertyanimation.The first of these applications is calledGraphics Value Animator, and thisapplication uses

a value animator to animate a change inthe background color of an image view.Let's watch this application.So here's my device.I'll now start up the graphics valueanimator application.And as you can see it presents a singlebutton labeled Animate.When I press that button, a red rectanglewill appear in the middle of thedisplay, and over a period of about tenseconds, thatrectangle will change color until it'sfinally blue.I'll press the button now.There's the red rectangle.And now let's watch as it slowly turnsblue.Let's open the source code and see how wedid that.So here's the graphics value animatorapplication open in the IDE.Now I'll open the main activity.This application starts by setting twointeger values, whichrepresent the starting and ending pointsfor the animation.The first value is the integerrepresentation of the color red.The second value is the integerrepresentation of the color blue.In OnCreate, the code creates a buttonthat will start the animation, and asyou see here, when the button is clicked,the start animation method is run.Let's look at that method.Here, the start animation method creates avalue animated object called anim,and it created that object by calling thevalue animators of object method.The first parameter for this method is atype evaluator, in this case the typeevaluator is actually a, an ARGB evaluatorobject, andthis class knows how to interpolate theintegerrepresentations of colors.The second and thirdparameters for the of object method arethe startingand ending points for the animation, thecolors red and blue.Next the code adds an Animator UpdateListener and that is going tobe called back each time new animationframes are createdand that code calls the Get Animated Valuemethod toretrieve the current color value, and thenit makes that color the background color

of the image view, which is shown in thelayout.And lastly this code sets the duration often seconds for the animation, and thenstarts the animation running.Let's also look at a second propertyanimation application, called GraphicsView Property Animator.This application will implement the sameapplicationwe created for the Graphics TweenAnimation application.You'll see a bubble that fades in,rotates, moves, resizes, and then fadesout.And this version of the application,however, will use the view propertyanimator class, which is a simplified kindof animator for just view properties.Let's see that application in action.Sohere's my device.And I'll start up the Graphics ViewProperty Animator application.And we'll watch as the bubble goes througha series of transformations.Here we go.[BLANK_AUDIO]Let's open up the source code for thisapplication.So here's the Graphics View PropertyAnimator application open in theIDE.Now I'll open the main activity.And let's scroll over to the on windowfocus changed method.When this method is called, theapplication insures that the activitywindow is gaining focus and if so, itcalls the runmethod of the fade in object, and thatfade in object isa runnable.Now inside its run method, its codecalls animate on the image view, whichreturns a view propertyanimator object.This object, or this class, uses afluent interface, like what we saw withthe notification area notifications.And so you can build an animation bytacking on various method calls.In this case, the next call is setduration to three seconds, thenset interpolator to the linearinterpolater, then a callto the alpha method to change thetransparency to fully opaque andthen a final call which tells the ViewProperty Animator that when this animation

ends it should invoke the run method ofanother runnable called rotate.And, as you can probably guess, thisrotaterunnable creates the rotation step of theanimation,and then it ends by calling the movementstep of theanimation, and this continues until all ofthe steps have been completed.Sothat's all for our lesson on graphics andanimation.See you next time for a lesson onmulti-touch and gestures.See you then.[BLANK_AUDIO]