push and resize an animation

Question

I created a RecyclerView which I want to animate by clicking on the CardView inside it. I want to apply this animation of material design which resize the selected item and push up the item below and push down the item above :

I tried with this code but it just collapses and expands without pushing the item below :

     private void expandCardView()
 {
      mCardViewContent.setVisibility(View.VISIBLE);

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

      ValueAnimator mAnimator = slideAnimator(0, mCardViewContent.getMeasuredHeight());
      mAnimator.start();
 }


 private void collapseCardView ()
 {
      int finalHeight = mCardViewContent.getHeight();

      ValueAnimator mAnimator = slideAnimator(finalHeight, 0);

      mAnimator.addListener(new AnimatorListenerAdapter()
      {
           @Override
           public void onAnimationEnd(Animator animator)
           {
                mCardViewContent.setVisibility(View.GONE);
           }
      });
      mAnimator.start();
 }


 private ValueAnimator slideAnimator(int start, int end)
 {

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

      animator.addUpdateListener(valueAnimator->
      {
           int value = (Integer) valueAnimator.getAnimatedValue();
           ViewGroup.LayoutParams layoutParams = mCardViewContent.getLayoutParams();
           layoutParams.height = value;
           mCardViewContent.setLayoutParams(layoutParams);
      });
      return animator;
 }

score 0 · Accepted Answer · answered Feb 20 '18 at 17:26

0

I had faced exactly same problem in my few projects and I have found a great solution at stackoverflow, which works like charm!

https://stackoverflow.com/a/13381228/6569739

You can make an invisible RelativeLayout in each RecyclerView element, which will hold all the data You want the user to see when expaned. Then simply call expand(View v) on specific layout to expand it.

For now that is the best and most reliable way to make this kind of animation I've found so far!

answered Feb 20 '18 at 17:26

przemek19980102

38
3

Thanks for your answer, i tried this piece of code but i did not get what i wanted. I still have the same problem, the invisible view is still expaneded (With animation) bu without pushing the item above, it just push the item bellow – Feb 20 '18 at 17:35
If you know the size of te expanded Layout You can make recyclerView to scroll a little bit to top (exactly to half of the expanded layout's height). It will make an effect of pushing the card above to top. The code would look sth like this: ** recyclerView.smoothScrollToPosition(recyclerView.getScrollY() - HALF_LAYOUT_HEIGHT); ** – przemek19980102 Feb 20 '18 at 17:38
If you know the size of te expanded Layout You can make recyclerView to scroll a little bit to top (exactly to half of the expanded layout's height). It will make an effect of pushing the card above to top. The code would look sth like this: `recyclerView.smoothScrollToPosition(recyclerView.getScrollY() - HALF_LAYOUT_HEIGHT);` * – przemek19980102 Feb 20 '18 at 17:43
You're welcome :) For a better appearance You could override the expand and collapse method, to make it return current height of the expanded layout. Then just listen to the changes and scroll the RecyclerView with the same speed / according to them :) – przemek19980102 Feb 20 '18 at 17:48

push and resize an animation

1 Answers1