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>





Basic of Gesture

how to use gesture in Android
---------------------------------

Some examples of common multi-touch gestures and actions you might use include:
ØPinch to zoom in, spread to zoom out.ØBasic dragging in order to move, adjust, scroll, and position.ØFlick to jump to the next screen or scroll extra fast.ØTap and hold to open an item or context menu.ØMulti-finger drag often scrolls faster!
ØHandling multi touch gestureØDetecting common gestureØManaging touch eventØAnimating a scroll gestureØTracking movementØDragging & scalling
ØAndroid provides special types of touch screen events such as pinch , double tap, scrolls , long presses and flinch. These are all known as gestures.
ØAndroid provides GestureDetector class to receive motion events and tell us that these events correspond to gestures or not.
ØTo use it , you need to create an object of GestureDetector and then extend another class with GestureDetector.SimpleOnGestureListener to act as a listener and override some methods.

Different methods in gesture :-
-----------------------------------------------
GestureDetector myG;
myG = new GestureDetector(this,new Gesture());

   class Gesture extends GestureDetector.SimpleOnGestureListener{
   public boolean onSingleTapUp(MotionEvent ev) {
   }
   public void onLongPress(MotionEvent ev) {
   } 
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
   }
   public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
   }
}
}



Gesture.java

---------------------

package com.example.gesture;

import android.app.Activity;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;

public class MainActivity extends Activity {

  private ImageView img;
  private Matrix matrix = new Matrix();
  private float scale = 1f;
  private ScaleGestureDetector SGD;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     img = (ImageView)findViewById(R.id.imageView1);
     SGD = new ScaleGestureDetector(this,new ScaleListener());
  }

  @Override
  public boolean onTouchEvent(MotionEvent ev) {
     SGD.onTouchEvent(ev);
     return true;
  }

  private class ScaleListener extends ScaleGestureDetector.
  SimpleOnScaleGestureListener {
  @Override
  public boolean onScale(ScaleGestureDetector detector) {
     scale *= detector.getScaleFactor();
     scale = Math.max(0.1f, Math.min(scale, 5.0f));
     matrix.setScale(scale, scale);
     img.setImageMatrix(matrix);
     return true;
  }
}

  @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;
  }

}

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_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="@string/hello_world" />

     <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/textview1"
        android:scaleType="matrix"
        android:src="@android:drawable/sym_def_app_icon" />
</RelativeLayout>


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


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



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

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

    <string name="app_name">Gesture</string>
    <string name="hello_world">Pinch to zoom in or out!</string>
    <string name="menu_settings">Settings</string>

</resources>