Android - make ImageView "blink"

Question

I want to make my ImageView appear to blink. More exactly, on an event like a button click, I want an ImageView to change its src for 1 second, then change back, then again etc. And then it should stop, and the ImageView should have the same src as previous. I tried to do something based on another question, but it doesn't work...

private class MyHandler extends Handler {
    public ImageView imgView;

    @Override
    public void handleMessage(Message msg) {
        if (imgView != null) {
            switch (msg.what) {
            case 0:
                imgView.setImageResource(R.drawable.red_img);
                break;
            case 1:
                imgView.setImageResource(R.drawable.white_img);
                break;

            }
        }
        super.handleMessage(msg);
    }
}

(...)

MyHandler blinker = new MyHandler();
blinker.imgView = imgView;
for (int j = 0; j < 5; j++) {
    Message msg = new Message();
    if (j % 2 == 0) {
        msg.what = 0;
    } else {
        msg.what = 1;
    }

    blinker.sendMessageDelayed(msg, j * 300);
}

Does anyone know how this can be done (if it CAN be done). Thanks!

Second, try with `j < 1000` condition. 5 iterations is too short period (1.5 seconds) — Dmitry Zaytsev, Aug 14 '13 at 14:36
Ofc it can be done, see my answer here: https://stackoverflow.com/a/50299715/2102748 — milosmns, May 11 '18 at 20:23

score 24 · Accepted Answer · answered Aug 15 '13 at 08:28

24

Or you could simply use AnimationDrawable by defining it in xml:

<animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/state1" android:duration="1000" />
    <item android:drawable="@drawable/state2" android:duration="1000" />
</animation-list>

and calling start() on it:

ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
img.setImageResource(R.drawable.my_blinking_drawable);
AnimationDrawable frameAnimation = (AnimationDrawable) img.getDrawable();
frameAnimation.start();

answered Aug 15 '13 at 08:28

EvilDuck

4,386
23
32

That did the trick. I ended up adding these lines to your code: img.clearAnimation(); frameAnimation.stop();. And in the XML I pun oneshot="true" and copy-pasted a few times the items from the animation-list – Florin Vistig Aug 19 '13 at 09:46
1

..I had to add XML namespace for the element: xmlns:android="http://schemas.android.com/apk/res/android" – Li3ro Oct 27 '15 at 09:00

score 3 · Answer 2 · answered Aug 14 '13 at 15:33

The following code will place an ImageView on the screen, and when the ImageView is clicked, it will blink between 2 different images for 5 seconds:

int numberOfTimesToBlink = 4;
long blinkInterval = 1000;  // 1 second

final ImageView blinkingImageView = (ImageView)findViewById(R.id.blinkingImageView);

// setBackgroundDrawable is deprecated but it still works, and the newer method (setBackground) has min API level of 16
blinkingImageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.yourFirstImage));
blinkingImageView.setTag("yourFirstImage");

final CountDownTimer blinkTimer = new CountDownTimer((numberOfTimesToBlink+1)*1000, blinkInterval) {
    @Override
    public void onTick(long millisUntilFinished) {
        if (blinkingImageView.getTag() == "yourFirstImage") {
            blinkingImageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.yourSecondImage));
            blinkingImageView.setTag("yourSecondImage");
        }
        else if (blinkingImageView.getTag() == "yourSecondImage") {
            blinkingImageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.yourFirstImage));
            blinkingImageView.setTag("yourFirstImage");
        }
    }

    @Override
    public void onFinish() {

    }
};

blinkingImageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        blinkTimer.start();
    }
});

And the xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView android:id="@+id/blinkingImageView"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content" />

</RelativeLayout>

score 1 · Answer 3 · answered Aug 14 '13 at 14:31

You can just change the temporary source image and start a Timer for 1 second, after which the original image can be shown again:

image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(final View v) {
        ImageView img = (ImageView) v;
        img.setImageResource(R.drawable.temporary_image);
        Timer t = new Timer();
        t.schedule(new TimerTask() {
            @Override
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        img.setImageResource(R.drawable.main_image)
                    }
                });
            }
        }, 1000);
    }
});

Prakhar · Answer 4 · 2013-08-14T14:30:56.150

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha android:fromAlpha="0.0"
            android:toAlpha="1.0"
            android:interpolator="@android:anim/accelerate_interpolator"
            android:duration="600"
            android:repeatMode="reverse"
            android:repeatCount="infinite"/>
    </set>

or have a look at this

link

Android - make ImageView "blink"

4 Answers4