Android View Properties & Animations

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.

Pre-honeycomb Animation TextView TextView

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.

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!

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.

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);

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

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.

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

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.

3 ways to Animate ObjectAnimator ViewAnimator ViewPropertyAnimator

ObjectAnimator

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

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

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

ObjectAnimator Target 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.

ObjectAnimator Property The class updates the object property accordingly when a new value is computed for the animation. Property needs to be exposed on the target object via setter and getter methods.

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

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.

Animating Foo ObjectAnimator.ofInt(tom, “foo”, 100); public class Tom { private int mFoo; public void setFoo(int foo) { mFoo = foo; } public int getFoo() { return mFoo;

ObjectAnimator Property 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 object and set values during the animation.

ObjectAnimator Property Failure 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. 

ObjectAnimator Values 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).

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

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

ObjectAnimator Values ObjectAnimator.ofInt(Object target, String propertyName, int... values) int… represents a Java vararg

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

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

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

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

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

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.

Animation Listeners Listen to animation lifecycle events by implementing the AnimatorListener interface. anim.addListener(new Animator.AnimatorListener() { public void onAnimationStart(Animator animation) {} public void onAnimationEnd(Animator animation) { // do something when the animation is done } public void onAnimationCancel(Animator animation) {} public void onAnimationRepeat(Animator animation) {} });

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.

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

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.

Background Animator in XML <?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns: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" />

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.

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

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 startDelays set on the various delayed animations. 

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

AnimatorSet playTogether ObjectAnimator fadeOut = ObjectAnimator.ofFloat(v1, "alpha", 0f); ObjectAnimator mover = ObjectAnimator.ofFloat(v2, "translationX", -500f, 0f); ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v2, "alpha", 0f, 1f); AnimatorSet animSet = new AnimatorSet(); animSet.playTogether(fadeOut, mover, fadeIn); v1 v2

AnimatorSet playSequentially() ObjectAnimator fadeOut = ObjectAnimator.ofFloat(v1, "alpha", 0f); ObjectAnimator mover = ObjectAnimator.ofFloat(v2, "translationX", -500f, 0f); ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v2, "alpha", 0f, 1f); AnimatorSet animSet = new AnimatorSet(); animSet.playSequentially(fadeOut, mover, fadeIn); v1 v2

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

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>

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(new ArgbEvaluator()); set.setTarget(view); set.start();

ValueAnimator

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.

ViewPropertyAnimator

ViewPropertyAnimator More limited than ObjectAnimator Can only animate View properties Only allows a subset of standard View properties Less capabilities/flexibility Way less overhead than ObjectAnimator. This means ViewPropertyAnimators perform better than ObjectAnimators. Extremely easy to read

ViewPropertyAnimator Uses a single animator to animate several View properties in parallel. Calculates animated values for properties Sets values directory on target View. Properly invalidates the View

ViewPropertyAnimator Example myView.animate().alpha(0); or myView.animate().x(500).y(500); Extremely short and easy to read.

Things to note: animate() animate(): The magic of the system begins with a call to the new method animate() on the View object. This returns an instance of ViewPropertyAnimator, on which other methods are called which set the animation properties.

Things to note: Auto-Start Note that we didn’t actually start() the animations in the previous example. Starting the animations is implicit. As soon as you’re done declaring them, they will all begin together. 

Things to note: Fluency ViewPropertyAnimator has a Fluent interface Allows you to chain method calls together in a very natural way and issue a multi-property animation command as a single line of code. So all of the calls such as x() and y() return the ViewPropertyAnimator instance, on which you can chain other method calls. 

ViewPropertyAnimator Methods cancel() You can cancel() a running ViewPropertyAnimator. setStartDelay() You can set a startDelay on the ViewPropertyAnimator, just like the startDelay of the other Animator classes. start() ViewPropertyAnimators start automatically; however, if you just want to run a single animation, or want to make sure it starts immediately, at the time of construction, you can call start() to avoid that intervening delay. See more here

XML Resource for ViewPropertyAnimator To my knowledge you can’t declare XML resources for ViewPropertyAnimators. You can only use ViewPropertyAnimators programmatically in code.

Final Notes

Important facts of Animations All animations discussed in class were introduced in Honeycomb and have slowly evolved. Different SDK version support different capabilities. Check the docs to see what works for your SDK level.

Important facts of Animations Animations are possible in Pre-Honeycomb; however they are only drawn differently. They don’t actually move (events still behave on original position) NineOldAndroids is an Android library for using the Honeycomb animation API on all versions of the platform back to 1.0! I’ve never tried this, but have heard good things.

Animation Resources Animation in Honeycomb Introducing ViewPropertyAnimator Android 4.0 Graphics and Animations Android ViewPropertyAnimator documentation Property Animation: A good Overall Summary of all Animations in Android.