Loading...

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.


Android XML Animation Project Structure


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.

Android XML Animations Examples

Download Complete Example Project



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