Android - Blinking image using the Alpha fade animation

Question

I've been struggling for a few days on this, finally just decided to ask. It's so simple I've got to be missing something very basic.

I have an XML layout page with an image defined. I have two anim XML pages, one to change alpha from 0 to 1, and the other from 1 to 0 in order to create a "blinking" effect. So the alphaAnimation is defined in XML, I just need to call it.

The image pops up, but there's no looping blinking effect.

public class blinker extends Activity {

   //create name of animation
Animation myFadeInAnimation;
Animation myFadeOutAnimation;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.scanning_view);

 //grab the imageview and load the animations
    ImageView myImageView = (ImageView) findViewById(R.id.blinkingView01); 
    Animation myFadeInAnimation = AnimationUtils.loadAnimation(null, R.anim.fade_in);
    Animation myFadeOutAnimation = AnimationUtils.loadAnimation(null, R.anim.fade_out);

//fade it in, and fade it out. 
    myImageView.startAnimation(myFadeInAnimation);
    myImageView.startAnimation(myFadeOutAnimation);
     }
}

Two XML Animation layouts in Anim resource:

<?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="50" android:repeatCount="infinite"/> 
 </set>

And the other:

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

Hi Charlie, love your show man. :) I edited original post, added in the two XML files (fade_in.xml and fade_out.xml) — Keith, Oct 11 '10 at 14:46

score 107 · Answer 1 · edited Jun 19 '15 at 10:46

107

The best way to tween fade :

ImageView myImageView = (ImageView) findViewById(R.id.imageView2); 
Animation myFadeInAnimation = AnimationUtils.loadAnimation(Splash.this, R.anim.tween);
myImageView.startAnimation(myFadeInAnimation);

in your res/anim/ create tween.xml tween 1s start opacity 0 to 1 and reverse infinit...

<?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:duration="1000" 
    android:repeatMode="reverse"
    android:repeatCount="infinite" />
</set>

edited Jun 19 '15 at 10:46

Bojan Kseneman

15,488
2
54
59

answered Jan 11 '12 at 14:41

Buchs sullivan

1,097
2
8
5

3

It worked for me !! I have kept fromAlpha as 0.2 so that the view does not disappear completely. Thanks Buchs, +1 for this. – Shraddha Dec 19 '12 at 05:18
For me, it only repeats once: in and out. Then it does nothing. – brainmurphy1 Sep 11 '13 at 01:31
2

@brainmurphy1 maybe you forgot `android:repeatCount="infinite"`. The repeat count needs to be positive or infinite. – Ben Kane Sep 19 '13 at 19:02
Code is working good. But I want to set this animation on a timer, so it should be blink per second. But due to fading, it is taking more time that a second. I change the duration from 1000 to 500, 600 & and so on. But cant get exact timing. Can you please help me to know what will be the value of duration in the case of a timer? – User Dec 09 '15 at 05:14

score 35 · Accepted Answer · answered Oct 11 '10 at 14:54

35

Why not use android:repeatMode="reverse"

answered Oct 11 '10 at 14:54

methodin

6,717
1
25
27

Still same issue. Screen appears, but no animation. – Keith Oct 11 '10 at 15:32
Why is your first parameter null instead of this in: nimationUtils.loadAnimation(null,... ? – methodin Oct 11 '10 at 17:05
that was yet another iteration, I've been through so many, including another complete rewrite to animate the image. Originally I stipulated "this". – Keith Oct 11 '10 at 23:28
I needed a break to rest sore eyes. I implemented two things after reading through responses Methodin, and I have it working now. Many thanks. – Keith Oct 11 '10 at 23:32
Methodin, too many hours at the screen and keyboard. :) The iteration aboved worked when I went back to "this". I decided not to use repeatMode="reverse" just so I could have more granualar control over the fade in and fade out speeds since each can be set independently of each other. Fast fade in, slow fade out by example. – Keith Oct 12 '10 at 02:24

score 17 · Answer 3 · answered Jul 21 '16 at 12:32

17

You can use the below alpha animation to set the blinking effects to the views in android.

blinkanimation= new AlphaAnimation(1, 0); // Change alpha from fully visible to invisible
blinkanimation.setDuration(300); // duration
blinkanimation.setInterpolator(new LinearInterpolator()); // do not alter animation rate
blinkanimation.setRepeatCount(3); // Repeat animation infinitely
blinkanimation.setRepeatMode(Animation.REVERSE);

After this add the animation to your view like,

view.setAnimation(blinkanimation);

or

view.startAnimation(blinkanimation);

answered Jul 21 '16 at 12:32

KarthikKPN

653
12
22

how to change duration in this method? – Hamid Jul 23 '16 at 16:03
1

Change it in blinkanimation.setDuration(your duration); @Hamid – KarthikKPN Jul 25 '16 at 13:22
LinearInterpolator is default one, no need to explicitly set it – YTerle Mar 24 '17 at 08:15
doesn't infinite animations have `-1` as repeat count ? – natinusala Jun 07 '17 at 08:00
1

@natinusala yes it is. `anim.setRepeatCount(Animation.INFINITE);` or `...(-1);` – O-9 Jan 15 '20 at 14:04

score 6 · Answer 4 · answered Jul 08 '18 at 16:13

If someone will decide to use programmatic version:

val anim = AlphaAnimation(1.0f, 0.0f)
anim.duration = 750
anim.fillAfter = true  

// here is repeat settings
anim.repeatMode = AlphaAnimation.REVERSE // ping pong mode
anim.repeatCount = 1 // count of repeats

yourView.startAnimation(anim)

Android - Blinking image using the Alpha fade animation

4 Answers4

Linked