Tutorial details

Lesson 20. Animation | App Code for Sale | Preview

Lesson 20. Animation | Android Tutorial

Explore animation of View-components

Overview PAGE TOP

In the this lesson we will:

-explore animation of View-components

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 tag is used.

So we have created 5 animation files.

gty.jpg

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

sakhi_1.jpg

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 () 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.

Reference PAGE TOP

http://startandroid.ru/en/lessons/complete-list/226-lesson-20-animation.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.