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.

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.


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.


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.


AndroidManifest.xml File

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


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.


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.


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


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.

Java activity file is look like below.


Fade In Animation

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

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

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.

Java activity file of fade out animation is looks like below.

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.

Following is the code of java activity file of move animation.

Rotate Animation

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

Java activity file

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".

Java activity file looks like below.

Slide Up Animation

For slide up animation uses <translate> tag. In translate tag add duration, fromXDelta and toYDelta attributes.

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.

And java activity file

Bounce Animation

For bounce animation uses <translate>  tag. And also uses duration, fromXDelta and toXDelta attributes.

Java Activity file

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.

Java activity file of sequential animation is looks like below.

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.

Post a Comment

Powered by Blogger.