Sunday 12 April 2015

Android animation using xml

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"?>
    <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 acitvity 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
blink.xml
<?xml version="1.0" encoding="utf-8"?>
    <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
zoomin.xml
<?xml version="1.0" encoding="utf-8"?>
    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
zoomout.xml
<?xml version="1.0" encoding="utf-8"?>
    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
fadein.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
 
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
 
</set> 
 
5)FadeOut
fadeout.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
 
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
 
</set>
 
6)Rotate
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
    <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
 move.xml
<?xml version="1.0" encoding="utf-8"?>
<set
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
 
   <translate
        android:fromXDelta="0%p"
        android:toXDelta="80%p"
        android:duration="1000" />
</set>
 
8)SlideDown
slidedown.xml
<?xml version="1.0" encoding="utf-8"?>
    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
slideup.xml
<?xml version="1.0" encoding="utf-8"?>
    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
 bounce.xml
<?xml version="1.0" encoding="utf-8"?>
    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>
 
 
 

No comments:

Post a Comment