Android Tween Animation Blinks on startAnimation()

Question

I have a Frame Layout with two Image Views. One on top of the other.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp">

<ImageView
    android:id="@+id/post_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true" />

<ImageView
    android:id="@+id/double_tap_heart"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:src="@drawable/double_tap_heart" 
    android:visibility="invisible"/>

</FrameLayout>

I would like to hide the second ImageView by default and show it on top of the first ImageView with an animation for 1000ms when a user double taps on a post. Exactly the way the Instagram app works.

Here is my Animation XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <set
        android:interpolator="@android:anim/accelerate_decelerate_interpolator">
        <scale
            android:duration="400"
            android:fromXScale="0.3"
            android:fromYScale="0.3"
            android:toXScale="1.15"
            android:toYScale="1.15"
            android:pivotX="50%"
            android:pivotY="50%"/>
        <alpha
            android:duration="400"
            android:fromAlpha="0.0"
            android:toAlpha="1.0" />
    </set>
    <set
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:startOffset="400">
        <scale
            android:duration="100"
            android:fromXScale="1.15"
            android:fromYScale="1.15"
            android:toXScale="1.0"
            android:toYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"/>
    </set>
    <set
        android:startOffset="500">
        <scale
            android:duration="300"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:toXScale="1.0"
            android:toYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"/>
        </set>
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="800" >
        <scale
            android:duration="200"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:toXScale="0.2"
            android:toYScale="0.2"
            android:pivotX="50%"
            android:pivotY="50%"/>
        <alpha
            android:duration="200"
            android:fromAlpha="1.0"
            android:toAlpha="0.0" />
        </set>

</set>

In my ListViewAdapter I call

ImageView doubleTapHeart = (ImageView) findViewById(R.id.double_tap_heart);
doubleTapHeart.startAnimation(doubleTapHeartAnimation);

whenever someone double taps on the post. The problem I am facing is that the double_tap_heart drawable is blinked for approx. 1ms at full size just before the animation begins. After the animation ends the ImageView goes back to being invisible.

How can I make an ImageView only show during animation without the blinking effect? I've seen several other posts on this, but no answers that work. I've experimented with setAlpha() and setZAdjustment() but nothing has gotten rid of that blink.

Answer 1

For those of you who may come across this question in your own search for answers...

The blink problem is caused due to the fact that we are using a View Animation. This is the animation system Android uses prior to 3.0. View animations are much more primitive in nature in the fact that they apply the animation to the view's container. This unfortunately causes problems when the view is GONE or INVISIBLE prior to animation.

The Answer??? Use Androids new animation system Property Animation http://developer.android.com/guide/topics/graphics/prop-animation.html The reason this eliminates the blink is because it applies the changes defined in your animation directly to the properties of the view you are working with. Hence the name "Property" animation... Where as the other could be called "Container" animation.

The best practice is to set the view's alpha to 0.0 initially in your layout xml file. Then in your animation change the alpha to make it visible, and at the end of the animation change the alpha back to 0.0 That way you don't have to mess with making the view visible/invisible/gone.

Hope this helps others.