Android Animations using xml code

The Animations Api lets you create visually appealing animations and transitions in your apps. Using these animations in the right places can turn your good looking app into an outstanding and highly usable app. Adding animations can look like a challenging task but it is actually not that difficult at all . Animations can be performed through either XML or android code. In this tutorial i explained how to do animations using XML notations. Here i covered basic android animations like fade in, fade out, scale, rotate, slide up, slide down etc. Xml animations code is pretty simple and small to implement. Just use xml file into java and animation is ready.

Step to perform animation in android apps

Step 1) Create XML which define animation

create a xml file which define the animation in res ⇒ anim ⇒ animation.xml , If you dont have anim folder then create it in res directory

blink.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="800"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

Step 2) Load the animation and set to view in activity to see blink effect

public class BlinkActivity extends Activity{
TextView textMessage;
// Animation
Animation animBlink;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_blink);
    textMessage = (TextView) findViewById(R.id.textMessage);
    textMessag.setText(Welcome to Android Code Portal);
    // load the animation
    animBlink = AnimationUtils.loadAnimation(getApplicationContext(),
    R.anim.blink);
   // start the animation
    textMessage.startAnimation(animBlink);}
}

Some other useful animations as follows

1)Blink

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.0"
       android:toAlpha="1.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:duration="800"
       android:repeatMode="reverse"
       android:repeatCount="infinite"/>
</set>

2)ZoomIn

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
    <scale
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="1000"
       android:fromXScale="1"
       android:fromYScale="1"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="3"
       android:toYScale="3" >
    </scale>
</set>

3)ZoomOut

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
    <scale
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="1000"
       android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="0.5"
       android:toYScale="0.5" >
    </scale>
</set>

4)FadeIn

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
    <alpha
       android:duration="1000"
       android:fromAlpha="0.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:toAlpha="1.0" />
</set>

5)FadeOut

<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
    <alpha
       android:duration="1000"
       android:fromAlpha="1.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:toAlpha="0.0" />
</set>

6)Rotate

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:fromDegrees="0"
       android:toDegrees="360"
       android:pivotX="50%"
       android:pivotY="50%"
       android:duration="700"
       android:repeatMode="restart"
       android:repeatCount="infinite"
       android:interpolator="@android:anim/cycle_interpolator"/>
</set>

7)Move

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   <translate
       android:fromXDelta="0%p"
       android:toXDelta="80%p"
       android:duration="1000" />
</set>

8)SlideDown

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

9)SlideUp

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

10)Bounce

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

Enjoy Coding and Share Knowledge