Fun and Simple Android Codes: Simple Drawable Animation

Drawable animation is a traditional animation means you can set a sequence of images to be played in order. You can use codes or more simple use xml file to define list of images (frames) that compose animation. You can set this drawable animation as background animation in ImageView

As usual create new project and just name it any.
Put these 2 images to drawable-mdpi folder, so we just have 2 diferent frames for this animation.

Create new xml file in drawable-mdpi folder to define animation list that consist of drawable items and duration. Name it flappybird.xml.
For little bit more fun add xml animation to move ImageView right-left and up-down, so make folder anim under res directory and create xml file under anim folder and name it move.xml.

Use animation-list element in flappybird.xml to define frame of animation, because we just use 2 images so there are only two item need to be added to this animation-list. Each item have value of drawable image name and duration in ms (how long this image displayed). Attribute oneshot=”false” mean animation will loop. In tween animation file (move.xml) we use translate element to move object right-left and up-down at the same time, all attribute is self-explain. In activity_main.xml set one imageview as container of flappybird.xml. Inflate imageview inside onCreate methode in MainActivity.java. Load tween animation use AnimationUtils.loadAnimation and set background resource of imageview with flappybird.xml also instantiate animation drawable (fbirdAnimation). Override onTouchEvent and when screen tapped (MotionEvent.ACTION_DOWN) start drawable animation fbirdAnimation.start and tween animation fbird.setAnimation(fbirdmove) and stop animation fbirdAnimation.stop and fbird.setAnimation(null) when tapped again.

Here is complete codes:

flappybird.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
    
    <item android:drawable="@drawable/burung1" android:duration="50" />
    <item android:drawable="@drawable/burung2" android:duration="50" />
    
</animation-list>

move.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="140"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="50"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />

</set>

activity_main.xml

<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:background="#ff000000"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true"/>

</RelativeLayout>

MainActivity.java

package com.example.animdrawable;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity 
{
 private AnimationDrawable fbirdAnimation;
 private Animation fbirdmove;
 private ImageView fbird;
 private int counter;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) 
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //load xml animation
  fbirdmove= AnimationUtils.loadAnimation(this,R.anim.move);
  
  fbird = (ImageView) findViewById(R.id.img);
  fbird.setBackgroundResource(R.drawable.flappybird);
  //set drawable animation
  fbirdAnimation = (AnimationDrawable) fbird.getBackground();
 }

 public boolean onTouchEvent(MotionEvent event) 
 {
    if (event.getAction() == MotionEvent.ACTION_DOWN) 
    {
     counter+=1;
     if(counter==1)
     {
      fbirdAnimation.start(); //start drawable animation
      fbird.startAnimation(fbirdmove); //start xml animation
     }
     else
     {
      fbirdAnimation.stop(); //stop drawable animation
      fbird.setAnimation(null); //stop xml animation
      counter=0;
     }
    }
    return false;
 }
}