Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Android Application Resources: Complete Animation Implementation Reference

Tech 1

Animation resources define two distinct animation types for Android applications:

  • Property animation: Modifies object property values over a specified time period using the Animator framework
  • View animation: Supports two sub-types built on the view animation framework:
    • Tween animation: Applies sequential transformations to a single graphic using the Animation class
    • Frame animation: Renders a sequence of drawable assets in order using AnimationDrawable, similar to video playback

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 declared
  • together (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 after start() is called before animation begins.
  • android:repeatCount: Number of animation repeats. -1 for infinite loop, default 0 (no repeats).
  • android:repeatMode: Behavior when animation reaches the end, only active if repeatCount is set to a positive integer or -1. reverse plays the animation backwards on each iteration, repeat restarts from the beginning.
  • android:valueType: Specify intType for 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, if shareInterpolator is 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 opaque
  • android:toAlpha: Ending opacity, same value range as fromAlpha

<scale>

Resize animation, maps to ScaleAnimation:

  • android:fromXScale / android:fromYScale: Starting size offset on X/Y axis, 1.0 = original size
  • android:toXScale / android:toYScale: Ending size offset on X/Y axis
  • android: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 offset
  • android:toXDelta / android:toYDelta: Ending position offset

<rotate>

Rotation animation, maps to RotateAnimation:

  • android:fromDegrees: Starting rotation angle in degrees
  • android:toDegrees: Ending rotation angle in degrees
  • android: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, configurable android:factor (acceleration rate, default 1)
  • <anticipateInterpolator>: Reverse movement first, then forward acceleration, configurable android:tension (default 2)
  • <anticipateOvershootInterpolator>: Reverse movement, forward overshoot, then settle, configurable android:tension (default 2) and android:extraTension (multiplier, default 1.5)
  • <bounceInterpolator>: Bounce effect at end of animation, no configurable attributes
  • <cycleInterpolator>: Repeat animation for specified number of cycles, configurable android:cycles (count, default 1)
  • <decelerateInterpolator>: Fast start, decreasing speed, configurable android:factor (deceleration rate, default 1)
  • <linearInterpolator>: Constant speed, no configurable attributes
  • <overshootInterpolator>: Forward overshoot then settle, configurable android: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:oneshot boolean: true for single playthrough, false for infinite loop.
  • <item>: Single animation frame, android:drawable is the drawable asset for the frame, android:duration is 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()
}

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.