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