Tween Animation in Android

Tween animations are a specific type of animation related to rotation, sliding and movement of an object. This article explains some common Tween animations.

Now we move to the code part of this article. In this article we will use a single Activity_main.xml.

Code

The following is the code of 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:gravity="top"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <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="149dp"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

Graphical Layout


In this activity we use an ImageView. We provide an image source to this ImageView from a drawable folder. We will apply all the animations on this Image. We will apply 6 types of animation, in other words Fade In/Out , Move, Slide Up, Zoom In/Out, Sequential, Clockwise/Anti Clockwise. We provide the option of all 6 animations using Menu. The user can select any specific animation from the menu list.

So if we want to insert some item into the Menu then we should be inserting all the items into the menu.xml file. You can find your menu.xml file as follows: Go to res -> menu -> main.xml.

If this file doesn't exist don't worry. You can create this file manually. Now we insert some item into this menu.xml file.

<menu
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/fadeInOut"
        android:orderInCategory="100"
        android:title="@string/fade_String"/>
    <item
        android:id="@+id/Move"
        android:orderInCategory="100"
        android:title="@string/Move"/>
    <item
        android:id="@+id/slideUp"
        android:orderInCategory="100"
        android:title="@string/Slide"/>
    <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/sequential"
        android:orderInCategory="100"
        android:title="@string/Sequential"/>
</menu>

In the preceding code we provide all the options of animation that will be visible in the Menu list of our project. The Android:orderInCategory attribute dictates the order in which the menu items will appear within the menu when it is displayed. The menu items are arranged from left to right in ascending order of integer value. Now we move to the source code of this project.

MainActivity.java file

The following is the source code of the MainActivity.java file of this project:

package com.example.tweenanimation;

import android.os.Bundle;
import android.app.Activity;
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);
        ImageView image = (ImageView) findViewById(R.id.imageView1);
        Animation animation;
        switch (item.getItemId()) {

            case R.id.Move:

                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
                image.startAnimation(animation);
                return true;
            case R.id.slideUp:

                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
                image.startAnimation(animation);
                return true;
            case R.id.sequential:

                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sequential);
                image.startAnimation(animation);
                return true;
            case R.id.zoomInOut:

                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
                image.startAnimation(animation);
                return true;
            case R.id.rotate360:
                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.clockwise);
                image.startAnimation(animation);
                return true;
            case R.id.fadeInOut:

                animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
                image.startAnimation(animation);
                return true;


        }
        return false;
    }

}

Now I will explain the preceding code in the following sections.

Code Section 1

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

In preceding code we created a Menu and inserted the items into the menu in the menu.main file. The getMenuInflater class adds the item into the menu using the inflate method. After insertion of the item present in the main.xml file our menu will look like the following:

public boolean onOptionsItemSelected(MenuItem item);

In this code we created an onOptionsItemSelected event for the menu. This event will awake when someone selects an item from the Menu list. When someone selects an option from the Menu list then that item will be saved into the item variable of the MenuItem (item).

ImageView image = (ImageView)findViewById(R.id.imageView1);

In the preceding line of code we took the reference of ImageView1 into the image object of the imageview type. Now we will apply all the animation on this object. We will also create an object of Animation Class (animation) and use this object in a code section later.

Code Section 2

case R.id.Move:

     animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
     image.startAnimation(animation);
     return true;

This code will execute when someone selects the Move option from the menu. In the preceding code we selected move animation from the animation list (anim) and inserted all the information into the animation object and finally we applied this animation on the image using the startAnimation method. Move animation moves the image from the left to the right as shown below:



Code Section 3

case R.id.slideUp:

     animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
     image.startAnimation(animation);
     return true;

The preceding code executes when someone selects the Slide Up option from the menu. In the preceding code we select Slide Up animation from the animation list (anim) and insert all the information into the animation object and finally we apply this animation on the image using the startAnimation method. This animation slides the image object.



Code Section 4

case R.id.sequential:

    animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sequential);
    image.startAnimation(animation);
    return true;

This code will execute when someone selects the Sequential option from the menu. In the preceding code we selected sequential animation from the animation list (anim) and inserted all the information into an animation object and finally we applied this animation on the image using the startAnimation method. Sequential animation is a combination of various types of animation (in other words move and rotation).



Code Section 5

` case R.id.zoomInOut:

       animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
       image.startAnimation(animation);
       return true;

This code will execute when someone selects the Zoom In/out option from the menu. In the preceding code we selected Zoom in/out animation from the animation list (anim) and inserted all the information into the animation object and finally we appied this animation on the image using the startAnimation method. This animation first zooms in the image and then zooms out the image.



Code Section 6

case R.id.rotate360:

     animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.clockwise);
     image.startAnimation(animation);
     return true;

This code will execute when someone selects the Clockwise/Anti Clockwise option from the menu. In the preceding code we selected Clockwise/AntiClockwise animation from the animation list (anim) and inserted all the information into the animation object and finally we applied this animation on the image using the startAnimation method. This animation first rotates the image in a clockwise direction and then into an anticlockwise direction by 360 degrees.



Code Section 7

case R.id.fadeInOut:

    animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
    image.startAnimation(animation);
    return true;

This code will execute when someone selects the FadeIn/Out option from the menu. In the preceding code we selected FadeIn/Out animation from the animation list (anim) and inserted all the information into an animation object and finally we applied this animation on the image using the startAnimation method. This animation changes the transparency of the image.