Adding animation to a ListView in order to expand/collapse content

Question

I have a list view which uses a custom adapter in order to show my custom content. Its layout is the following.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/itemimage"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="5"
            android:scaleType="fitCenter"/>
        <TextView
            android:id="@+id/itemdescription"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="10dp"
            android:textSize="16sp"
            android:layout_weight="1"/>
    </LinearLayout>    
    <TextView
            android:id="@+id/itemtext"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="TEXT CONTENT"
            android:layout_weight="1"/>
</LinearLayout>    

I would like that the listview only showed the view with the ids itemimage and item description, keeping the itemtext hidden. The idea is to have an onclicklistener on each item of the list, in order to expand that item so it shows the itemtext content. I know I should use Tweening animation in order to expand/collapse each item, but I can't figure out how to do that.

Can anyone help me with it? If you need more code snippets, feel free to ask.

Thanks in advance.

Answer 1

To do that, I built an Animation class, which animates the margin to negative values, making the item disappear.

The animation looks like this:

public class ExpandAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    super.applyTransformation(interpolatedTime, t);

    if (interpolatedTime < 1.0f) {

        // Calculating the new bottom margin, and setting it
        mViewLayoutParams.bottomMargin = mMarginStart
                + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

        // Invalidating the layout, making us seeing the changes we made
        mAnimatedView.requestLayout();
    }
}
}

I have an entire example app for this animation on my blog post

Answer 2

Tried Udinic's solution, but finally chose this alternative:

res/anim/scale_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="700"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="0%"
    android:toXScale="1.0"
    android:toYScale="0.0" />
</set>

Animate ListView implementation:

protected void animateView(final View v, final int animResId, final int endVisibility){
    Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),
            animResId);
    anim.setAnimationListener(new Animation.AnimationListener() {
        public void onAnimationStart(Animation animation) {
            v.setVisibility(View.VISIBLE);
        }
        public void onAnimationEnd(Animation animation) {
            v.setVisibility(endVisibility);
        }
        public void onAnimationRepeat(Animation animation) {}
    });
    v.startAnimation(anim);
}

Example calls to animate my ListView (or any View child class):

animateView(listView1, R.anim.scale_down, View.GONE);
animateView(listView1, R.anim.scale_up, View.VISIBLE);

It is working on my KitKat phone.