Animations

Course- Android >

Animation is the process of motion and resizing

Animation is possible in many ways in Android. In this chapter we will discuss an easy and widely used method of making the animation.

Tween animation

Twin animation takes certain criteria like initial value, end value, size, time duration, rotation angle, e.t.c and animation required on that object. It can be applied to any type of object, so to use it, Android has given us a class named Animation.

To run the animation in Android, we are going to call the Stylish Function Load Animation () of Classic Animation Utilities. We are going to get the result in an example of an animation object. Its syntax is as follows -


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

Note the second parameter This is the name of our animation XML file. You have to create a new folder that will have to create a directory in the directory named ANIM and create an XML file under the Animate folder.

There are several useful functions in this animation class, which are listed below:

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.

In order to apply this animation to an object , we will just call the startAnimation() method of the object. Its syntax is −


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

Example

The following example shows the use of animation in Android. You will be able to choose different types of animation from the menu and the selected animation will be applied to an image view on the screen.

To experiment with this example, you need to run it on the emulator or on the real device.

Steps Description
1 You will use Android studio IDE to create an Android application and name it as My Application under a package com.example.sairamkrishna.myapplication. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2 Modify src/MainActivity.java file to add animation code
3 Modify layout XML file res/layout/activity_main.xml add any GUI component if required.
4 Create a new folder under res directory and call it anim. Confim it by visiting res/anim
5 Right click on anim and click on new and select Android XML file You have to create different files that are listed below.
6 Create files myanimation.xml,clockwise.xml,fade.xml,move.xml,blink.xml,slide.xml and add the XML code.
7 No need to change default string constants. Android studio takes care of default constants at values/string.xml.
8 Run the application and choose a running android device and install the application on it and verify the results.

Here is the modified code of MainActivity.java.


package com.example.sairamkrishna.myapplication;

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

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
      image.startAnimation(animation);
   }
   
   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.clockwise);
      image.startAnimation(animation1);
   }
   
   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
      image.startAnimation(animation1);
   }
   
   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
      image.startAnimation(animation1);
   }
   
   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }
   
   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
   
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
   }
   
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      
      int id = item.getItemId();
      
      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
         return true;
      }
      return super.onOptionsItemSelected(item);
   }
}

Here is the modified code of res/layout/activity_main.xml.


 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:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Fastread"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/logo"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true" />
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2" />
      
   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />
      

Here is the code of res/anim/myanimation.xml.


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

    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%" >
   
   
    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%" >
   
   

Here is the code of res/anim/clockwise.xml.


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

    xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   
   
    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" >
   
   

Here is the code of res/anim/fade.xml.


xml version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >
   
   
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >
   
   
   
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >
   
   

Here is the code of res/anim/blink.xml.


xml version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android">
    android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>

Here is the code of res/anim/move.xml.


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

   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   
   
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" />

Here is the code of res/anim/slide.xml


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

Here is the modified code of res/values/string.xml.


    name="app_name">My Application
    name="hello_world">Hello world!
    name="action_settings">Settings

Here is the default code of AndroidManifest.xml.


xml version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication"
   android:versionCode="1"
   android:versionName="1.0" >

   
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >
      
         
             android:name="android.intent.action.MAIN" />
             android:name="android.intent.category.LAUNCHER" />
   

Try to run your application. I think you are connected to your real Android mobile device with your computer. To run an app from Android Studio, open an activity file from your project and click the Run icon from the toolbar. Android Studio will display a screen.