Question

I have a custom search panel, which is a part of main layout. Most of time the panel is hidden. I would like to add appearing/disappearing animation to the panel. Here is the simplified layout excerpt:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <RelativeLayout
        android:id="@+id/layoutSearch"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:visibility="gone" >
        <EditText
            android:id="@+id/editSearch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <<Other inner views to be animated>>
    </RelativeLayout>
    <<Other views, which should not be affected by the animation>>
</LinearLayout>

Try 1: I added animation resources and attach them to the @id/layoutSearch with this line in XML:

android:layoutAnimation="@anim/search_in_layout"

anim/search_in.xml:

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator"
    android:fromYDelta="-100%p"
    android:toYDelta="0"
    android:duration="@android:integer/config_longAnimTime" />

anim/search_in_layout.xml:

<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/search_in" />

The animation works fine, but only for the panel appearing. The panel disappears in a moment without animation when I hide it with:

mSearchLayout.setVisibility(View.GONE);

Try 2: I guess the above solution does not work as the animation destination parameters match the current panel position. OK, I created two more animation resources: anim/search_out.xml and anim/search_out_layout.xml. The only differences are exchanged “fromYDelta” and “toYDelta” values and updated “android:animation” value. Then I load the resources in the code and set them to the @id/layoutSearch like this:

LayoutAnimationController controller =
    AnimationUtils.loadLayoutAnimation(this, R.anim.search_out_layout);
mSearchLayout.setLayoutAnimation(controller);

The “out” animation triggered on calling of setLayoutAnimation(). After the animation the search panel returns to it original position on the screen it had before “out” animation. If I try to call mSearchLayout.setVisibility(View.GONE) just after setLayoutAnimation(), I see no animation, the panel disappears at once.

Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it’s over complicated.

I guess I missed something important. Is there a way to implement GONE animation a bit easy?

Answer 1

Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it’s over complicated.

That’s what you should do and actually that’s not hard to achieve.

Sample code:

public class YourClass extends Foo implements AnimationListener {

    //...

    @Override
    public void onAnimationEnd(Animation a) {
        // Do stuff.
    }

    @Override
    public void onAnimationRepeat(Animation a) {    
    }

    @Override
    public void onAnimationStart(Animation a) {
    }

}