Question

I’m porting an app from iOS to Android. In the iOS app, there is an animation of a view “dropping down” while pushing the views beneath it down with it. See example here (download this app & click the “Join” button to see the drop down panel effect):
AppFreeway

I’ve been trying to replicate this effect in Android, I got pretty close by creating a TranslateAnimation in XML and later calling setAnimation for the view that’s dropping down:

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="-100%" android:toYDelta="0%"
android:duration="500" />

anim = AnimationUtils.loadAnimation(
                this, R.anim.contact_animation_enter);
joinPanel.startAnimation(anim);

The problem is when I add the view to the parent view using parent.addView(panel, 0) because the parent instantly moves everything down and only later the animation begins. If you watch the iOS version, you’ll see that when the “Join” button is clicked, everything gets animated down as the drop down panel moves into view.

Any ideas on how to achieve the same effect?

Answer 1

This is how I did it in a custom view I created. I had the view I wanted to display already coded into the xml layout file with android:visibility = "gone". The only thing I haven’t figured out yet is when the EditText box is scaling, it enlarges the text, then shrinks it to normal size. If I find a solution to this problem I will post it.

private EditText m_editText;  

protected void onFinishInflate ()
{
    super.onFinishInflate ();

    m_editText = (EditText) findViewById(R.id.edit_text);
}


public void displayView(View activateView)
{
    if (activateView.getVisibility() == View.GONE)
    {
        //fade in from top
        activateView.setVisibility(View.VISIBLE);
        final Animation fadeInFromTopAnimation = AnimationUtils.loadAnimation(context, R.anim.fade_in_from_top);
        fadeInFromTopAnimation.setAnimationListener(new AnimationListener()
            {
                public void onAnimationStart(Animation anim)
                {
                    //Shrink the text box down while inserting new view
                    //Add any padding or margins if needed
                    float scale = (float)(m_editText.getHeight() + m_weatherRow.getHeight()) / m_editText.getHeight();

                    AnimationSet shrinkDownAnimation = new AnimationSet(true);
                    shrinkDownAnimation.setInterpolator(new LinearInterpolator());
                    ScaleAnimation scaleAnimation = new ScaleAnimation(1, 1,  //X Scale
                                                                       scale, 1,  //Y Scale
                                                                       Animation.RELATIVE_TO_SELF, 0.5f, //X Pivot Point (set to center but it shouldn't matter)
                                                                       Animation.RELATIVE_TO_SELF, 1.0f); //Y Pivot Point (bottom)
                    scaleAnimation.setDuration(fadeInFromTopAnimation.getDuration());
                    shrinkDownAnimation.addAnimation(scaleAnimation);

                    m_editText.startAnimation(shrinkDownAnimation);
                }
                public void onAnimationEnd(Animation anim) {}
                public void onAnimationRepeat(Animation anim) {}
            });

        activateView.startAnimation(fadeInFromTopAnimation);

And here is my fade_in_from_top.xml animation file:

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android           = "http://schemas.android.com/apk/res/android"
    android:interpolator    = "@android:anim/linear_interpolator">

    <alpha
        android:fromAlpha       = "0"
        android:toAlpha         = "1"
        android:duration        = "500">
    </alpha>

    <scale
        android:fromXScale      = "1"
        android:fromYScale      = "0"
        android:toXScale        = "1"
        android:toYScale        = "1"
        android:pivotX          = "50%"
        android:pivotY          = "0%"
        android:duration        = "500">
    </scale>
</set>