Thursday, October 9, 2014

Basic Concept of Animation in Android


Animation in Android -
--------------------------------

Animation in android is possible from many ways.

making animation called tweened animation.
Tween Animation takes some parameters such as start value , end value, size , time duration , rotation angle e.t.c and perform the required animation on that object.
In order to perform animation in android , call a static function loadAnimation() of the class AnimationUtils.
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
second parameter, it is the name of the our animation xml file.

Sr.No
Method & Description
1
start()
This method starts the animation.
2
setDuration(long duration)
This method sets the duration of an animation.
3
getDuration()
This method gets the duration which is set by above method
4
end()
This method ends the animation.
5
cancel()
This method cancels the animation.

ImageView image1 = (ImageView)findViewById(R.id.imageView1); image.startAnimation(animation);

To perform a zoom in animation , create an XML file under anim folder under res directory, and put zoom xml code.
<set xmlns:android="http://schemas.android.com/apk/res/android"> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.5" android:toXScale="3.0" android:fromYScale="0.5" android:toYScale="3.0" android:duration="5000" android:pivotX="50%" android:pivotY="50%" > </scale> </set>


The parameter fromXScale and fromYScale defines the start point and the parameters toXScale andtoYScale defines the end point.
The duration defines the time of animation and the pivotX, pivotYdefines the center from where the animation would start.

Create new project and copy MainActivity.java file code into your MainActivity.java

MainActivity.java
------------------------

package com.example.animation;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

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

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
     // Inflate the menu; this adds items to the action bar if it is present.
     getMenuInflater().inflate(R.menu.main, menu);
     return true;
  }

  public boolean onOptionsItemSelected(MenuItem item) 
  { 
  super.onOptionsItemSelected(item); 
     switch(item.getItemId()) 
     { 
     case R.id.zoomInOut:
        ImageView image = (ImageView)findViewById(R.id.imageView1);
        Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
        image.startAnimation(animation);
           return true;
     case R.id.rotate360:
       ImageView image1 = (ImageView)findViewById(R.id.imageView1);
       Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.clockwise);
       image1.startAnimation(animation1);
           return true;
     case R.id.fadeInOut:
       ImageView image2 = (ImageView)findViewById(R.id.imageView1);
       Animation animation2 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
       image2.startAnimation(animation2);
          return true;


     }
     return false;
  }

}

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"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"  />
    
    <ImageView
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="179dp"
      android:layout_below="@+id/textView1"
      android:src="@drawable/ic_launcher"/>
</RelativeLayout>



AndroidMenifest.xml
------------------------------


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.animation"
    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" >
      <activity
         android:name="com.example.animation.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>

Create anim folder inside res folder - res->anim

Create three file inside anim called clockwise.xml, fade.xml, and myanimation.xml


clockwise.xml
-------------

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

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >

   </rotate>

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >

   </rotate>

</set>


fade.xml
-----------

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >

   <alpha
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >

   </alpha>


   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >

   </alpha>
   
</set>

myanimaion.xml
--------------------

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

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >

   </scale>


   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >

   </scale>

</set>


inside menu paste below code -
menu.xml -
--------------
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/rotate360"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/rotate_String"/>
    <item
        android:id="@+id/zoomInOut"
        android:orderInCategory="100"
        android:title="@string/zoom_In_Out"/>
    <item
        android:id="@+id/fadeInOut"
        android:orderInCategory="100"
        android:title="@string/fade_String"/>

</menu>

string.xml
------------

<?xml version="1.0" encoding="utf-8"?>
<resources>

   <string name="app_name">Animation</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Hello world!</string>
   <string name="zoom_In_Out">Zoom In/Out</string>
   <string name="rotate_String">Clockwise/Anti Clockwise</string>
   <string name="fade_String">Fade In/Out</string>

</resources>