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

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

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

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

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();

}

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