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 2500 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"?>

<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"?>

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

<string name="action_settings">Settings</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

Tags:android animation, Android Examples, android imageview animation, android imageview blink animation, imageview

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