android - Expand ListView item with animation

Question

I have a ListView. Initially, the ListView contains some data. When the user clicks on an item, another layout will be dynamically added to that item so it's height will be increased.

Right now, when the item's height is increased, it shows the modified item instantly. However, what I want is for this to be animated so it increases the item's height gradually.

question from:https://stackoverflow.com/questions/12729830/expand-listview-item-with-animation

Answer 1

I think I was looking for the same as was asked, I was looking for a way to animate the expanding of the listview item as some new content is shown (I was just changing the visibility on some views from GONE to VISIBLE). I had used the answer by mirroredAbstraction to help me apply a translate animation (I didn't want a rotate animation):

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

to each of the views. It create a nice effect, but looking closely, the listview item was actually suddenly expanding to the entire size that would be needed, then the animation dropped the views into place. But what I wanted was the effect of the listview item growing down as the views come into visibility.

I found exactly what I was looking for here: expanding-listview-items

The blogger has a link to his github sample, here: ExpandAnimationExample

If you find these sites gone, please inform me and I will make my copy available.

he put a negative margin on the content to come into visibility as well as setting visibility to GONE:

android:layout_marginBottom="-50dip"

and wrote an animation manipulating the bottom margin:

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();
        }
        ...
    }
}

and it looks very nice. I found his answer to this SO (possible duplicate?) question:

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

Also, please let me know if you know another way to do the same thing.