Slide expand animation in android

Question

I have a simple ListView listing results in android. Upon click of each item, I would like it to slide down expand and show the content. Is there an easy way to do this in android?

Any help will be appreciated.

Igorot

Answer 1

Here is example from Udinic. It had listview item expand with animation and require API level only 4+ Basically you need a animation class

/**
* This animation class is animating the expanding and reducing the size of a view.
* The animation toggles between the Expand and Reduce, depending on the current state of the view
* @author Udinic
*
*/
public class ExpandAnimation extends Animation {
    private View mAnimatedView;
    private LayoutParams mViewLayoutParams;
    private int mMarginStart, mMarginEnd;
    private boolean mIsVisibleAfter = false;
    private boolean mWasEndedAlready = false;

    /**
* Initialize the animation
* @param view The layout we want to animate
* @param duration The duration of the animation, in ms
*/
    public ExpandAnimation(View view, int duration) {

        setDuration(duration);
        mAnimatedView = view;
        mViewLayoutParams = (LayoutParams) view.getLayoutParams();

        // decide to show or hide the view
        mIsVisibleAfter = (view.getVisibility() == View.VISIBLE);

        mMarginStart = mViewLayoutParams.bottomMargin;
        mMarginEnd = (mMarginStart == 0 ? (0- view.getHeight()) : 0);

        view.setVisibility(View.VISIBLE);
    }

    @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();

        // Making sure we didn't run the ending before (it happens!)
        } else if (!mWasEndedAlready) {
            mViewLayoutParams.bottomMargin = mMarginEnd;
            mAnimatedView.requestLayout();

            if (mIsVisibleAfter) {
                mAnimatedView.setVisibility(View.GONE);
            }
            mWasEndedAlready = true;
        }
    }
}

And use this :

View toolbar = view.findViewById(R.id.toolbar);

                // Creating the expand animation for the item
                ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);

                // Start the animation on the toolbar
                toolbar.startAnimation(expandAni);

ExpandAnimationExample

Farrar

To downvoter, you should leave the reason why you down vote my answer. I know my answer can be considered as link only answer but what do you want? You expect me to copy all file in that repo to here. Hence Github link is reliable – Farrar

Note, this example is still buggy. github.com/Udinic/SmallExamples/issues/6 As you scroll the list view up and down, the expand/collapse state will mess up. – Wallah

@CheokYanCheng any solutions to the messed up states? Apparently, there is a problem when we scrollup so that the view shouls slide down now to have this we change the visibility so that the anim. kicks in but there is a flicker, the view closes and then again opens up to slide down :( – Boris

@Boris As I can hardly found open source libraries, which implements expandable ListView correctly. I decide to implement my own by using LinearLayout + ScrollView + custom View, without using ListView. It works for me as I only have ~10 items. I believe new RecyclerView, a better version ListView, can achieve same effect easier. But, I haven't tried that out. – Wallah

Answer 2

check out this answer. more than that you have to use the tweed animation. check the ApiDemos/Animation2 Examples. and also see the anim folder in ApiDemos. it helps a lot to me. according to your question slide_top_to_bottom will help.

Bagel

Answer 3

The simplest way is to use an ObjectAnimator

ObjectAnimator animation = ObjectAnimator.ofInt(yourTextView, "maxLines", 40);
animation.setDuration(200).start();

This will change maxLines from your TextView to 40, over 200 milliseconds.

Beware of using yourTextView.getLineCount() to determine how many lines to expand to, because it wont give an accurate figure until after a layout pass. I recommend you just hard code a maxLines value that's longer than you expect the text would ever be. You could also estimate it using yourTextView.length() divided by the lowest number of characters you'd ever expect per line.

Spradling