All CategoriesAndroid App Development

Introducing NineOldAndroids, an Android Animation Library

NineOldAndroids An Introduction:

NineOldAndroids is a library which was introduced in Android 3.0 (Honeycomb). This Animation API works on all versions of the platform back to 1.0. Means if we want to create animations, rotations, scale, translation, before Honeycomb then this library supports on all platforms.

Important Classes
ValueAnimator: It is a class which provides us a timing for running animations and calculate animated values and set them on target objects.
ObjectAnimator: It is a subclass of ValueAnimator which provides support for animating properties on target objects.
AnimatorSet: By using this class, we can play multiple ObjectAnimator objects together.

Get the NineOldAndroids Library:
Before creating an application, we have to get this library from an official website.
Download and extract it. Choose the library folder from there and import it into your workspace.

Example with Code:
Let’s do it programmatically.
⦁ Create an Application NineOldAndroidExample.
⦁ Add the NineOldAndroids Library in your application.

Requirements:
com.example.nineoldandroidexample anim layout
MainActivity.java animator_set.xml activity_animation_cloning.xml
AnimationCloningActivity.java animator.xml activity_reverse.action.xml
ReverseAnimationActivity.java color_animator.xml activity_toggles.xml
ShapeHolder.java object_animator.xml
TogglesActivity.java

Let’s do it one by one.
MainActivity.java:
Here, this activity shows a list view having options for navigating to different activities.
Add the code
Initialize String array.

public static final String[] options = { "Toggles", "Animation Cloning", "Reverse Animation"};

Add the code in onCreate(){..}

setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options));

Set the intent on item click event to different activities according to the option.
Create the anime folder inside res and create the different XML files of animation.

⦁ animator_set.xml:
Create this XML file and add the code here

<set>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="x"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueTo="200"
android:valueType="floatType" />
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="y"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueTo="400"
android:valueType="floatType" />
</set>

Here, it shows an Animator set having two objects of ObjectAnimator class which play together.

⦁ animator.xml:
Create this XML file and add the code here

<animator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
It shows animation in reverse direction.

⦁ color_animator.xml:
Create this XML file and add the code here

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="color"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="#0f0"
android:valueTo="#00ffff" />

It shows the property of ObjectAnimator class. Here we can set the property accordingly.

⦁ object_animator.xml:

Create this XML file and add the code here

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="y"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueTo="200"
android:valueType="floatType" />

Same as we do for color animator we can also set the different property here.

activity_animation_cloning.xml:

Create this XML file inside res / layout folder and add the code inside LinearLayout. It shows a start button to run the animation.

<Button
android:id="@+id/btn_Start"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00FFFF"
android:text="Run"
android:textColor="#FFFFFF" />

ShapeHolder.java:
It is a class which holds the shape and its various properties, which is used to draw the shape.

Add the code inside this class:
Initialize the variables:

private float x = 0, y = 0;
private ShapeDrawable shape;
private int color;
private RadialGradient gradient;
private float alpha = 1f;
private Paint paint;

// set and get the properties of these variables.
AnimationCloningActivity:
Here, we will add the animation view inside our layout. On clicking the button it will create and start the animation.
Add the code for Create and Start Animation:
Create an inner class MyAnimationView which extends View and implements ValueAnimator class, inside this create animation.

private void createAnimation() {
if (animation == null) {
//Objects of ObjectAnimator class
ObjectAnimator animation_one = ObjectAnimator.ofFloat(list_balls.get(0), "y",
0f, getHeight() - list_balls.get(0).getHeight()).setDuration(500);
ObjectAnimator animation_two = animation_one.clone();
animation_two.setTarget(list_balls.get(1));
ShapeHolder ball_two = list_balls.get(2);
ObjectAnimator animator_Down = ObjectAnimator.ofFloat(ball_two, "y",
0f, getHeight() - ball_two.getHeight()).setDuration(500);
animator_Down.setInterpolator(new AccelerateInterpolator());
//Similarly we can do for animator down.
AnimatorSet set_one = new AnimatorSet();
set_one.playSequentially(animator_Down, animator_Up);
//Play the animation sets one after another
}
}
public void startAnimation() {
createAnimation();
animation.start();
}

activity_reverse_action.xml:
Create this XML file and add the code for reverse animation inside linear layout.

<Button
android:id="@+id/btn_Start"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00FFFF"
android:text="Play"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/btn_Reverse"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00FFFF"
android:text="Reverse"
android:textColor="#FFFFFF" />

ReverseAnimationActivity:
Similarly, we will do here as we had done before.
We will create only one object of ObjectAnimator class and create the animation for reverse also.

Add the code

private void createAnimation() {
if (bounce_Animator == null) {
bounce_Animator = ObjectAnimator.ofFloat(ball_shape, "y", ball_shape.getY(), getHeight() - 50f).
setDuration(1500);
bounce_Animator.setInterpolator(new AccelerateInterpolator(2f));
bounce_Animator.addUpdateListener(this);
}
}
public void reverseAnimation() {
createAnimation();
bounce_Animator.reverse();
}

// Set the properties of object using ShapeHolder class.
activity_toggles.xml:
Create this XML file for various animation effects like translation-x, translation-y, rotation-x,y,z, scale -x,y, fade in-out by using a target object.

Add the code:

<Button
android:id="@+id/btn_tx"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#00FFFF"
android:text="TX"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/btn_target"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#FF0000"
android:gravity="center"
android:text="Animate Me"
android:textColor="#FFFFFF" />

Here, it shows only two buttons. One is the target object button and other is translation on x-axis, create other buttons also.

TogglesActivity.java:
Add the code in onCreate(){…}
We will take the reference of all buttons, set the listeners on them and animate the target by using ObjectAnimator class.

findViewById(R.id.btn_tx).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator.ofFloat(target, "translationX", 0, 50, -50, 0).setDuration(duration).start();
}
});
Similarly,we can do for translation y-axis.
findViewById(R.id.btn_sx).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator.ofFloat(target, "scaleX", 1, 2, 1).setDuration(duration).start();
}
});

Similarly,we can do for scale y-axis.

findViewById(R.id.btn_alpha).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator.ofFloat(target, "alpha", 1, 0, 1).setDuration(duration).start();
}
});
It is for fade in and fade out.
findViewById(R.id.btn_rx).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator.ofFloat(target, "rotationX", 0, 180, 0).setDuration(duration).start();
}
});

Similarly,we can do for rotation on y and z-axis.

Output:

Download Source code: GitHub

Conclusion:
This is a simple example of NineOldAndroids which shows how to create using Animations API and NineOldLibrary. It is compatible with below versions of Android 3.0. We can customize it and create great applications according to our need. It is quite popular in Android development.

Hope you find this blog section informative, keep visiting www.acadgild.com for more updates on the courses.

Android Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close