Bizarre Alpha Animation Issue on a View inside a FrameLayout

Question

I'm building a component that looks something like this:

<FrameLayout>
  // The following two are added programmatically during construction
  <View> // match-parent in both dimensions, act as an overlay
  <RelativeLayout> // Bar across the top of the component, e.g. notification bar type thing

  // User's content goes here

</FrameLayout>

The idea is that user will place the custom FrameLayout somewhere and populate it with content, and when it's constructed, it will programmatically add a View with zero alpha that covers the entire layout and then a short and wide bar across the top used for alerts/notifications. When the alert bar is touched to expand, the overlay's alpha is animated to around 50% to gray out the area that cannot be touched. Like how a DialogFragment will gray out the rest of the screen when shown.

Originally the overlay is simple like: (omitting some keywords for brevity)

<View alpha="0.0"/>

And that gets inflated.

In the FrameLayout's class, I create a couple animations:

AlphaAnimation fadeInAnimation = new AlphaAnimation(0.0f, 0.5f);
AlphaAnimation fadeOutAnimation = new AlphaAnimation(0.5f, 0.0f);
...
// in some initialization code I put in a couple of extra details
fadeInAnimation.setFillAfter(true);
fadeInAnimation.setDuration(500);
fadeOutAnimation.setFillAfter(true);
fadeOutAnimation.setDuration(500);

And when the touch action occurs, I simply call them like overlay.startAnimation(fadeInAnimation).

The strange behavior is that if the overlay is initialized to some small alpha, the animation doesn't do anything. I can verify that it at least gets called, but the alpha stays the same.

However, if I leave the overlay's alpha at its default 1.0, and set its visibility to INVISIBLE at constructio, the animations will correctly trigger. This also works if the starting alpha is something like 0.6. The fadeInAnimation snaps to 0 alpha and brings it up to 0.5, and then the rest acts normally.

I haven't yet tested to see if there's some lower bound on where the alpha breaks, or if there is some kind of relationship between the range on the animation and which values are invalid.

Any ideas?

http://stackoverflow.com/questions/11386953/alphaanimation-does-not-work — StoneBird, Nov 24 '14 at 23:22
@StoneBird Looks like I didn't search properly. That seems unintuitive. If you'd like to post it as an answer, I'll give you the bounty credit. — defect, Nov 24 '14 at 23:29

score 1 · Accepted Answer · edited May 23 '17 at 11:57

As quoted in the linked answer here:

The problem is in android:alpha="0". This property sets transparency of a View http://developer.android.com/reference/android/view/View.html#attr_android:alpha

When alpha property is equal to 0 then animation is changing transparency from 0*0.0f=0 to 0*1.0f=0. When alpha property is set to 1 then animation is changing transparency from 1*0.0f=0 to 1*1.0f=1. That's why in first case you can't see text and in the second everything works as expected.

Meanwhile I also suggest you to try out Animator or ObjectAnimator objects, which are simple xml files typically stored in your animator folder. It support several attributes and I think it animates the properties in an intuitive way. That is, if you want it to animate from 0 to 1 it will change the property directly from 0 to 1.

Example code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:valueFrom="0"
        android:valueTo="1"
        android:propertyName="alpha"
        android:duration="@android:integer/config_shortAnimTime" />
</set>

Thanks for the quick response. Will award when the timer is up. — defect, Nov 24 '14 at 23:41

Bizarre Alpha Animation Issue on a View inside a FrameLayout

1 Answers1