5

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 a 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.

If you need more code snippets, feel free to ask.

1
  • Hi, did you figure it out finally? I would be interested in the solution.
    – dragoon
    Jun 27, 2013 at 22:34

2 Answers 2

8

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.