A Complete Guideline On Embellishing Android Apps With Tween Animations

In today’s fast paced world, everybody is in a hurry to grab information within a small amount of time. Especially, the people whose job expects them to stay in touch with the world news are always on a look out for fabulous options that can enable them to stay up to date about the latest happenings in different verticals across the globe. Android being an incredibly successful mobile operating system has witnessed the introduction of innovative add-ons which have served as an excellent booster for applications built on this mobile platform. The latest trend to join the Android app development world is the Tween animations. Through this blog, I’ll be highlighting all the steps that need to be undertaken for creating tween animations in Android apps.

What exactly is a Tween animation?

Although Android mobile platform facilitates three types of animations viz: property, tween and fame; tween is perhaps one of the most used and recommended animations among Android consumers. Tween animation is basically an animation that’s used for translating, rotating and scaling any type of view in an Android application. It is interesting to note that a translation tween animation plays a vital role in making the GUI(Graphic User Interface) of an Android app more lucid.

A tween animation can easily perform a series of simple transformations including size, position, transparency and rotation on the View object’s contents. That means, you can easily move, rotate, grow or shrink an image/text if you have an ImageView or TextView object respectively.

Tween Animations- Listing out the types

Although a variety of animation types have been popular with Android applications, some of the brilliant ones worth making a note of include:

• Sun Rise animation
• Clock animation
• Grass Shape Drawables
• Sun shape drawables
• Sky shape drawables

Tween Animations in Android- Getting started

Prior to going ahead with the creation of Tween animations, it is important to understand that all the tween animations for Android are coded in Android xml file which are placed together in a folder named ‘anim’ that’s available under ‘res’ folder in the Project directory.

And now, the steps involved in creating Tween animations for Android apps

Step 1 -Set up a new Android project using your IDE.

Here, name the project as MyTweenAnimation, followed by naming the package as: com.nkm.tween.

Step 2 – As per this step, create a folder in res directory and name it as anim.
Step 3 – Now, create an Android XML file in the anim folder(the one created as per step 2) and name it as ‘translate’. Here, ensure to keep the resource type as Tween Animation.
Step 4 – Copy the below mentioned code in the translate.xml file(the one created in step 3)

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

Step 5 – Now, paste the below code snippet in the 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="17dp"/>
</RelativeLayout>

Step 6 – Now, paste the following code in MyAnimationActivity.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 MyAnimationActivity 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);
        }
}

In the above code snippet, the meaning of highlighted portion goes like this:

• First line of code fetches the textview that’s named as translatetext by id. This is further stored into a reference variable that’s derived from the main.xml file
• Second line of code fetches animation from resources, followed by storing it into the animation reference variables.
• Third line of code sets the animation with the given TextView, followed by starting it by calling the startAnimation function.

A look at implementing Tween animations in Android

Here are the steps involved in implementing tween animation and rotating the text within your Android application.

Step 1 – Create a project MyTweenAnimationExample
Step 2 – Open the project and insert the following code in its main.xml file:

<LinearLayout android:id="@+id/root" android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView android:id="@+id/animatedText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello">
    </TextView>
</LinearLayout>

Step 3 – Now, insert the following code in strings.xml file:

<resources>
    <string name="hello">MyTweenAnimationExample! Click here to animate the text.</string>
    <string name="app_name">MyTweenAnimationExample</string>
</resources>

Step 4 – Now, open the anim/rotate.xml file and insert the following code into it:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
 android:fromDegrees="0" android:toDegrees="360" android:toYScale="0.0"
 android:pivotX="38%" android:pivotY="28%" android:duration="1998" />

Step 5 – Finally, run the Android application on your chosen device.

Conclusion

So, with that I come to the concluding lines for my post. Having covered almost every crucial aspect related to creation of tween animations for Android, I’m sure you’d have got the vibe to experiment with your apps for exploring multiple possibilities. Well, there are ample number of ways to equip your Android app with a tween animation and it’s entirely up to you to go for the one that suits your caliber in the best possible manner.