how to expend and collapse card view in RecyclerView in android when click other item

Question

I want to build app that use recycler view and cardview like the picture below and when the use click on the item it will expand and when the user click on other item that item will expend that expended item will collapse. Ex: I click on item 2 the item number 2 will expend then I click item number 4 so the item number 2 will collapse and item number 4 will expend.

Thank you so much for your answer!

Answer 1

You can use Expandable recycler view for it (available on github).If you want to use Recycler view you can expand and collapse view with animation just like a toggle. Check out the code below:

 public static void expandCard(final View v) {
    v.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();
    v.getLayoutParams().height = 1;
    v.setVisibility(View.VISIBLE);
    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1
                    ? ViewGroup.LayoutParams.WRAP_CONTENT
                    : (int)(targetHeight * interpolatedTime);
            v.requestLayout();
        }
        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };
    a.setDuration(((int)(targetHeight / v.getContext().getResources().getDisplayMetrics().density))*6);
    v.startAnimation(a);
}

public static void collapseCard(final View v) {
    final int initialHeight = v.getMeasuredHeight();
    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if(interpolatedTime == 1){
                v.setVisibility(View.GONE);
            }else{
                v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }
        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };
    a.setDuration(((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density))*6);
    v.startAnimation(a);
}