Visual Effects in Android: A Guide to Animations

Bring your Android app to life with impressive animations! In this post, we show you how to create smooth movements and visual effects using XML code. Learn the basics and discover various types of animations that make your user interface more dynamic and interactive.

Basics of Animation in Android

Animations in Android applications involve creating movement and shape changes. The most common types of animations we consider here are:

1. Fade In Animation
2. Fade Out Animation
3. Cross Fading Animation
4. Blink Animation
5. Zoom In Animation
6. Zoom Out Animation
7. Rotate Animation
8. Move Animation
9. Slide Up Animation
10. Slide Down Animation
11. Bounce Animation
12. Sequential Animation
13. Together Animation

Example of Android Animation XML

To define animations, we create a directory named anim in the res folder where all XML files with animation logic are stored. A simple example of an XML animation file is:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="https://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

Explanation of Attributes:

• android:interpolator: Determines the speed of the animation. Here, an accelerating and decelerating interpolator is used.
• android:duration: The duration of the animation in milliseconds.
• android:fillAfter: Specifies whether the view should remain visible after the animation is completed.
• android:fromXScale and android:fromYScale: Starting scale of the animation.
• android:toXScale and android:toYScale: Ending scale of the animation.

Starting the Animation

To start an animation, we load the XML file using the AnimationUtils class and call the startAnimation() method on the UI element:

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sample_animation);
sampleTextView.startAnimation(animation);

Setting an Animation Listener

To respond to animation events such as start, end, or repeat, implement the AnimationListener:

animation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        // Animation starts
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // Animation ends
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // Animation repeats
    }
});

Examples of XML Animation Codes

Fade In Animation (fade_in.xml):

<alpha xmlns:android="https://schemas.android.com/apk/res/android"
  android:duration="1000"
  android:fromAlpha="0.0"
  android:toAlpha="1.0"
  android:fillAfter="true" />

Fade Out Animation (fade_out.xml):

<alpha xmlns:android="https://schemas.android.com/apk/res/android"
  android:duration="1000"
  android:fromAlpha="1.0"
  android:toAlpha="0.0"
  android:fillAfter="true" />

Blink Animation (blink.xml):

<alpha xmlns:android="https://schemas.android.com/apk/res/android"
  android:fromAlpha="0.0"
  android:toAlpha="1.0"
  android:duration="600"
  android:repeatMode="reverse"
  android:repeatCount="infinite" />

Zoom In Animation (zoom_in.xml):

<scale xmlns:android="https://schemas.android.com/apk/res/android"
  android:duration="1000"
  android:fromXScale="1.0"
  android:fromYScale="1.0"
  android:toXScale="3.0"
  android:toYScale="3.0"
  android:pivotX="50%"
  android:pivotY="50%"
  android:fillAfter="true" />

Zoom Out Animation (zoom_out.xml):

<scale xmlns:android="https://schemas.android.com/apk/res/android"
  android:duration="1000"
  android:fromXScale="1.0"
  android:fromYScale="1.0"
  android:toXScale="0.5"
  android:toYScale="0.5"
  android:pivotX="50%"
  android:pivotY="50%"
  android:fillAfter="true" />

Conclusion

With these basic animation techniques, you can significantly enhance the user interface of your Android application. By combining and adjusting these animations, you can create creative and user-friendly experiences. Experiment with the different attributes and find out which animations best suit your application!