Last week, we talk about basic Android animations and I also give several Android animation examples to explain how to apply animation on image views in Android. In this android development tutorial, I will use the same Android API to implement the flappy bird 2D animation. Flappy bird is a very simple but popular game in past few weeks. If you don’t know how flappy bird animation is, you can search on youtube or you can check my example below.

Download And Install Example App On Your Android

You can install this android example app and try this animation example on your android device. You can click following link to start downloading or scan the QR code below to install this app directly on your android device.

Click here to download .apk file

Source Code & Developers Guide

First, I will put a flappy bird on the stage in the bottom of the screen. When you click on the screen, the bird will fly up by 200 pixels. Once the fly up animation finishes, a drop down animation will continue. And the bird will land. Let me show you my layout xml source code here:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jms.flappybirdanimation.MainActivity$PlaceholderFragment" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/image_bg_desc"
        android:scaleType="fitXY"
        android:src="@drawable/bg" />

    <ImageView
        android:id="@+id/birdimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="41dp"
        android:contentDescription="@string/image_desc"
        android:scaleType="fitCenter"
        android:src="@drawable/flappybird" />
</RelativeLayout>

I put two images on the stage. One is the background image and another one is the bird character. Later, I will set an OnClickListener on the root view, so that I can start the fly up animation when I click on the screen. In the following example code, I will create two animations. One is the flying up animation and the other one is drop down animation. Both of them will be attached with the bird ImageView. Now, let’s see the source code:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	View rootView = inflater.inflate(R.layout.fragment_main, container, false);
	rootView.setOnClickListener(flyClickListener);
	
	bird = (ImageView) rootView.findViewById(R.id.birdimage);
	
	upAnimation = ObjectAnimator.ofFloat(bird, "translationY", -200);
	upAnimation.setInterpolator(new DecelerateInterpolator());
	upAnimation.setRepeatCount(0);
	upAnimation.setDuration(animationDuration);
	upAnimation.addListener(upListener);
	
	downAnimation = ObjectAnimator.ofFloat(bird, "translationY", 0);
	downAnimation.setInterpolator(new AccelerateInterpolator());
	downAnimation.setRepeatCount(0);
	downAnimation.setDuration(animationDuration);
	return rootView;
}

In above example code, I am using Fragment layout. Therefore, I put my code in onCreateView function of static Fragment class. As mentioned above, I set an OnClickListener on rootView. Here is the source code:

private OnClickListener flyClickListener = new OnClickListener() {
	public void onClick(View v) {
		if(upAnimation.isStarted())
		{
			upAnimation.cancel();
		}
		
		if(startPosition == 0)
		{
			startPosition = bird.getTop();
		}
		
		isCancelled = false;
		bird.layout(bird.getLeft(), (int)bird.getY(), bird.getRight(), (int)bird.getY() + bird.getMeasuredHeight());
		bird.setTranslationY(0);
		upAnimation.start();
	}
};

In the OnClickListener, I will record the start position of the bird character which I will use as the destination position for move down animation. Before starting the move up animation, I will relocate the bird ImageView to reset its position. This is very important because if you don’t reset it, the next move up animation will start from the original position instead of starting from the new position. Now, we successfully create a move up animation to animate the bird fling up when we click on the screen.

Next, I will show you how to animate the move down animation and when to start this animation. As I mentioned before, when the bird stops moving up, it will start to move down. So I set an AnimatorListener on upAnimation.

upAnimation.addListener(upListener);

When the moving up animation finishes, a animation end event will be fired. At that moment, we can start the moving down animation. Now, let’s check the AnimatorListener source code.

private Animator.AnimatorListener upListener = new Animator.AnimatorListener() {
	@Override
	public void onAnimationStart(Animator animation) {
	
	}
	
	@Override
	public void onAnimationRepeat(Animator animation) {
	
	}
	
	@Override
	public void onAnimationEnd(Animator animation) {
		if(!isCancelled) {
			//start to drop
			bird.layout(bird.getLeft(), (int)bird.getY(), bird.getRight(), (int)bird.getY() + bird.getMeasuredHeight());
			bird.setTranslationY(0);
			downAnimation.setFloatValues(startPosition - bird.getTop());
			downAnimation.start();
		}
	}
	
	@Override
	public void onAnimationCancel(Animator animation) {
		isCancelled = true;
	}
};

In onAnimationEnd function, I reset the bird ImageView position as current position so that it can start moving down animation from current position. Otherwise, it will start moving down from where it started moving up. As the move up animation has changed the bird ImageView’s translationY, I also reset translationY parameter to 0. After that, I set the move down destination position and start the animation.

In onAnimationCancel function, I set a flag isCancelled to be true. That’s because we could start a new move up animation while the bird is moving up. In this situation, we have to cancel current move up animation. After we cancel the move up animation, an onAnimationCancel event will be fired immediately followed by onAnimationEnd event. To avoid starting the move down animation by mistake, we introduce this isCancelled flag.

Project Source Code User Guide

When you download the project source code, you can use it in your eclipse. This android source code is working on Eclipse 4.2.2 and ADT 22. This project requests another two android library:

• android.support.v7.appcompat
• google play services lib

Get Full Source Code under $5.99

You will get whole Flappy Bird animation example source code at $5.99. With this source code, you can do everything you want:

• Replace with your own characters
• Monetize the app with your own AdMob publish id;
• Use the source code in your own project;
• Publish app in your android develop account;