Android Application Resources: Complete Animation Implementation Reference
Animation resources define two distinct animation types for Android applications:
- Property animation: Modifies object property values over a specified time period using the
Animatorframework - View animation: Supports two sub-types built on the view animation framework:
- Tween animation: Applies sequential transformations to a single graphic using the
Animationclass - Frame animation: Renders a sequence of drawable assets in order using
AnimationDrawable, similar to video playback
- Tween animation: Applies sequential transformations to a single graphic using the
Property Animation
XML-defined animations that modify target object properties (such as alpha value, background color, or position) over a configurable duration.
| Attribute | Details |
|---|---|
| File storage path | res/animator/<filename>.xml, filename acts as the resource ID |
| Compiled resource type | Resource pointer to ValueAnimator, ObjectAnimator, or AnimatorSet |
| Resource reference | In code: R.animator.<filename>; In XML: @[<package>:]animator/<filename> |
Syntax
The root element can be <set>, <objectAnimator>, or <animator>, with support for nested <set> elements to group animations:
<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"]/>
<animator
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>
<!-- Nested animation elements -->
</set>
</set>
Element Reference
<set>
Container for grouping animation elements, maps to AnimatorSet. Supports the android:ordering attribute to control playback sequence:
sequentially: Play animations in the order they are declaredtogether(default): Play all child animations simultaneously
<objectAnimator>
Animates a specific property of a target object, maps to ObjectAnimator. Key attributes:
android:propertyName: Required, name of the object property to animate (e.g.translationX,alpha,backgroundColor). Target objects are set programmatically after inflating the animation resource.android:valueTo: Required, end value of the animated property. Color values use 6-digit hex notation (e.g.#FF3366).android:valueFrom: Start value of the animated property. If omitted, the initial value is pulled from the property's getter method.android:duration: Animation length in milliseconds, default 300ms.android:startOffset: Delay in milliseconds afterstart()is called before animation begins.android:repeatCount: Number of animation repeats.-1for infinite loop, default 0 (no repeats).android:repeatMode: Behavior when animation reaches the end, only active ifrepeatCountis set to a positive integer or-1.reverseplays the animation backwards on each iteration,repeatrestarts from the beginning.android:valueType: SpecifyintTypefor integer values,floatType(default) for float values. Omit this attribute for color values, which are handled automatically by the framework.
<animator>
Base time-based animation without a tied target property, maps to ValueAnimator. Supports the same core attributes as <objectAnimator> except android:propertyName.
Example
Animation stored at res/animator/move_fade_anim.xml:
<set android:ordering="sequentially" xmlns:android="http://schemas.android.com/apk/res/android">
<set>
<objectAnimator
android:propertyName="translationX"
android:duration="600"
android:valueTo="500"
android:valueType="intType"/>
<objectAnimator
android:propertyName="translationY"
android:duration="600"
android:valueTo="400"
android:valueType="intType"/>
</set>
<objectAnimator
android:propertyName="alpha"
android:duration="400"
android:valueTo="0.9f"/>
</set>
Implementation code:
// Java
AnimatorSet animSet = (AnimatorSet) AnimatorInflater.loadAnimator(appContext, R.animator.move_fade_anim);
animSet.setTarget(targetView);
animSet.start();
// Kotlin
val animSet = AnimatorInflater.loadAnimator(appContext, R.animator.move_fade_anim) as AnimatorSet
animSet.apply {
setTarget(targetView)
start()
}
View Animation
The view animation framework supports tween and frame animations, both declarable via XML.
Tween Animation
XML-defined animations that apply transformations like rotation, fade, translation, and scaling to graphics.
| Attribute | Details |
|---|---|
| File storage path | res/anim/<filename>.xml, filename acts as the resource ID |
| Compiled resource type | Resource pointer to Animation |
| Resource reference | In code: R.anim.<filename>; In XML: @[<package>:]anim/<filename> |
Syntax
Root element can be <alpha>, <scale>, <translate>, <rotate>, or <set> for grouping animations:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true" | "false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float | percentage"
android:toXDelta="float | percentage"
android:fromYDelta="float | percentage"
android:toYDelta="float | percentage" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float | percentage"
android:pivotY="float | percentage" />
<set>
<!-- Nested animation elements -->
</set>
</set>
Element Reference
<set>
Container for tween animation elements, maps to AnimationSet:
android:interpolator: Interpolator resource to apply to all child animations, ifshareInterpolatoris true.android:shareInterpolator: Boolean, if true all child elements use the same interpolator defined on the set.
<alpha>
Fade in/out animation, maps to AlphaAnimation:
android:fromAlpha: Starting opacity, 0.0 = fully transparent, 1.0 = fully opaqueandroid:toAlpha: Ending opacity, same value range asfromAlpha
<scale>
Resize animation, maps to ScaleAnimation:
android:fromXScale/android:fromYScale: Starting size offset on X/Y axis, 1.0 = original sizeandroid:toXScale/android:toYScale: Ending size offset on X/Y axisandroid:pivotX/android:pivotY: Fixed anchor point for scaling, relative to the view's bounds.
<translate>
Position shift animation, maps to TranslateAnimation. Values support three formats: raw pixel values, percentage relative to the view (e.g. 5%), percentage relative to the parent container (e.g. 5%p):
android:fromXDelta/android:fromYDelta: Starting position offsetandroid:toXDelta/android:toYDelta: Ending position offset
<rotate>
Rotation animation, maps to RotateAnimation:
android:fromDegrees: Starting rotation angle in degreesandroid:toDegrees: Ending rotation angle in degreesandroid:pivotX/android:pivotY: Rotation anchor point, supports same value formats as translate attributes.
Example
Animation stored at res/anim/shrink_rotate_exit.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.3"
android:fromYScale="1.0"
android:toYScale="0.7"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="800" />
<set
android:interpolator="@android:anim/accelerate_interpolator"
android:startOffset="800">
<scale
android:fromXScale="1.3"
android:toXScale="0.0"
android:fromYScale="0.7"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="450" />
<rotate
android:fromDegrees="0"
android:toDegrees="-30"
android:pivotX="50%"
android:pivotY="50%"
android:duration="450" />
</set>
</set>
Implementation code:
// Java
ImageView iconView = findViewById(R.id.app_icon);
Animation shrinkRotateExit = AnimationUtils.loadAnimation(this, R.anim.shrink_rotate_exit);
iconView.startAnimation(shrinkRotateExit);
// Kotlin
val iconView: ImageView = findViewById(R.id.app_icon)
val shrinkRotateExit = AnimationUtils.loadAnimation(this, R.anim.shrink_rotate_exit)
iconView.startAnimation(shrinkRotateExit)
Interpolators
Interpolators are animation modifiers that control the rate of change of animation values, enabling effects like acceleration, deceleration, bounce, and overshoot. Interpolators are applied to animation elements via the android:interpolator attribute, which references an interpolator resource.
Built-in Android interpolators and their resource IDs:
| Interpolator Class | Resource ID |
|---|---|
AccelerateDecelerateInterpolator |
@android:anim/accelerate_decelerate_interpolator |
AccelerateInterpolator |
@android:anim/accelerate_interpolator |
AnticipateInterpolator |
@android:anim/anticipate_interpolator |
AnticipateOvershootInterpolator |
@android:anim/anticipate_overshoot_interpolator |
BounceInterpolator |
@android:anim/bounce_interpolator |
CycleInterpolator |
@android:anim/cycle_interpolator |
DecelerateInterpolator |
@android:anim/decelerate_interpolator |
LinearInterpolator |
@android:anim/linear_interpolator |
OvershootInterpolator |
@android:anim/overshoot_interpolator |
Usage example:
<set android:interpolator="@android:anim/accelerate_interpolator">
<!-- Animation elements -->
</set>
Custom Interpolators
Customize built-in interpolator parameters by declaring them in XML.
| Attribute | Details |
|---|---|
| File storage path | res/anim/<filename>.xml, filename acts as the resource ID |
| Compiled resource type | Resource pointer to the corresponding interpolator instance |
| Resource reference | In XML: @[<package>:]anim/<filename> |
Supported Custom Interpolator Elements
<accelerateDecelerateInterpolator>: Slow start and end, fast middle, no configurable attributes<accelerateInterpolator>: Slow start, increasing speed, configurableandroid:factor(acceleration rate, default 1)<anticipateInterpolator>: Reverse movement first, then forward acceleration, configurableandroid:tension(default 2)<anticipateOvershootInterpolator>: Reverse movement, forward overshoot, then settle, configurableandroid:tension(default 2) andandroid:extraTension(multiplier, default 1.5)<bounceInterpolator>: Bounce effect at end of animation, no configurable attributes<cycleInterpolator>: Repeat animation for specified number of cycles, configurableandroid:cycles(count, default 1)<decelerateInterpolator>: Fast start, decreasing speed, configurableandroid:factor(deceleration rate, default 1)<linearInterpolator>: Constant speed, no configurable attributes<overshootInterpolator>: Forward overshoot then settle, configurableandroid:tension(default 2)
Example
Custom overshoot interpolator stored at res/anim/high_tension_overshoot.xml:
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:tension="6.5"
/>
Applied to a scale animation:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/high_tension_overshoot"
android:fromXScale="1.0"
android:toXScale="3.5"
android:fromYScale="1.0"
android:toYScale="3.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="800" />
Frame Animation
XML-defined animation that renders a sequence of drawable assets in order, like a flipbook.
| Attribute | Details |
|---|---|
| File storage path | res/drawable/<filename>.xml, filename acts as the resource ID |
| Compiled resource type | Resource pointer to AnimationDrawable |
| Resource reference | In code: R.drawable.<filename>; In XML: @[<package>:]drawable/<filename> |
Syntax
Root element is <animation-list> containing <item> elements for each frame:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource_name"
android:duration="integer" />
</animation-list>
Element Reference
<animation-list>: Required root element,android:oneshotboolean:truefor single playthrough,falsefor infinite loop.<item>: Single animation frame,android:drawableis the drawable asset for the frame,android:durationis display time in milliseconds.
Example
Animation stored at res/drawable/loading_spinner_anim.xml:
<?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/loading_frame1" android:duration="150" />
<item android:drawable="@drawable/loading_frame2" android:duration="150" />
<item android:drawable="@drawable/loading_frame3" android:duration="150" />
<item android:drawable="@drawable/loading_frame4" android:duration="150" />
</animation-list>
Implementation code:
// Java
ImageView spinnerView = findViewById(R.id.loading_spinner);
spinnerView.setBackgroundResource(R.drawable.loading_spinner_anim);
Drawable loadingAnim = spinnerView.getBackground();
if (loadingAnim instanceof Animatable) {
((Animatable) loadingAnim).start();
}
// Kotlin
val spinnerView: ImageView = findViewById(R.id.loading_spinner)
spinnerView.setBackgroundResource(R.drawable.loading_spinner_anim)
val loadingAnim = spinnerView.background
if (loadingAnim is Animatable) {
loadingAnim.start()
}