Android XML Animations Examples

An animation is the process of creating shape and motion change. Implementing animations in your android app interface will give high quality feel to your application. Animation in android can be possible from many ways. In android there are mainly two types of animations which are: property animation and view animation, and under view animation there are two types of animations which are in android view animation framework: Tween animation and Frame animation. In property animation you can make an animation defined in XML by modifying an object property values, over a set period of time. View animation supports both frame and tween animations and these both animations are declared in XML file. Tween animation performs fadein, fadeout, rotating, moving and stretching of a graphic by defining in XML. And frame animation shows a sequence of objects.

In this tutorial you will learn to implement animations in your android application with one easy and widely used method of creating animation in android that is view animation (tween animation). This tween animation has some parameters like start value, end value, size, duration and so on. All XML animation resource file should be located in res/anim/animationtypename.xml. To load animation in our android application we have to call a static function loadAnimation() of the class AnimationUtils in your java file.

Related:
Android Bottom/Footer Menu Example with SlideUp Animation
Animated Android Folding Tab Bar Menu Example
Material Ripple Effect/Animation in Android

There are many animation can be implement in android app or game like fading, zooming, moving, rotating, sliding, cross fading, blink, bounce, together, sequential, and many more animations. In this Android XML Animations tutorial we will look up on:

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

Android Animation Examples: Working with XML Animation

First let’s create a animation resource directory under res fonder names anim to keep all animation logic in XML files. Following is the one of the sample example of android animation logic in XML file, where we have to set different properties like shareInterpolator, fromXDelta, toXDelta, fromYDelta, toYDelta, duration with different values. Except shareInterpolator all are inside translate.

sample_xml_animation.xml

Load Animation in Android App Screen

To display animation to the users in app screen you have to load from java file. For that you need to use the Animation class. And load the XML animation logic using AnimationUtils class by calling the loadAnimation() function, which will look like below.

Android XML Animation Project Structure

Below is the android XML project structure, where you see the animation xml file, java activity file and android XML layout file.

Activity_main.xml File

Open your activity_main.xml file and add the different buttons to show different animation when different buttons are clicked with a unique id and onClick attribute. Activity_main.xml file will look like below.

res/layout/activity_main.xml

Main Activity.java File

Following is the complete code of java activity file. Here is no more code just implement onClick button to open new activity and to show different animation when button is clicked.

src/MainActivity.java

AndroidManifest.xml File

In android manifest file we just add different activity name inside <application>  like below.

AndroidManifest.xml

Android XML Animation Layout File

Create a new XML layout file called android_xml_animation_layout.xml and add an ImageView inside RelativeLayout with an id, layout_width=100dp and layout_height=100dp, layout_gravity=center & src attributes like below.

res/layout/android_xml_animation_layout.xml

Android Animation Examples Java and XML Code

Here I have provide you sample XML and java code for most common android animations like fade in, fade out, zoom in, zoom out, move, rotate, blink, slide up, slide down, bounce and sequential animation.

Zoom In Android Animation

For the zoom in animation you can use <scale> tag with scale values like pivotX and pivotY for to start zoom from where in the screen use 50% in both to perform zoom in from center of screen. Likewise use other attributes like duration, fromXScale, fromYScale, toXScale and toYScale.

res/anim/zoom_in_animation.xml

And in java activity file load animation using loadAnimation() function.

src/AndroidZoomInAnimationActivity.java

Zoom Out Animation

Zoom out animation in android is like zoom in animation but the value of toXScale and toYScale are lesser than the value of fromXScale and fromYScale.
res/anim/zoom_out_animation.xml

Java activity file is look like below.

src/AndroidZoomOutAnimationActivity.java

Fade In Animation

For fade in animation use <alpha>  tag with attributes like duration, fromAlpha and toAlpha. Alpha values go from o to 1.
res/anim/fade_in_animation.xml

Now you need to load this from java activity file using loadAnimation() function. Java activity file looks like below.
src/AndroidFadeInAnimationActivity.java

Fade Out Animation

Fade out animation is exactly same to the fade in animation, but the value of alpha is opposite from 1 to 0.
res/anim/fade_out_animation.xml

Java activity file of fade out animation is looks like below.
src/AndroidFadeOutAnimationActivity.java

Move Animation

Move animation is used in order to change position of object using <translate> tag. In translate tag you need to use fromXDelta, toXDelta and duration attributes like below.
res/anim/move_animation.xml

Following is the code of java activity file of move animation.
src/AndroidMoveAnimationActivity.java

Rotate Animation

For rotate animation uses <rotate>  tag with different attributes like duration, fromDegrees, interpolater, pivotX, pivotY, startOffset and toDegrees.
res/anim/rotate_animation.xml

Java activity file
src/AndroidRotateAnimationActivity.java

Blink Animation

Blink animation is animating fade in and fade out in repetitive fashion. For that use tag with fromAlpha, toAlpha, interpolator, duration, repeatMode, repeatCount attributes, android:repeatMode="reverse" and android:repeatCount="infinite".
res/anim/blink_animation.xml

Java activity file looks like below.
src/AndroidBlinkAnimationActivity.java

Slide Up Animation

For slide up animation uses <translate> tag. In translate tag add duration, fromXDelta and toYDelta attributes.
res/anim/slide_up_animation.xml

Java code for slide up animation

src/ AndroidSlideUpAnimationActivity.java

Slide Down Animation

For slide down animation uses <translate> tag like in slide up animation but the value of toYDelta is negative.
res/anim/slide_down_animation.xml

And java activity file
src/AndroidSlideDownAnimationActivity.java

Bounce Animation

For bounce animation uses <translate>  tag. And also uses duration, fromXDelta and toXDelta attributes.
res/anim/bounce_animation.xml

Java Activity file
src/AndroidBounceAnimationActivity.java

Sequential Animation

Sequential animation means perform multiple animation in a sequential manner. For sequential android:startOffset is used from the translation to keep them sequential.
res/anim/sequential_animation.xml

Java activity file of sequential animation is looks like below.
src/AndroidSequentialAnimationActivity.java

That’s all. Above are the different android XML animations examples. I hope you like this tutorial, if you have any question regarding this tutorial you can post in comment box.

Download Complete Example Project

You can download complete source code of this Android XML Animations Examples from GitHub.