Android View Properties & Animations

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

TextViewTextView

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 things1. A target object 2. A property3. 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

propertyvalues

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 FooObjectAnimator.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

propertyStart Value End Value

ObjectAnimator Uses 3 Things

View view = findViewById(R.id.text);

ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFF00FF00);

End Value

ObjectAnimator ValuesObjectAnimator.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:

1. Int2. Float3. Object4. PropertyValuesHolder

Animating different Types of values

• You’ll use ObjectAnimator mostly for float and int values.

1. Int2. Float3. Object4. 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 tandem1. Fade out several views 2. Slide in other views while fading them in.

• You could do separate animations by1. manually starting the animations at the right times 2. Using startDelays set on the various delayed

animations.

AnimatorSet

AnimatorSet allows you to choreograph animations that

1. play together, playTogether(Animator...)2. animations that play one after the

other, playSequentially(Animator...)3. or you can organically build up a set of

animations that play together, sequentially, or with specified delays

AnimatorSet playTogetherObjectAnimator 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 buildupObjectAnimator 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 itAnimatorSet 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></set>

Using XML AnimatorSet ResourceAnimatorSet 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);

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!

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.