Android View Properties & Animations

1. Android View Properties & Animations

2. Animations Pre-Honeycomb • Pre-Honeycomb, the world of animations in Android was quite different. • When you animated a view, you only changed how it was drawn. • Although an animated View visually looked different, it’s location and orientation remained the same.

3. Pre-honeycomb Animation TextView TextView

4. Pre-Honeycomb Animations • Animations were done by visually drawing the view to appear different. • This was done because at the time, there were no setter or getter methods for changing view properties. • Some properties didn’t even exist at this time.

5. Post-Honeycomb Animations • With Honeycomb, several properties to View were added that allowed the View itself to actually change. • Now, when a View is animated it is not only drawn in a new position, but is also actually located there as well. • Click events actually work as one would expect!

6. New View Properties • translationX and translationY: These properties control where the View is located as a delta from its left and top coordinates which are set by its layout container. You can run a move animation on a button by animating these, like this: ObjectAnimator.ofFloat(view, "translationX", 0f, 100f);. • rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation) and 3D around the pivot point. • scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point.

7. New View Properties • pivotX and pivotY: These properties control the location of the pivot point, around which the rotation and scaling transforms occur. By default, the pivot point is centered at the center of the object. • x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left/top and translationX/translationY values. • alpha: This value is 1 (opaque) by default, with a value of 0 representing full transparency (i.e., it won't be visible). To fade a View out, you can do this: ObjectAnimator.ofFloat(view, "alpha", 0f);

8. View Properties methods • All of the new View properties are accessible via setter and getter methods on the View itself. • For example, • setRotation() • getRotation()

9. View Property methods • The getter and setter methods make these properties available to the Android Animation System. • These methods also take care to call invalidate() in order to render correctly.

10. Animation Demos • http://youtu.be/-9nxx066eHE

11. Animations in Android • The animation system released in Honeycomb, allows developers to animate any target object, property, or data structure. • This allows Views to animate opacity, background color, position, scale, etc.

12. 3 ways to Animate • ObjectAnimator • ViewAnimator • ViewPropertyAnimator

13. ObjectAnimator

14. ObjectAnimator Takes 3 things • A target object • A property • 1 or more values

15. ObjectAnimator • The constructors of this class take parameters to define the target objectthat will be animated as well as the name of the object propertythat will be animated. View view = findViewById(R.id.text); ObjectAnimatoranim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);

16. ObjectAnimator Uses 3 Things View view = findViewById(R.id.text); ObjectAnimatoranim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00); target property values

17. ObjectAnimatorTarget • The ObjectAnimator accepts an object of type Object for the target object. • That means you can animate any type of object. • Views, data structures, etc.

18. ObjectAnimatorProperty • The class updates the object propertyaccordingly when a new value is computed for the animation. • Property needs to be exposed on the target object via setter and getter methods.

19. Setter and Getter methods • If you animate a target object’sproperty you are implicitly declaring a contract that the object has a setter and getter method for the property.

20. Animating Foo • ObjectAnimator.ofInt(tom, “foo”, 100); • Here I am implicitly agreeing that the Object tom has a method setFoo() and getFoo() and that the setter and getter methods handle int types.

21. Animating Foo ObjectAnimator.ofInt(tom, “foo”, 100); publicclass Tom { privateintmFoo; publicvoidsetFoo(int foo){ mFoo= foo; } publicintgetFoo(){ returnmFoo; } }

22. ObjectAnimatorProperty Success • If your target object providers setter and getter methods for the property, then the animation will be able to find those setter/getter functions on the target objectand set values during the animation.

23. ObjectAnimatorPropertyFailure • If the functions do not exist or do not accept the type of value given, then the animation will fail at runtime, since it will be unable to locate the functions it needs. 

24. ObjectAnimatorValues • A single value implies that that value is the one being animated to. • Two values imply a starting and ending values. • More than two values imply a starting value, values to animate through along the way, and an ending value (these values will be distributed evenly across the duration of the animation).

25. ObjectAnimator Uses 3 Things View view = findViewById(R.id.text); ObjectAnimatoranim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00); target property Start Value End Value

26. ObjectAnimator Uses 3 Things View view = findViewById(R.id.text); ObjectAnimatoranim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFF00FF00); End Value

27. ObjectAnimatorValues ObjectAnimator.ofInt(Objecttarget, StringpropertyName, int... values) int… represents a Java vararg

28. Java Varagrs… • The … is a special language construct that allows multiple arguments to be passed into a method as an array • This was used with AsyncTasks

29. Animating different Types of values • ObjectAnimator supports animating 4 Types of values: • Int • Float • Object • PropertyValuesHolder

30. Animating different Types of values • You’ll use ObjectAnimator mostly for float and int values. • Int • Float • Object • PropertyValuesHolder

31. Choosing which type of value to animate? • If the value is a whole number, use int • Translating x and y • Colors (0xFFFF0000) • If the value is NOT a whole number, use float • Alpha (0f – 1f) • Scale

32. You try! • Use the example to animate the alpha of the View instead of the backgroundColor.

33. Other Animation Attributes • setStartDelay(long): This property controls how long the animation waits after a call to start() before it starts playing. • setRepeatCount(int) and setRepeatMode(int): These functions control how many times the animation repeats and whether it repeats in a loop or reverses direction each time. • setInterpolator(TimeInterpolator): This object controls the timing behavior of the animation. By default, animations accelerate into and decelerate out of the motion, but you can change that behavior by setting a different interpolator.

34. Animation Listeners • Listen to animation lifecycle events by implementing the AnimatorListener interface. anim.addListener(newAnimator.AnimatorListener(){ publicvoidonAnimationStart(Animator animation){} publicvoidonAnimationEnd(Animator animation){ // do something when the animation is done } publicvoidonAnimationCancel(Animator animation){} publicvoidonAnimationRepeat(Animator animation){} });

35. Animation Listener Use Case • When animating a View’s alpha you can use the onAnimationEnd() callback to set the visibility of a View to INVISIBLE/GONE when its alpha is 1 and you’re animating to 0. • When animating a View’s alpha you can use the onAnimationStart() callback to set the visibility of a View to VISIBLE when its alpha is 0 and you’re animating to 1.

36. Defining Animations in XML • You can create XML animation resources for your ObjectAnimators • Place resources files in res/animators

37. ObjectAnimator in XML <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> See here for more details.

38. Background Animator in XML <?xml version="1.0" encoding="utf-8"?> <objectAnimatorxmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="backgroundColor" android:valueFrom="#FF0000" android:valueTo="#00FF00" android:duration="3000" android:repeatCount="infinite" android:repeatMode="reverse" />

39. ObjectAnimator Restriction! • You must have a public "set" function on your object that corresponds to the property name and takes the appropriate type. • If you use only one value, you’re asking the animation system to derive the starting value from the object, so you must also have a public "get" function which returns the appropriate type.

40. Loading Animations from XML ObjectAnimatoranim=AnimatorInflator.loadAnimator(this,R.animator.color_animator); anim.setTarget(view); anim.start();

41. Sets of Animations •  Suppose you want several animations running in tandem • Fade out several views • Slide in other views while fading them in.  • You could do separate animations by • manually starting the animations at the right times • Using startDelaysset on the various delayed animations. 

42. AnimatorSet AnimatorSet allows you to choreograph animations that • play together, playTogether(Animator...) • animations that play one after the other, playSequentially(Animator...) • or you can organically build up a set of animations that play together, sequentially, or with specified delays

43. AnimatorSetplayTogether ObjectAnimatorfadeOut=ObjectAnimator.ofFloat(v1,"alpha",0f); ObjectAnimator mover =ObjectAnimator.ofFloat(v2,"translationX",-500f,0f); ObjectAnimatorfadeIn=ObjectAnimator.ofFloat(v2,"alpha",0f,1f); AnimatorSetanimSet=newAnimatorSet(); animSet.playTogether(fadeOut, mover,fadeIn); v1 v2

44. AnimatorSetplaySequentially() ObjectAnimatorfadeOut=ObjectAnimator.ofFloat(v1,"alpha",0f); ObjectAnimator mover =ObjectAnimator.ofFloat(v2,"translationX",-500f,0f); ObjectAnimatorfadeIn=ObjectAnimator.ofFloat(v2,"alpha",0f,1f); AnimatorSetanimSet=newAnimatorSet(); animSet.playSequentially(fadeOut, mover,fadeIn); v1 v2

45. AnimatorSet organic buildup ObjectAnimatorfadeOut=ObjectAnimator.ofFloat(v1,"alpha",0f); ObjectAnimator mover =ObjectAnimator.ofFloat(v2,"translationX",-500f,0f); ObjectAnimatorfadeIn=ObjectAnimator.ofFloat(v2,"alpha",0f,1f); //fade out v1 and then slide in v2 while fading it AnimatorSetanimSet=newAnimatorSet().play(mover).with(fadeIn).after(fadeOut);; animSet.start(); v1 v2

46. AnimatorSet in XML resource <set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ...Specify another AnimatorSet </set> </set>

47. Using XML AnimatorSet Resource AnimatorSet set =(AnimatorSet)AnimatorInflater.loadAnimator(this,R.animator.colornfade_animator); //have to find the color objectanimator and specify the evaluator ((ObjectAnimator)set.getChildAnimations().get(0)).setEvaluator(newArgbEvaluator()); set.setTarget(view); set.start();

48. ValueAnimator

49. Used less than ObjectAnimator • ObjectAnimator is a subclass of ValueAnimator. • You won’t use ValueAnimator unless the object doesn’t expose a setter or getter method for the property you want to animate. • Read here for how to use them.

50. ViewPropertyAnimator