Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Tween Animation in Android

In this article, we will learn how to apply translation animation on any type of view in android by using android xml file and describe the entire attribute and tag list used in translation animation.

Introduction

The basic idea of Translation Tween animation is to make the GUI of the Activity or Application more vivid and happening.

Objective:

  • To provide a good understanding of how to use translation animation in android on any View .
  • To provide complete knowledge of all the attributes of translate tag.
  • To provide familiarity with Animation Class.

What is Tween Animation?

Tween Animation is defined as an animation which is used to Translate, Rotate, Scale and Alpha any type of view in Android.

All the Tween Animations are coded in Android xml file which are placed together in folder name “anim” under “res” folder in Project directory.

How to create a Tween Animation XML File inside anim folder?

  • Step 1 : Right click res folder and choose new folder option then type the name of the folder in the dialog box appears and press Enter.
  • Step 2 : Now right click the anim folder and select Android XML file from the options.
  • Step 3 : A dialog box will appear. Type the name of file and press Enter. You will see a file is created inside anim folder in your project.

Note : Make sure that the category of XML file in the top dropdown should be Tween Animation.

What is Translation Tween Animation?

Translation tween animation is defined as a tween animation using which we can translate a view from starting point (X1,Y1) to ending point (X2,Y2) in a specified duration , if any. Translate tag is used to define a translation animation in android.

Reference to Tween Animation in Android. In Android, Tween Animation is referred by a resource id R.anim.filename in JAVA code.

For eg : R.anim.translate in this code.

How to refer animation file in JAVA code?

In Java Code, the animation file is referred by using Animation class under the inbuilt package android.view.animation package. Then by using reference of animation class we can apply that animation to any desired view.

Steps Involved in making project on translate animation:

Step 1: Create a new project named TweenAnimation in workspace with package name com.nkm.tween.

Displaying the new project created

Figure 1: Displaying the new project created

Note : You can also choose project and package name according to your wish but make sure to modify the code accordingly.

Step 2: Create a new folder in res directory and name it anim.

Displaying the new folder created

Figure 2: Displaying the new folder created

Step 3: Create an Android XML file in anim folder and name it as translate. Make sure that resource type should be Tween Animation.

Creating an Android xml file

Figure 3: Creating an Android xml file

Step 4: Now copy the following code in your translate.xml file

Listing 1: Copying the below code to translate.xml file

<?xml version=”1.0” encoding=”utf8”?>
<translate
   xmlns:android="http://schemas.android.com/res/apk/android"
   android:fromXDelta="200"
   android:toXDelta="0"
   android:fromYDelta="200"
   android:toYDelta="0"
   android:duration="4000"
   android:startOffset="1000"
   android:repeatCount="0"
   android:repeatMode="restart"
   android:fillEnabled="false"
   android:fillBefore="false"
   android:fillAfter="false">
    
</translate>

Explanation of above code :

<?xml version="1.0" encoding="utf8"?>

This line defines the encoding of the XML file and the version of XML used in coding or designing this XML file.

Listing 2: Defines the encoding of xml file

<translate
   xmlns:android="http://schemas.android.com/res/apk/android"
   android:fromXDelta="200"
   android:toXDelta="0"
   android:fromYDelta="200"
   android:toYDelta="0"
   android:duration="4000"
   android:startOffset="1000"
   android:repeatCount="0"
   android:repeatMode="restart"
   android:fillEnabled="false"
   android:fillBefore="false"
   android:fillAfter="false">
</translate>

The above code defines a translation which is designed by using its various attributes.

All the attributes are explained as below :

  • xmlns:android: This attribute must be defined in the root tag to get the schema path of this XML file.
  • android:fromXDelta: This attribute is used to define the starting point of translation animation on Xaxis.
    Values Accepted: Integer or percentage
    Default value : 0
  • android:toXDelta: This attribute is used to define the ending point of translation animation on Xaxis
    Values Accepted: Integer or percentage
    Default value : no default value, must be provided a value explicitly
  • android:fromYDelta: This attribute is used to define the starting point of translation animation on Yaxis
    Values Accepted: Integer or percentage
    Default value : 0
  • android toYDelta: This attribute is used to define the ending point of translation animation on Yaxis
    Values Accepted: Integer or percentage
    Default value: no default value, must be provided a value explicitly
  • android:duration: This attribute is used to define the duration in which the animation needs to be completed in milliseconds.
    Values Accepted: Integer
    Default value : 300
  • android:startOffset:This attribute is used to define by how much time in milliseconds the animation should be delayed.
    Values Accepted: Integer, Default value : 0.
  • android:repeatCount: This attribute is used to define the number of times the animation needs to be repeated.
    Values Accepted: Integer>=0
    Default value : 0
  • android:repeatMode: This attribute is used to define the mode in which the animation must be repeated. Either in reverse mode means view animates back or in restart mode, i.e., animation starts again.
    Values Accepted: reverse/restart
    Default value : restart
  • android:fillEnabled: This attribute is used to enable/disable the filling property of animation, i.e. ,enabling/disabling fillAfter and fillBefore attributes.
    Values Accepted: true/false
    Default value : false
  • android:fillBefore: This attribute is used to make view placed on the same place where it started after the completion of the animation.
    Values Accepted: true/false
    Default value : false
  • android:fillAfter: This attribute is used to make view placed where the animation ends after the completion of the animation.
    Values Accepted: true/false
    Default value : false

Step 5 :

Listing 3: Paste the following code in your main.xml layout file:

<?xml version="1.0" encoding="utf8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT TRANSLATION" 
        android:layout_centerInParent="true"
        android:textSize="18dp"/>

</RelativeLayout>

Step 6 :

Listing 4: Paste the following code in your TweenAnimationActivity.java file :

Package com.nkm.tween;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class TweenAnimationActivity extends Activity {
	Animation animation;
	TextView translatetext;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		getInit();
	}

	public void getInit() {
		translatetext = (TextView) findViewById(R.id.translatetext);
		animation = AnimationUtils.loadAnimation(this, R.anim.translate);
		translatetext.startAnimation(animation);
	}

}

Complete Explanation:

In this JAVA Code, many classes and logics are used that are relatively unknown for many of you. So I explain them all one by one as below :

Animation Class : Animation class is used to hold an animation which is loaded in it from the anim folder of resource directory. In the above code, the animation reference variable holds the animation translate loaded by the use of AnimationUtils class.

Package of Animation Class : “android.view.animation.Animation”

AnimationUtils : AnimationUtils class is used to fetch an animation file from anim folder by using loadAnimation method of this class which is a staic method.

Package of AnimationUtils Class : “android.view.animation.AnimationUtils”

loadAnimation(Context,int) method : This method has two arguments;

  1. First argument defines context in which the animation is to be loaded which must be the context of given activity on which the animation is to be loaded.
  2. Second argument defines the id of the animation in resources file which is R.anim.translate in this case.

User defined getInit() Method : This method includes only three lines of code which are explained as follow:

public void getInit() {
		translatetext = (TextView) findViewById(R.id.translatetext);
		animation = AnimationUtils.loadAnimation(this, R.anim.translate);
		translatetext.startAnimation(animation);
	}

  • First line of code fetches textview named translatetext by id and store it into a reference variable from the main.xml file which is set as the content view of this current activity.
  • Second line of code fetches an animation from resources and stores it into animation reference variable of class Animation.
  • Third line of code sets the animation with the given TextView (View) and start the animation by calling startAnimation of the View which is textView in this case.

Snapshots of Output:

Output

Figue 4: Output

This is the first thing which appears when activity starts. At this point the animation waits for 1000 milliseconds, i.e., 1 second as the startOffset is set to 1000 in animation XML file. At this point the animation is set to TextView but not started yet. After 1 second time the Animation on TextView starts from point (200,200).

Animation performed for 2000 sec

Figure 5: Animation performed for 2000 sec

This is the second snapshot in which the animation is performing for duration 2000 seconds.

Text returning to original position

Figure 6: Text returning to original position

This is the last snapshot in which the animation is finished and the text returns to its original position on which it was initially placed.

What is Covered?

  • Introduction to Tween Animation.
  • Introduction to translate Tween Animation.
  • Tags and attributes required in tween animation.
  • Use of Animation and AnimationUtils Class.
  • Performing a simple Tween Animation.

Also read



Have good knowledge on Java, HTML, CSS and Android platform and is pursuing Masters in Computer Applications.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login