[Android] A Simple Way To Make View Flash on Top of Another View

[Android] Simple Flashing a View on Top of Another View

Flashing an image is a simple animation that can be achieved by laying an image on top of another and toggling the visibility at regular intervals. In Android, a View can be placed on top of another View, with a FrameLayout. Views can also be hidden and displayed by changing its visibility, through setVisibility. To demonstrate this method, I’ve prepared a small example of an arrow that flashes over a rocket when the rocket is clicked (the rocket and arrow clipart were obtained from Open Clip Art Library). The source is available from my Github repository.

The main layout, defined by rocket.xml, contains the FrameLayout:

<FrameLayout 
    android:id="@+id/frame" 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent">
	<ImageView 
	    android:id="@+id/rocketImage"
	    android:layout_gravity="center_horizontal" 
	    android:layout_height="wrap_content" 
	    android:src="@drawable/rocket" 
	    android:layout_width="wrap_content">
	</ImageView>
	<ImageView
        android:id="@+id/uparrowImage"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:visibility="invisible"
        android:src="@drawable/uparrow">
	</ImageView>
</FrameLayout>

By positioning mentioning the rocketImage before the uparrowImage, the image of the arrow will be placed on top of the rocket. However, the XML also sets the arrow to be invisible, so the arrow will not be visible when this view is displayed.

To perform the flashing, the visibility of the arrow is toggled at regular intervals. The changing of the visibility status should be done on the UI thread (see the article Painless Threading). Since there is a defined interval between changing the visibility, I use postDelayed as follows:

    // ...

	private final OnClickListener trigger = new OnClickListener() {

		@Override
		public void onClick(View v) {
			arrowView.removeCallbacks(flashTask);
			flashTask.reset();
			postFlashTask();
		}
	};

    // ...

    private View arrowView;

    // ...

	/**
	 * Reposts the task to toggle the visibility after short interval.
	 */
	private void postFlashTask() {
		arrowView.postDelayed(flashTask, 250);
	}

	/**
	 * This is the {@link Runnable} that will toggle the visibility of the
	 * arrow. This can be configured to flash up a certain number of times.
	 */
	private class FlashTask implements Runnable {

		/**
		 * The number of times to flash before stopping.
		 */
		private int countDown = 0;

		/**
		 * Resets the {@link Runnable}, ready to flash the arrow a certain
		 * number of times again.
		 */
		public void reset() {
			countDown = 3;
		}

		@Override
		public void run() {
			if (arrowView.getVisibility() == View.VISIBLE) {
				arrowView.setVisibility(View.INVISIBLE);
				countDown--;
				if (countDown > 0) {
					// Can continue flashing.
					postFlashTask();
				}
			} else {
				arrowView.setVisibility(View.VISIBLE);

				// The arrow should should always finish in the invisible state.
				postFlashTask();
			}
		}
	}

    // ...

That is all there is to in this technique! Another possibility is to use AlphaAnimation frame animation as described in the View Animation section of the developer guide and version 3 introduces Property Animation, but I’ll leave that for another time. With the technique illustrated in this tutorial, you are not limited to ImageViews – you can also do this with other types of views.

Advertisements

One Response to [Android] A Simple Way To Make View Flash on Top of Another View

  1. Pingback: [Android] Using Frame Animation to recreate the flashing arrow « Kah – The Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: