Android ImageView Blink Animation

In this Android Example, we will see how to make an ImageView blink using AnimationDrawable class.

Steps to create frame-by-frame animations using AnimationDrawable

define animation in an XML file, place it in res/drawable/ folder and set it as background to a View object.
call start() to run the animation

Create an Android Project

Create a new Android project and name it as ImageViewBlink .

Download “ImageView Blink Animation” ImageViewBlink.zip – Downloaded 2441 times – 1 MB

Resources

colors.xml

Create a new file res/values/colors.xml and copy paste the following content.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="view_divider_color">#BABABA</color>
    <color name="sliding_list_divider_color">#DADADA</color>

</resources>

<? xml version = "1.0" encoding = "utf-8" ?>

< resources >

< color name = "view_divider_color" > #BABABA</color>

< color name = "sliding_list_divider_color" > #DADADA</color>

< / resources >

strings.xml

Open res/values/strings.xml and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ImageViewBlink</string>
    <string name="action_settings">Settings</string>
    <string name="icon">Icon</string>
    <string name="new_arrivals">New Arrivals</string>

</resources>

<? xml version = "1.0" encoding = "utf-8" ?>

< resources >

< string name = "app_name" > ImageViewBlink < / string >

< string name = "action_settings" > Settings < / string >

< string name = "icon" > Icon < / string >

< string name = "new_arrivals" > New Arrivals < / string >

< / resources >

Layout file – activity_main.xml

This is the main layout file which holds the ImageView.
Open res/layout/activity_main.xml and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EDEDED" >

    <RelativeLayout
        android:id="@+id/header_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:padding="10dp" >

        <ImageView
            android:id="@+id/new_arrivals_img"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:contentDescription="@string/icon" />

        <TextView
            android:id="@+id/new_arrivals_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/new_arrivals_img"
            android:paddingLeft="5dp"
            android:text="@string/new_arrivals"
            android:textSize="16sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <View
        android:id="@+id/div1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/header_layout"
        android:background="@color/view_divider_color" />

    <View
        android:id="@+id/div2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/div1"
        android:background="@color/sliding_list_divider_color" />

</RelativeLayout>

<? xml version = "1.0" encoding = "utf-8" ?>

< RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : background = "#EDEDED" >

< RelativeLayout

android : id = "@+id/header_layout"

android : layout_width = "fill_parent"

android : layout_height = "wrap_content"

android : background = "@android:color/white"

android : padding = "10dp" >

< ImageView

android : id = "@+id/new_arrivals_img"

android : layout_width = "48dp"

android : layout_height = "48dp"

android : contentDescription = "@string/icon" / >

< TextView

android : id = "@+id/new_arrivals_txt"

android : layout_width = "wrap_content"

android : layout_height = "wrap_content"

android : layout_centerVertical = "true"

android : layout_toRightOf = "@+id/new_arrivals_img"

android : paddingLeft = "5dp"

android : text = "@string/new_arrivals"

android : textSize = "16sp"

android : textStyle = "bold" / >

< / RelativeLayout >

< View

android : id = "@+id/div1"

android : layout_width = "match_parent"

android : layout_height = "1dp"

android : layout_below = "@+id/header_layout"

android : background = "@color/view_divider_color" / >

< View

android : id = "@+id/div2"

android : layout_width = "match_parent"

android : layout_height = "1dp"

android : layout_below = "@+id/div1"

android : background = "@color/sliding_list_divider_color" / >

< / RelativeLayout >

Drawable – new_arrivals_animation.xml

Create a new file res/drawable/new_arrivals_animation.xml and copy paste the following content.
An AnimationDrawable defined in XML consists of a single <animation-list> element, and a series of nested <item> tags. Each item defines a frame of the animation.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/selected"
    android:oneshot="false" >

    <item
        android:drawable="@drawable/new_arrivals"
        android:duration="500"/>
    <item
        android:drawable="@drawable/new_trans"
        android:duration="500"/>

</animation-list>

<? xml version = "1.0" encoding = "utf-8" ?>

< animation - list xmlns : android = "http://schemas.android.com/apk/res/android"

android : id = "@+id/selected"

android : oneshot = "false" >

< item

android : drawable = "@drawable/new_arrivals"

android : duration = "500" / >

< item

android : drawable = "@drawable/new_trans"

android : duration = "500" / >

< / animation - list >

Source files

MainActivity class

This is the main activity class which displays the ImageView.

package com.androidopentutorials.ivblink;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

	ImageView newArrivalsImg;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// Load the ImageView that will host the animation and
		newArrivalsImg = (ImageView) findViewById(R.id.new_arrivals_img);

		// set its background to our AnimationDrawable XML resource.
		newArrivalsImg.setBackgroundResource(R.drawable.new_arrivals_animation);

		/*
		 * Get the background, which has been compiled to an AnimationDrawable
		 * object.
		 */
		AnimationDrawable frameAnimation = (AnimationDrawable) newArrivalsImg
				.getBackground();

		// Start the animation (looped playback by default).
		frameAnimation.start();
	}
}

package com . androidopentutorials . ivblink ;

import android . app . Activity ;

import android . graphics . drawable . AnimationDrawable ;

import android . os . Bundle ;

import android . widget . ImageView ;

public class MainActivity extends Activity {

ImageView newArrivalsImg ;

@ Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

// Load the ImageView that will host the animation and

newArrivalsImg = ( ImageView ) findViewById ( R . id . new_arrivals_img ) ;

// set its background to our AnimationDrawable XML resource.

newArrivalsImg . setBackgroundResource ( R . drawable . new_arrivals_animation ) ;

* Get the background, which has been compiled to an AnimationDrawable

* object.

AnimationDrawable frameAnimation = ( AnimationDrawable ) newArrivalsImg

. getBackground ( ) ;

// Start the animation (looped playback by default).

frameAnimation . start ( ) ;

}

Output

M	T	W	T	F	S	S
« Mar
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Steps to create frame-by-frame animations using AnimationDrawable

Create an Android Project

Resources

colors.xml

strings.xml

Layout file – activity_main.xml

Drawable – new_arrivals_animation.xml

Source files

MainActivity class

Output

About The Author

nithya