Android animation through XML


In the last days I was trying to do some animations with Android. I want to share some of the animation which can be build through defining them in your XML.

In total this tutorial will have 3 animations based on an ImageView: (1) shake, rotate, and fade.

It is actually quite easy. We will use the XML to define the behavior of the animation and some Java to create the reference and the initiation. Note that, I have created 3 buttons to start the animation.

See below a small video of the 3 animation we are building in this tutorial:

Open your Resources folder and create 3 XML files, call them: animation.xml, animation1.xml and animation2.xml. In each XML we will define one of the three animations.

In each XML we will have the reference to the android:interpolator and “set” XML tag.

Now, Let’s start with animation.xml. Make sure you use the “set” -XML tag for the animation. Then you add “translate” XML tags for the animation which shakes the Image. Note that in my example I have 3 in total, but of course this can be as many as you like.

FromXDelta:0 means we will move the image positioned in the ImageView from its original position horizontally.
ToXDelta: -5% means we will move the image with 5% to the left.
Duration: 100 means the animation will take 100 Milliseconds.


The second translate element will start from -5% (where the previous animation has ended) and take it to +5% (to the right). An additional element has added android:startOffset, which means that this animation will start after 100 Milliseconds. With other words after the previous translate (animation) has ended.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    
    <translate android:fromXDelta="0"
        		android:toXDelta="-5%p"
        		android:duration="100"/>
     <translate android:fromXDelta="-5%p"
        		android:toXDelta="5%p"
        		android:duration="100"
        		android:startOffset="100"/>
    <translate android:fromXDelta="5%p"
        		android:toXDelta="-5%p"
        		android:duration="200"
        		android:startOffset="200"/>

</set>

Now let’s have a look at the second animation (animation1.xml). In this animation we will change the alpha level of the image so it looks like that the image fades. We change the alpha level from the initial value 0 to the alpha level of 1.0 in 8000 milliseconds.

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

</set>

Finally animation2.xml, is the animation which rotates the image over the screen. In total we use two rotation elements. The first one will rotate the image with 50% over it’s axis. (PivotX=”50″%) and (PivotY=”50%”) and we make a complete circle, from 0 degrees to 360 degrees.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    
    <rotate android:pivotX="50%" 
android:pivotY="50%" 
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"/>
     
       <rotate android:pivotX="20%" 
android:pivotY="30%" 
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1200"
android:startOffset ="1000"/>


</set>

Now that we have make the XML references for the animation we still need to set the Image and buttons which activate the animations. Open your activity_main.xml and add 3 button (one for each animation) and set an ImageView with an Image. In my case I took the Android. Your activity_main.xml should now look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/androidImageView"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="92dp"
        android:adjustViewBounds="false"
        android:src="@drawable/android_logo_transparent" />

    <Button
        android:id="@+id/btn_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/androidImageView"
        android:layout_alignParentTop="true"
        android:text="perform animation 1" />

    <Button
        android:id="@+id/btn_animation1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/androidImageView"
        android:layout_below="@+id/btn_animation"
        android:text="perform animation 2" />

    <Button
        android:id="@+id/btn_animation2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/btn_animation1"
        android:layout_below="@+id/btn_animation1"
        android:text="perform animation 3" />

</RelativeLayout>

Open your Java class.

First create variables for your Buttons, Imageview and Animations.

Create in your onCreate the references to your animations via performanimation = AnimationUtils.loadAnimation(this, R.layout.animation). So I have created a variable called performanimation (name it whatever you want) and used the Animation Utils of Java to load the animation from your layout folder. Second, we can set how many times the animation is repeated.

Then I have created the references to the buttons and use the setOnclickListener to tell the app what to do when a user clicks on one of the buttons. We want the app to perform either animation, animation1 or animation2.

We simply call startAnimation(performanimation) on the ImageView. In this case androidImageView.

package com.christianpeeters.performanimationdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

	Button btnAnimation, btnAnimation1, btnAnimation2;
	Animation performAnimation, performAnimation1, performAnimation2;
	ImageView androidImageView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        performAnimation = AnimationUtils.loadAnimation(this, R.layout.animation);
        performAnimation.setRepeatCount(4);

        performAnimation1 = AnimationUtils.loadAnimation(this, R.layout.animation1);
        performAnimation1.setRepeatCount(4);

        performAnimation2 = AnimationUtils.loadAnimation(this, R.layout.animation2);
        performAnimation2.setRepeatCount(1);

        androidImageView = (ImageView)findViewById(R.id.androidImageView);
        btnAnimation = (Button)findViewById(R.id.btn_animation);
        btnAnimation1 = (Button)findViewById(R.id.btn_animation1);
        btnAnimation2 = (Button)findViewById(R.id.btn_animation2);

        btnAnimation.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				androidImageView.startAnimation(performAnimation);
			}
		});

        btnAnimation1.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				androidImageView.startAnimation(performAnimation1);

			}
		});

        btnAnimation2.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				androidImageView.startAnimation(performAnimation2);
			}
		});

    }

}

That’s all folks.


7 Responses

  1. outlet December 14, 2012 / 2:48 am

    Hello may I quote some of the content here in this post if I link back to you?

  2. Cyrus Prohonic February 20, 2013 / 7:48 am

    I really enjoy studying on this internet site, it has excellent articles. “Never fight an inanimate object.” by P. J. O’Rourke.

  3. PREM CHANDRA PRAJAPAT June 21, 2013 / 4:00 pm

    thank you very very much
    this post is very helpfully for me.
    thank’s again

  4. Yogendra Singh September 26, 2013 / 12:41 pm

    nice work…. thanks a lot…….

  5. Anonymous December 1, 2013 / 5:21 am

    Really Good Article for beginner……

  6. Anonymous February 4, 2014 / 12:04 pm

    Really helpful and easy to follow and to adapt to other projects!! Thanks!!

Leave a Reply to VtechBlog Cancel reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*