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.
1 2 3 4 5 6 7 | <?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.
1 2 3 4 5 6 7 8 9 | <?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.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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.
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 32 33 | 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(); } } |