Android - SPLessons

Android Animations

Chapter 16

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Android Animations

Android Animations

Android animation allows you to change object properties for a certain time period. Animations are useful when there is a change in the screen state such as loading of content or new actions become available. Animations API allows you to define a start and end value for arbitrary object properties and apply a time-based change to this attribute. In addition to Views, this API can be applied on any Java object. Android Animations can be performed either through XML code or android code.

You need the AnimationListener interface to find Animation Start, Animation End and Animation Repeat. The following example illustrates the basic animations like zoomin, zoomout, fadein, fadeout, slideup, slidedown, blink, move, and rotate by using XML notations. If you want to listen to animation events like start, end and repeat, your activity should implement AnimationListener and you will have to override the following methods:

You can load an animation by calling the loadAnimation() method.

Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);

Start an animation on any UI component by calling the startAnimation() method.

imageview.startAnimation(anim);

First create a MainActivity.java class under src/<your packagename>.

MainActivity.java:

MainActivity extends Activity implements AnimationListener{

        Context context;
        Animation anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //set activity content to external view
        setContentView(R.layout.activity_main);

        context=this;

        //find views by Id
        final ImageView image=(ImageView)findViewById(R.id.imageView1);
        Button zoomin=(Button)findViewById(R.id.button1);
        Button zoomout=(Button)findViewById(R.id.button2);
        Button fadein=(Button)findViewById(R.id.button3);
        Button fadeout=(Button)findViewById(R.id.button4);
        Button slideup=(Button)findViewById(R.id.button5);
        Button slidedown=(Button)findViewById(R.id.button6);
        Button blink=(Button)findViewById(R.id.button7);
        Button move=(Button)findViewById(R.id.button8);
        Button rotate=(Button)findViewById(R.id.button9);

        //on click zoomin
        zoomin.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            // load the animation
        anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in);
       // set animation listener
        anim.setAnimationListener(MainActivity.this);
        //start animation
        image.startAnimation(anim);

        }
        });
        //on click zoomout
        zoomout.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                     image.startAnimation(anim);

        }
        });
        //on click fadein
        fadein.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
            // TODO Auto-generated method stub
            // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                image.startAnimation(anim);

        }
        });
        //on click fadeout
        fadeout.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
            // TODO Auto-generated method stub
                // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                image.startAnimation(anim);

        }
        });
        //on click slideup
        slideup.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
            // TODO Auto-generated method stub
                // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                image.startAnimation(anim);

        }
        });
        //on click slidedown
        slidedown.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_down);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                image.startAnimation(anim);

        }
        });
        //on click blink
        blink.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            // load the animation
            anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.blink);
            // set animation listener
            anim.setAnimationListener(MainActivity.this);
            //start animation
        image.startAnimation(anim);

        }
        });
        //on click move
        move.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
                // TODO Auto-generated method stub
                // load the animation
                anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move);
                // set animation listener
                anim.setAnimationListener(MainActivity.this);
                //start animation
                image.startAnimation(anim);

        }
        });
        rotate.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            // load the animation
            anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate);
            // set animation listener
            anim.setAnimationListener(MainActivity.this);
            image.startAnimation(anim);

        }
        });

        }

        @Override
        public void onAnimationEnd(Animation animation) {
                // TODO Auto-generated method stub
                Toast.makeText(context, "Animation stopped", Toast.LENGTH_SHORT).show();

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
        }

        @Override
        public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
            Toast.makeText(context, "Animation started", Toast.LENGTH_SHORT).show();

        }
        }

Create activty_main.xml under res/layout

activity_main.xml:

<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"
    android:orientation="vertical"
    android:background="#FFFFFF"
    >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginBottom="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="30dp"
        android:gravity="center"

        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center"

            android:gravity="center"

            >
            <Button
                android:id="@+id/button1"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:text="Zoom In" />

            <Button
                android:id="@+id/button2"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:text="Zoom Out" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:gravity="center"

            >
            <Button
                android:id="@+id/button3"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:text="Fade In" />

            <Button
                android:id="@+id/button4"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:text="Fade Out" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:gravity="center"

            >

            <Button
                android:id="@+id/button5"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:text="Slide Up" />

            <Button
                android:id="@+id/button6"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:text="Slide Down" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:gravity="center"

            >

            <Button
                android:id="@+id/button7"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:text="Blink" />

            <Button
                android:id="@+id/button8"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:text="Move" />

            <Button
                android:id="@+id/button9"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="#009ACD"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:text="Rotate" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Now create res/anim folder and add the following .xml to it.

fade_in.xml:


<?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>

fade_out.xml:


<?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="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />

</set>

zoom_in.xml:


<?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>

zoom_out.xml:


<?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>

slide_up.xml:


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >

<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />

</set>

slide_down.xml:


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">

<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />

</set>

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="600"
android:repeatMode="reverse"
android:repeatCount="3"/>
</set>

move.xml:


<?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="75%p"
android:duration="800" />
</set>

rotate.xml:


<?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="600"
android:repeatMode="restart"
android:repeatCount="3"
android:interpolator="@android:anim/cycle_interpolator"/>

</set>

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.spl.myproject"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <!--Launcher Activity -->
        <activity
            android:name="com.spl.myproject.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output: