Android views expand animation

Question

I'm trying to edit these source to create a simple function that will work on all of my views.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

RelativeLayout mLayout1 = (RelativeLayout) findViewById(R.id.layout1);
RelativeLayout mLayoutToBeExpanded1 = (RelativeLayout) findViewById(R.id.layout_exp_1);
addAction(mLayout, mLayoutToBeExpanded);

RelativeLayout mLayout2 = (RelativeLayout) findViewById(R.id.layout2);
RelativeLayout mLayoutToBeExpanded2 = (RelativeLayout) findViewById(R.id.layout_exp_2);
addAction(mLayout2, mLayoutToBeExpanded2);

RelativeLayout mLayout3 = (RelativeLayout) findViewById(R.id.layout3);
RelativeLayout mLayoutToBeExpanded3 = (RelativeLayout) findViewById(R.id.layout_exp_3);
addAction(mLayout3, mLayoutToBeExpanded3);

}

    public void addAction(final View layout, final View summary) {

    summary.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {

                @Override
                public boolean onPreDraw() {
                    summary.getViewTreeObserver().removeOnPreDrawListener(this);
                    summary.setVisibility(View.GONE);

                    final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    summary.measure(widthSpec, heightSpec);

                    mAnimator = slideAnimator(0, summary.getMeasuredHeight(), summary);
                    return true;
                }
            });

    layout.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            if (summary.getVisibility() == View.GONE) {
                expand(summary);
            } else {
                collapse(summary);
            }
        }
    });
}

private void expand(View summary) {
    //set Visible
    summary.setVisibility(View.VISIBLE);

            /* Remove and used in preDrawListener
            final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            mLinearLayout.measure(widthSpec, heightSpec);

            mAnimator = slideAnimator(0, mLinearLayout.getMeasuredHeight());
            */

    mAnimator.start();
}

private void collapse(final View summary) {
    int finalHeight = summary.getHeight();

    ValueAnimator mAnimator = slideAnimator(finalHeight, 0, summary);

    mAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animator) {
            //Height=0, but it set visibility to GONE
            summary.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationStart(Animator animator) {
        }

        @Override
        public void onAnimationCancel(Animator animator) {
        }

        @Override
        public void onAnimationRepeat(Animator animator) {
        }
    });
    mAnimator.start();
}


private ValueAnimator slideAnimator(int start, int end, final View summary) {

    ValueAnimator animator = ValueAnimator.ofInt(start, end);


    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            //Update Height
            int value = (Integer) valueAnimator.getAnimatedValue();

            ViewGroup.LayoutParams layoutParams = summary.getLayoutParams();
            layoutParams.height = value;
            summary.setLayoutParams(layoutParams);
        }
    });
    return animator;
}

The issue: the first 2 layouts are working only one time. After the first expand -> collapse the onClickFunction is not working. the 3rd layout is working fine, i can expand/collapse it multiple times. Any solution?

Answer 1

I solved by myself so, here is the working solution for an expandable layout.

Use:

addAction(YourLayout, LayoutToBeExpanded)

Function:

    public void addAction(final View layout, final View summary) {



    layout.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            if (summary.getVisibility() == View.GONE) {
                expand(summary);
            } else {
                collapse(summary);
            }
        }
    });
}

private void expand(View summary) {
    //set Visible
    summary.setVisibility(View.VISIBLE);

            final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            summary.measure(widthSpec, 300);

            mAnimator = slideAnimator(0, 300, summary);

    mAnimator.start();
}

private void collapse(final View summary) {
    int finalHeight = summary.getHeight();

    ValueAnimator mAnimator = slideAnimator(finalHeight, 0, summary);

    mAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animator) {
            //Height=0, but it set visibility to GONE
            summary.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationStart(Animator animator) {
        }

        @Override
        public void onAnimationCancel(Animator animator) {
        }

        @Override
        public void onAnimationRepeat(Animator animator) {
        }
    });
    mAnimator.start();
}


private ValueAnimator slideAnimator(int start, int end, final View summary) {

    ValueAnimator animator = ValueAnimator.ofInt(start, end);


    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            //Update Height
            int value = (Integer) valueAnimator.getAnimatedValue();

            ViewGroup.LayoutParams layoutParams = summary.getLayoutParams();
            layoutParams.height = value;
            summary.setLayoutParams(layoutParams);
        }
    });
    return animator;
}

If you would like to also collapse the "mLayoutToBeExpanded" on self click use this:

    public void addAction(final View layout, final View summary) {
    layout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (summary.getVisibility() == View.GONE) {
                expand(summary);
            } else {
                collapse(summary);
            }
        }
    });

    summary.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (summary.getVisibility() == View.VISIBLE) {
                collapse(summary);
            } else {
                //nothing
            }
        }
    });
}

Answer 2

Use this method to achive collapse and Expand Animation:

       public void expandOrCollapse(final View v,String exp_or_colpse) {
    TranslateAnimation anim = null;
    if(exp_or_colpse.equals("expand"))
    {
        anim = new TranslateAnimation(0.0f, 0.0f, -v.getHeight(), 0.0f);
        v.setVisibility(View.VISIBLE);  
    }
    else{
        anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -v.getHeight());
        AnimationListener collapselistener= new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
            v.setVisibility(View.GONE);
            }
        };

        anim.setAnimationListener(collapselistener);
    }

     // To Collapse
        //

    anim.setDuration(300);
    anim.setInterpolator(new AccelerateInterpolator(0.5f));
    v.startAnimation(anim);
}

And Call this method in your code:

        //For Expand View
       expandOrCollapse(YourView,"expand");

      //For Collapse View
       expandOrCollapse(yourView,"collapse");

Answer 3

    ValueAnimator expandAnimation = ValueAnimator.ofInt(mainView.getHeight(), 400);
    expandAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(final ValueAnimator animation) {
            int height = (Integer) animation.getAnimatedValue();
            RelativeLayout.LayoutParams lp = (LayoutParams) mainView.getLayoutParams();
            lp.height = height;
        }
    });


    expandAnimation.setDuration(500);
    expandAnimation.start();

Answer 4

Just an alternative, easy to use. To expand the view with animation:

view.setPivotY(0);
ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f).setDuration(300).start();