Exploring Android Animation Frameworks

Frame-by-Frame Animation

Frame-by-frame animation renders a sequence of drawable resources in rapid succcession to create the illusion of motion. This approach is best suited for simple, repeating graphical sequences like loading spinners or step progressions.

Create an animation-list resource in the drawable directory:

<?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/step_one" android:duration="150"/>
    <item android:drawable="@drawable/step_two" android:duration="150"/>
    <item android:drawable="@drawable/step_three" android:duration="150"/>
    <item android:drawable="@drawable/step_four" android:duration="150"/>
</animation-list>

Assign the list to an ImageView background and control playback programmatically:

public class AnimationDemoActivity extends AppCompatActivity {
    private AnimationDrawable frameSequence;
    private ImageView visualTarget;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_demo);

        visualTarget = findViewById(R.id.target_image);
        frameSequence = (AnimationDrawable) visualTarget.getBackground();

        visualTarget.setOnClickListener(v -> {
            if (frameSequence.isRunning()) {
                frameSequence.stop();
                visualTarget.setAlpha(1.0f);
            } else {
                frameSequence.start();
                visualTarget.setAlpha(0.8f);
            }
        });
    }
}

View Animation (Tweened)

View animation modifies how a widget is rendered without altering its actual layout bounds. It supports translation, scaling, rotation, and alpha blending. These transitions can be defined declaratively or instantiated at runtime.

Declarative Configuration (XML)

Place transition definitions in the res/anim folder. The following example combines horizontal movement with a fade affect:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1200"
        android:fromXDelta="0%"
        android:toXDelta="100%" />
    <alpha
        android:duration="1200"
        android:fromAlpha="1.0"
        android:toAlpha="0.2" />
</set>

Programmatic Implementation

Runtime instantiation allows dynamic parameter adjustment. The following snippet demonstrates how to construct and apply a rotation transition with customizable repetition:

public class ViewAnimationController {
    private final View renderView;

    public ViewAnimationController(View targetView) {
        this.renderView = targetView;
    }

    public void triggerSpinTransition(float startAngle, float endAngle) {
        RotateAnimation spinEffect = new RotateAnimation(
                startAngle, endAngle,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);

        spinEffect.setDuration(1800);
        spinEffect.setRepeatCount(Animation.INFINITE);
        spinEffect.setRepeatMode(Animation.RESTART);
        spinEffect.setInterpolator(new AccelerateDecelerateInterpolator());

        renderView.startAnimation(spinEffect);
    }
}

Property Animation System

Unlike view animation, the property animation framework directly modifies object properties, resulting in actual layout changes. This system supports complex sequencing, reverse playback, and property binding.

Single Property Transition

Use ObjectAnimator to modify specific view attributes. The code below animates vertical translation while tracking lifecycle events:

public class PropertyAnimationExample extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property_demo);

        TextView contentLabel = findViewById(R.id.content_label);

        ObjectAnimator verticalShift = ObjectAnimator.ofFloat(
                contentLabel, "translationY", 0f, -150f, 0f);
        verticalShift.setDuration(2000);
        verticalShift.setInterpolator(new BounceInterpolator());

        verticalShift.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                contentLabel.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                contentLabel.setTranslationY(0f);
            }
        });

        verticalShift.start();
    }
}

Composite Animations

Combine multiple property transitions using AnimatorSet. Instead of chaining separate objects, PropertyValuesHolder allows batching transformations for better performance:

public void executeComplexTransition(View target) {
    PropertyValuesHolder scaleXHolder = PropertyValuesHolder.ofFloat("scaleX", 1f, 0.5f, 1f);
    PropertyValuesHolder scaleYHolder = PropertyValuesHolder.ofFloat("scaleY", 1f, 0.5f, 1f);
    PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofFloat("alpha", 1f, 0.3f, 1f);

    ObjectAnimator composite = ObjectAnimator.ofPropertyValuesHolder(
            target, scaleXHolder, scaleYHolder, alphaHolder);
    composite.setDuration(2200);
    composite.setStartDelay(300);
    composite.start();
}

XML-Defined Property Animations

Property animations can also be externalized in the res/animator directory. This promotes reuse across activities:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="180"
    android:valueType="floatType" />

Load and apply it using AnimatorInflater.loadAnimator(context, R.animator.rotation_transition).

Understanding Screan Metrics and Layout Parameters

Pixels vs. Points

px (Pixels): Represents raw screen dots. Layouts built exclusively with pixels scale poorly across devices with varying screen densities.
pt (Points): A fixed physical unit (1 pt = 1/72 inch). Primarily used in print design and rarely recommended for mobile UI due to lack of density awareness.

Density-Independent and Scaled Pixels

dp (Density-independent Pixels): Scales relative to a 160 dpi baseline. The system automatically converts dp to px based on the device's logical density, ensuring consistent physical sizing across hardware.
sp (Scaled Pixels): Extends dp by respecting the user's font size preference. Always use sp for text dimensions to support accessibility settings.

Dynamic Layout Configuration with LayoutParams

LayoutParams acts as a container for positioning and sizing constraints. When constructing UI hierarchies programmatically, these parameters dictate how child views interact with their parent containers.

public class DynamicLayoutBuilder extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FrameLayout rootContainer = new FrameLayout(this);
        FrameLayout.LayoutParams rootParams = new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        rootContainer.setLayoutParams(rootParams);

        Button actionButton = new Button(this);
        actionButton.setText("Execute");
        actionButton.setTextColor(0xFFFFFFFF);
        actionButton.setBackgroundColor(0xFF2196F3);

        // Convert 200dp to pixels dynamically
        int widthPx = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 200, getResources().getDisplayMetrics());
        int heightPx = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 80, getResources().getDisplayMetrics());

        FrameLayout.LayoutParams buttonConstraints = new FrameLayout.LayoutParams(widthPx, heightPx);
        buttonConstraints.gravity = Gravity.CENTER;

        rootContainer.addView(actionButton, buttonConstraints);
        setContentView(rootContainer);
    }
}