Android Animation Alpha

Viewed 118281

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...

10 Answers

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);
         }
    });

• Kotlin Version

Simply use ViewPropertyAnimator like this:

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

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)
    }
}
View.setOnTouchListener { v, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            v.alpha = 0f
            v.invalidate()
        }
        MotionEvent.ACTION_UP -> {
            v.alpha = 1f
            v.invalidate()


        }
    }
    false
}
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)
        }
    }
}
Related