CODEWITHSUNDEEP
javaandroidanimationkotlinalpha
RCH
RCH

Reputation: 1309

Android Animation Alpha

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

Upvotes: 88

Views: 128445

Answers (10)

Zakhar Rodionov
Zakhar Rodionov

Reputation: 1503

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

Upvotes: 0

YanSte
YanSte

Reputation: 10839

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

Upvotes: 4

Gorkem KARA
Gorkem KARA

Reputation: 191

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


        }
    }
    false
}

Upvotes: 0

aminography
aminography

Reputation: 22832

• Kotlin Version

Simply use ViewPropertyAnimator like this:

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

Upvotes: 43

Juli&#225;n M.
Juli&#225;n M.

Reputation: 932

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

Upvotes: 57

Vaibhav Agarwal
Vaibhav Agarwal

Reputation: 4499

Try this

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

Upvotes: 120

Pavlik Zavarski
Pavlik Zavarski

Reputation: 23

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

Upvotes: 1

Chandrima Bhattacharjee
Chandrima Bhattacharjee

Reputation: 461

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

Upvotes: 2

Iv&#225;n P&#233;rez
Iv&#225;n P&#233;rez

Reputation: 2539

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.

Upvotes: 18

Sergey Shustikov
Sergey Shustikov

Reputation: 15831

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.

Upvotes: 2

Related Questions