In the this lesson we will:

- explore animation of View-components

Translated by Taras Leskiv (http://android-by-example.blogspot.com/)

Before starting serious topics I decided to explore one more interesting and, to my mind, not very complicated topic. I will only look through the basics not exploring the details. The topic is - animation. We will learn how to do the following transformations with common View-components:

- change transparency
- change size
- move
- rotate

Let’s create a project:

Project name: P0201_SimpleAnimation
Build Target: Android 2.3.3
Application name: SimpleAnimation
Package name: ru.startandroid.develop.p0201simpleanimation
Create Activity: MainActivity

Transformations are configured in XML files, after this they are read in the program code and are assigned to View-elements. I will not copy and paste help and look everything through, I will go straight to practice.

There is a res folder in our project. We have to create anim folder inside. You can do the following like this: right click res folder, in the menu choose New -> Folder. We have to create files inside anim folder. This is done the same way: right click anim folder and choose New -> File. We will configure animation in these files;

Create the following files inside res/anim folder:

File name: myalpha.xml
Contents:

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="3000">
</alpha>

Transformation description: transparency is changed from 0 to 1 during three seconds.

File name: myscale.xml
Contents:

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.1"
    android:toXScale="1.0"
    android:fromYScale="0.1"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000">
</scale>

Transformation description: changing size from 0.1 of original width and height to 1. Point, relatively to which scaling will occur is right in the center of the object (pivotX, pivotY). Duration - 3 seconds.

File name: mytrans.xml
Contents:

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-150"
    android:toXDelta="0"
    android:fromYDelta="-200"
    android:toYDelta="0"
    android:duration="3000">
</translate>

Transformation description: moving from -150 relatively to the current position by X axis and -200 by Y axis to the current position (0,0). Duration - seconds.

File name: myrotate.xml
Contents:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="3000">
</rotate>

Transformation description: rotation relatively to the left top corner (as pivotX and pivotY) are not specified by 360 degrees during 3 seconds.

File name: mycombo.xml 
Contents:

<?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:duration="3000"
        android:pivotX="50%"
        android:pivotY="50%">
    </rotate>
    <scale
        android:fromXScale="0.1"
        android:toXScale="1.0"
        android:fromYScale="0.1"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000">
    </scale>
</set>

Transformation description: simultaneous scaling and rotating during 3 seconds. Note that for combining transformations <set> tag is used.

So we have created 5 animation files.

Now we can apply them to View-components.

Open main.xml and create the screen:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/frameLayout1"
    android:layout_height="match_parent">
    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:id="@+id/tv"
        android:textSize="38sp">
    </TextView>
</FrameLayout>

In the center of the screen TextView is located. We will apply transformations to it. Let’s create a context menu for our TextView, add menu items which correspond to our sets. We will run the animation when context menu item is clicked.

MainActivity.java:

package ru.startandroid.develop.p0201simpleanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.ContextMenu.ContextMenuInfo;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class MainActivity extends Activity {

  // constants for menu item IDs
  final int MENU_ALPHA_ID = 1;
  final int MENU_SCALE_ID = 2;
  final int MENU_TRANSLATE_ID = 3;
  final int MENU_ROTATE_ID = 4;
  final int MENU_COMBO_ID = 5;

  TextView tv;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    tv = (TextView) findViewById(R.id.tv);
    // register context menu for tv component
    registerForContextMenu(tv);
  }

  @Override
  public void onCreateContextMenu(ContextMenu menu, View v,
      ContextMenuInfo menuInfo) {
    // TODO Auto-generated method stub
    switch (v.getId()) {
    case R.id.tv:
      // add items
      menu.add(0, MENU_ALPHA_ID, 0, "alpha");
      menu.add(0, MENU_SCALE_ID, 0, "scale");
      menu.add(0, MENU_TRANSLATE_ID, 0, "translate");
      menu.add(0, MENU_ROTATE_ID, 0, "rotate");
      menu.add(0, MENU_COMBO_ID, 0, "combo");
      break;
    }
    super.onCreateContextMenu(menu, v, menuInfo);
  }

  @Override
  public boolean onContextItemSelected(MenuItem item) {
    Animation anim = null;
    // define which item has been clicked
    switch (item.getItemId()) {
    case MENU_ALPHA_ID:
      // create animation object from anim/myalpha file
      anim = AnimationUtils.loadAnimation(this, R.anim.myalpha);
      break;
    case MENU_SCALE_ID:
      anim = AnimationUtils.loadAnimation(this, R.anim.myscale);
      break;
    case MENU_TRANSLATE_ID:
      anim = AnimationUtils.loadAnimation(this, R.anim.mytrans);
      break;
    case MENU_ROTATE_ID:
      anim = AnimationUtils.loadAnimation(this, R.anim.myrotate);
      break;
    case MENU_COMBO_ID:
      anim = AnimationUtils.loadAnimation(this, R.anim.mycombo);
      break;
    }
    // start animation for tv
    tv.startAnimation(anim);
    return super.onContextItemSelected(item);
  }
}

Animation is read from xml-file by AnimationUtils.loadAnimation method and it returns an object of type Animation. We use this object in startAnimation method, which starts the animation.

Save everything and run the application.  Invoke context menu for the TextView and test animations

I didn’t use all the facilities and parameters. There is, for example, android:startOffset parameter - it specifies the delay on the animation start. That is if you specify android:startOffset=”1000”, the animation will start after one second. It is convenient when you are making a transformation set (<set>) and you need transformations to occur in a specific order, not simultaneously. One more useful parameter is android:repreatCount - it is a number of repeats.

I recommend you to play with parameters in XML and see what happens.

In the next lesson we will:

- create a second screen in application