Android Animation Alpha

Question

I've got animation:

<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/linear_interpolator">  
   <alpha  
       android:fromAlpha="0.2"  
       android:toAlpha="1.0"  
       android:duration="500"/>  
</set>

and ImageView:

<ImageView
    android:id="@+id/listViewIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/settings" 
    android:alpha="0.2"/>

and code:

final Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);
final ImageView iv = (ImageView) findViewById(R.id.listViewIcon);
anim .setFillAfter(true);
iv.startAnimation(anim);

So at the beginning I have ImageView with alpha 0.2 and at the end I want to have ImageView with alpha 1. But it doesn't work like that - when animation starts more alpha is added and animation finish with alpha 0.2

What do I have to change to animate my image from 0.2 up to 1?

I've checked with different settings - I set android:alpha="1.0", fromAlpa="1.0", toAlpha="0.2" it works like I expected - from alpha 1 to 0.2. It looks like alpha from ImageView is multiplied by alpha from animation...

To prevent the view from jumping back to 0.2 alpha at the end, use the `fillAfter` attribute: http://developer.android.com/reference/android/view/animation/Animation.html#attr_android:fillAfter — Jave, Dec 17 '13 at 09:06
it's not the case. Alpha doesn't go to 1. When I animate from 1->0.2 it works fine and stays at 0.2(I use fill after). When I want to animate from 0.2 to 1 it fades to almost 0 and goes to 0.2 — RCH, Dec 17 '13 at 09:09

score 120 · Answer 1 · edited Jul 09 '18 at 07:47

120

Try this

AlphaAnimation animation1 = new AlphaAnimation(0.2f, 1.0f);
animation1.setDuration(1000);
animation1.setStartOffset(5000);
animation1.setFillAfter(true);
iv.startAnimation(animation1);

edited Jul 09 '18 at 07:47

toto_tata

14,526
27
108
198

answered Dec 17 '13 at 08:13

Vaibhav Agarwal

4,499
3
19
20

reove alpha from imageview proprties and uninsatll app from your device. clean, build and install again. because it is working my side – Vaibhav Agarwal Dec 17 '13 at 08:34
I don't want to remove alpha - image should be faded with alpha 0.2. Aplication is doing some stuff and when is ready I want to have my image animated to alpha 1. – RCH Dec 17 '13 at 08:38
Please check edited code its working fine on my google nexus 4. My imageview alpha is 0.2 at start but after applying animation it changed to 1.0 and changes persist. – Vaibhav Agarwal Dec 17 '13 at 09:50
1

I did it different way - instead of setting alpha in layout or by setAlpha/setImageAlpha I made animation 0.2->1 and put it onCreate. Now when my animation is triggered it goes perfectly from 0.2->1 – RCH Dec 17 '13 at 09:56

score 57 · Answer 2 · answered Sep 02 '18 at 18:33

57

Might be a little late, but found a lovely solution in the android docs.

//In transition: (alpha from 0 to 0.5)
view.setAlpha(0f);
view.setVisibility(View.VISIBLE);
view.animate()
   .alpha(0.5f)
   .setDuration(400)
   .setListener(null);

//Out transition: (alpha from 0.5 to 0)
view.setAlpha(0.5f)
view.animate()
   .alpha(0f)
   .setDuration(400)
   .setListener(new AnimatorListenerAdapter() {
           @Override
           public void onAnimationEnd(Animator animation) {
           view.setVisibility(View.GONE);
         }
    });

answered Sep 02 '18 at 18:33

Julián M.

912
8
11

1

that's what i'm looking for – Radesh Dec 10 '18 at 13:14
Works great, thanks! Just wondering though, would `.setListener(null);` potentially remove/interfere with other listeners, e.g. onClick/onTouch listeners? – Erlend K.H. Jan 11 '19 at 15:16

aminography · Answer 3 · 2018-12-31T17:04:50.677

43

• `Kotlin Version`

Simply use ViewPropertyAnimator like this:

iv.alpha = 0.2f
iv.animate().apply {
    interpolator = LinearInterpolator()
    duration = 500
    alpha(1f)
    startDelay = 1000
    start()
}

edited Dec 31 '18 at 17:04

answered Oct 27 '18 at 10:30

aminography

21,986
13
70
74

1

This is the only working solution when trying to mix beginDelayedTransition with ImageView.animate alpha animation. – Coding John Nov 29 '19 at 14:30
3

Yey! great answer! long live Kotlin! – Oz Shabat May 12 '20 at 13:38

score 18 · Answer 4 · answered Jun 07 '16 at 08:09

18

Setting alpha to 1 before starting the animation worked for me:

AlphaAnimation animation1 = new AlphaAnimation(0.2f, 1.0f);
animation1.setDuration(500);
iv.setAlpha(1f);
iv.startAnimation(animation1);

At least on my tests, there's no flickering because of setting alpha before starting the animation. It just works fine.

answered Jun 07 '16 at 08:09

Iván Pérez

2,278
1
24
49

This worked for me too (edit: my mistake, I DO have XML interference: android:alpha="0"). Will play around with this a bit, but I do need it to start at 0 so this works for now. Thanks. – the_dude_abides Jul 06 '17 at 21:34

score 4 · Answer 5 · answered Jul 30 '20 at 21:59

This my extension, this is an example of change image with FadIn and FadOut :

fun ImageView.setImageDrawableWithAnimation(@DrawableRes() resId: Int, duration: Long = 300) {    
    if (drawable != null) {
        animate()
            .alpha(0f)
            .setDuration(duration)
             .withEndAction {
                 setImageResource(resId)
                 animate()
                     .alpha(1f)
                     .setDuration(duration)
             }

    } else if (drawable == null) {
        setAlpha(0f)
        setImageResource(resId)
        animate()
            .alpha(1f)
            .setDuration(duration)
    }
}

score 2 · Answer 6 · answered Mar 07 '15 at 14:02

Hm...

The thing is wrong, and possibly in the proper operation of the animations in the Android API.

The fact is that when you set in your code alpha value of 0.2f is based on the settings in the xml file for android it means that :

0.2f = 0.2f of 0.2f (20% from 100%) ie from 0.2f / 5 = 0.04f
1f = 0.2f

So your animation in fact works from 0.04f to 0.2f

flag setFillAfter(true) certainly works, but you need to understand that at the end of your animation ImageView will have the alpha value 0.2f instead of one, because you specify 0.2f as marginally acceptable value in the animation (a kind of maximum alpha channel).

So if you want to have the desired result shall carry all your logic to your code and manipulate animations in code instead of determining in xml.

You should understand that your animations directly depends of two things:

LayoutParams of Animated View
Animation parameters.

Animation parameters manipulate your LayoutParams in setFillAfter\setFillBefore methods.

Yes. You are right. When i change start layout params at my code it was worked like a charm! — , Mar 07 '15 at 14:09

score 2 · Answer 7 · edited Apr 18 '18 at 23:36

2

The "setStartOffset" should be smaller, else animation starts at view alpha 0.xf and waits for start offset before animating to 1f. Hope the following code helps.

AlphaAnimation animation1 = new AlphaAnimation(0.1f, 1f);

animation1.setDuration(1000);
animation1.setStartOffset(50);

animation1.setFillAfter(true);

view.setVisibility(View.VISIBLE);

view.startAnimation(animation1);

edited Apr 18 '18 at 23:36

ElasticCode

7,311
2
34
45

answered Apr 18 '18 at 20:29

Chandrima Bhattacharjee

421
5
3

score 1 · Answer 8 · edited Apr 26 '18 at 06:17

1

<ImageView
    android:id="@+id/listViewIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/settings"/>

Remove android:alpha=0.2 from XML-> ImageView.

edited Apr 26 '18 at 06:17

DarkCygnus

7,420
4
36
59

answered Mar 07 '15 at 13:40

Pavlik Zavarski

23
6

score 0 · Answer 9 · answered Apr 08 '20 at 14:23

View.setOnTouchListener { v, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            v.alpha = 0f
            v.invalidate()
        }
        MotionEvent.ACTION_UP -> {
            v.alpha = 1f
            v.invalidate()


        }
    }
    false
}

score 0 · Answer 10 · answered May 25 '21 at 07:39

fun View.toggleAlpha(isShow: Boolean, delay: Long = 200, invisibleMode: Int = View.GONE) {
    if (isShow) animateAlpha(View.VISIBLE, delay) else animateAlpha(invisibleMode, delay)
}

fun View.animateAlpha(visibility: Int, delay: Long = 200) {
    if (visibility == View.VISIBLE) {
        setVisibility(View.VISIBLE)
    }

    val alpha = when (visibility) {
        View.GONE, View.INVISIBLE -> 0f
        View.VISIBLE -> 1f
        else -> 1f
    }

    animate().apply {
        duration = delay
        alpha(alpha)
        withEndAction {
            setVisibility(visibility)
        }
    }
}

Android Animation Alpha

10 Answers10

• `Kotlin Version`

Linked

Android Animation Alpha

10 Answers10

• Kotlin Version

Linked

• `Kotlin Version`