Android Blink Animation (Resource Animation)

     As a developer, we always wanted to build a great application. Users can be attracted by using sleek design or using animation. What is animation? According to definition, it is a simulation of movement created by displaying a series of pictures or frames. Android platform provided us an easy way of creating animation.

     We have animation resources that defines two types of animations which are Property Animation and View animation. When we say property animation, it is an animation by modifying and object's property values over a set time or an animation defined in XML that modifies properties of the target object, such as background color/image or alpha value, over a set of time. while View animation can be divided into two categories: Tween animation and Frame animation. Tween animation is an animation by performing a series of transformation on a single image with an Animation. An animation showing a sequence of images in order with an AnimationDrawable.

     Enough on the discussion and let the fun begin :). I will show you how to make a "blink" animation on Android.

First, download the images below, we'll use it for the animation.

Or you can use your own images.We'll make a traffic light that blinks randomly :).

Create a new Android project on Eclipse and name it whatever you want. (It is not important and you can change it later)

Under res/ folder, create a new folder "anim" without the quotation and create a new XML file and name it "tween.xml". Copy and paste this code:

<set >
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="100"
    android:repeatMode="reverse"
    android:repeatCount="infinite" />
</set>

Edit the main.xml file and copy and paste the code below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sample Blink Animation on Android"
        android:textAppearance="?android:attr/textAppearanceMedium" />

        <FrameLayout
            android:id="@+id/rightIcon"
            android:layout_width="30.0dip"
            android:layout_height="30.0dip"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10.0dip"
            android:layout_marginRight="10.0dip" >

            <ImageView
                android:id="@+id/bsecond"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_red"
                android:visibility="visible" />

            <ImageView
                android:id="@+id/bfirst"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_yellow"
                android:visibility="visible" />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/rightIcon"
            android:layout_width="30.0dip"
            android:layout_height="30.0dip"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10.0dip"
            android:layout_marginRight="10.0dip" >

             <ImageView
                android:id="@+id/bfourth"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_green"
                android:visibility="visible" />
            <ImageView
                android:id="@+id/bthird"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_red"
                android:visibility="visible" />

          
        </FrameLayout>

        <FrameLayout
            android:id="@+id/rightIcon"
            android:layout_width="30.0dip"
            android:layout_height="30.0dip"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10.0dip"
            android:layout_marginRight="10.0dip" >

            <ImageView
                android:id="@+id/bsix"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_red"
                android:visibility="visible" />
            <ImageView
                android:id="@+id/bfifth"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img_green"
                android:visibility="visible" />

           
        </FrameLayout>
    </LinearLayout>

For the main Activity, used the code below:

public class AndroidBlinkAnimationActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        animate();
    }
    
    private void animate(){
     ImageView myImageView1 = (ImageView) findViewById(R.id.bfirst);
     ImageView myImageView2 = (ImageView) findViewById(R.id.bthird);
     ImageView myImageView3 = (ImageView) findViewById(R.id.bfifth);
     
     Animation myFadeInAnimation = AnimationUtils.loadAnimation(AndroidBlinkAnimationActivity.this,
    R.anim.tween);

        myImageView1.startAnimation(myFadeInAnimation);
     myImageView2.startAnimation(myFadeInAnimation);
     myImageView3.startAnimation(myFadeInAnimation);
    }
        
}

In the code, I created a method "animate" that will handle the 

ImageViews and the Animation itself. And you now have a blink animation!

Output: