RecyclerView expand collapse items

Question

I want to expand collapse the items of my recyclerView in order to show more info  I want to achieve the same effect of the SlideExpandableListView    Basically in my viewHolder I have a view that is not visible and I want to do a smooth expand collapse animation rather than set the visibility to VISIBLE GONE only  I only need an item to be expanded at a time and it would be cool to have some elevation to show that the item is selected   It is the same effect of the new Android recent calls history list  The options  CALL BACK  and  DETAILS  are visible only when an item is selected

User · Answer

There is simply no need of using third party libraries. A little tweak in the method demonstrated in Google I/O 2016 and Heisenberg on this topic, does the trick.

Since notifyDataSetChanged() redraws the complete RecyclerView, notifyDataItemChanged() is a better option (not the best) because we have the position and the ViewHolder at our disposal, and notifyDataItemChanged() only redraws the particular ViewHolder at a given position.

But the problem is that the premature disappearence of the ViewHolder upon clicking and it's emergence is not eliminated even if notifyDataItemChanged() is used.

The following code does not resort to notifyDataSetChanged() or notifyDataItemChanged() and is Tested on API 23 and works like a charm when used on a RecyclerView where each ViewHolder has a CardView as it's root element:

holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            final boolean visibility = holder.details.getVisibility()==View.VISIBLE;

            if (!visibility)
            {
                holder.itemView.setActivated(true);
                holder.details.setVisibility(View.VISIBLE);
                if (prev_expanded!=-1 && prev_expanded!=position)
                {
                    recycler.findViewHolderForLayoutPosition(prev_expanded).itemView.setActivated(false);
                    recycler.findViewHolderForLayoutPosition(prev_expanded).itemView.findViewById(R.id.cpl_details).setVisibility(View.GONE);
                }
                prev_expanded = position;
            }
            else
            {
                holder.itemView.setActivated(false);
                holder.details.setVisibility(View.GONE);
            }
            TransitionManager.beginDelayedTransition(recycler);              
        }
});

prev_position is an global integer initialized to -1. details is the complete view which is shown when expanded and cloaked when collapsed.

As said, the root element of ViewHolder is a CardView with foreground and stateListAnimator attributes defined exactly as said by Heisenberg on this topic.

UPDATE: The above demonstration will collapse previosuly expanded item if one of them in expanded. To modify this behaviour and keep the an expanded item as it is even when another item is expanded, you'll need the following code.

if (row.details.getVisibility()!=View.VISIBLE)
    {
        row.details.setVisibility(View.VISIBLE);
        row.root.setActivated(true);
        row.details.animate().alpha(1).setStartDelay(500);
    }
    else
    {
        row.root.setActivated(false);
        row.details.setVisibility(View.GONE);
        row.details.setAlpha(0);
    }
    TransitionManager.beginDelayedTransition(recycler);

UPDATE: When expanding the last items on the list, it may not be brought into full visibility because the expanded portion goes below the screen. To get the full item within screen use the following code.

LinearLayoutManager manager = (LinearLayoutManager) recycler.getLayoutManager();
    int distance;
    View first = recycler.getChildAt(0);
    int height = first.getHeight();
    int current = recycler.getChildAdapterPosition(first);
    int p = Math.abs(position - current);
    if (p > 5) distance = (p - (p - 5)) * height;
    else       distance = p * height;
    manager.scrollToPositionWithOffset(position, distance);

IMPORTANT: For the above demonstrations to work, one must keep in their code an instance of the RecyclerView & it's LayoutManager (the later for flexibility)

User · Answer

Please don t use any library for this effect instead use the recommended way of doing it according to Google I O  In your recyclerView s onBindViewHolder method do this   final boolean isExpanded   position  mExpandedPosition  holder details setVisibility isExpanded View VISIBLE View GONE   holder itemView setActivated isExpanded   holder itemView setOnClickListener new View OnClickListener          Override     public void onClick View v            mExpandedPosition   isExpanded   -1 position          TransitionManager beginDelayedTransition recyclerView           notifyDataSetChanged                 Where details is my view that will be displayed on touch  call details in your case  Default Visibility GONE   mExpandedPosition is an int variable initialized to -1   And for the cool effects that you wanted  use these as your list item attributes   android background   drawable comment background  android stateListAnimator   animator comment selection    where comment background is    lt selector xmlns android  http   schemas android com apk res android  android constantSize  true  android enterFadeDuration   android integer config shortAnimTime  android exitFadeDuration   android integer config shortAnimTime  gt    lt item android state activated  true  android drawable   color selected comment background    gt   lt item android drawable   color comment background    gt   lt  selector gt    and comment selection is    lt selector xmlns android  http   schemas android com apk res android  gt    lt item android state activated  true  gt       lt objectAnimator         android propertyName  translationZ          android valueTo   dimen z card          android duration  2000          android interpolator   android interpolator fast out slow in    gt   lt  item gt    lt item gt       lt objectAnimator         android propertyName  translationZ          android valueTo  0dp          android duration  2000          android interpolator   android interpolator fast out slow in    gt   lt  item gt   lt  selector gt

User · Answer

For this  just needed simple lines not complicated  in your onBindViewHolder method add below code  final boolean isExpanded   position  mExpandedPosition  holder details setVisibility isExpanded View VISIBLE View GONE   holder itemView setActivated isExpanded   holder itemView setOnClickListener new View OnClickListener          Override     public void onClick View v            mExpandedPosition   isExpanded   -1 position          notifyItemChanged position                  mExpandedPosition is an int  global variable initialized to -1   For those who want only one item expanded and others get collapsed  Use this  first declare a global variable with previousExpandedPosition   -1   then       final boolean isExpanded   position  mExpandedPosition      holder details setVisibility isExpanded View VISIBLE View GONE       holder itemView setActivated isExpanded        if  isExpanded         previousExpandedPosition   position       holder itemView setOnClickListener new View OnClickListener              Override         public void onClick View v                mExpandedPosition   isExpanded   -1 position              notifyItemChanged previousExpandedPosition               notifyItemChanged position                       Done     Simple and humble

User · Answer

Global Variable  private int selectedPosition   -1     Override     public void onBindViewHolder final CustomViewHolder customViewHolder  final int i             final int position   i          final GetProductCatalouge details feedItem   this postBeanses get i           customViewHolder lly main setOnClickListener new View OnClickListener                  Override             public void onClick View v                    selectedPosition   i                  notifyDataSetChanged                                      if  selectedPosition    i               if  customViewHolder lly hsn code getVisibility      View VISIBLE                 customViewHolder lly hsn code setVisibility View GONE               customViewHolder lly sole setVisibility View GONE               customViewHolder lly sole material setVisibility View GONE              else                customViewHolder lly hsn code setVisibility View VISIBLE               customViewHolder lly sole setVisibility View VISIBLE               customViewHolder lly sole material setVisibility View VISIBLE                         else               customViewHolder lly hsn code setVisibility View GONE               customViewHolder lly sole setVisibility View GONE               customViewHolder lly sole material setVisibility View GONE

User · Answer

Not saying this is the best approach  but it seems to work for me   The full code may be found at   Example code at   https   github com dbleicher recyclerview-grid-quickreturn  First off  add the expanded area to your cell item layout  and make the enclosing cell layout animateLayoutChanges  true    This will ensure that the expand collapse is animated    lt LinearLayout     android id    id llCardBack      android layout width  fill parent      android layout height  wrap content      android background   android color white      android animateLayoutChanges  true      android padding  4dp      android orientation  vertical  gt        lt TextView         android id    id tvTitle          android layout width  match parent          android layout height  wrap content          android layout gravity  center fill horizontal          android padding  10dp          android gravity  center          android background   android color holo green dark          android text  This is a long title to show wrapping of text in the view           android textColor   android color white          android textSize  16sp    gt        lt TextView         android id    id tvSubTitle          android layout width  match parent          android layout height  wrap content          android layout gravity  center fill horizontal          android background   android color holo purple          android padding  6dp          android text  My subtitle             android textColor   android color white          android textSize  12sp    gt        lt LinearLayout         android id    id llExpandArea          android visibility  gone          android layout width  fill parent          android layout height  wrap content          android gravity  center          android orientation  horizontal  gt            lt TextView             android layout width  wrap content              android layout height  wrap content              android layout margin  6dp              android text  Item One    gt            lt TextView             android layout width  wrap content              android layout height  wrap content              android layout margin  6dp              android text  Item Two    gt        lt  LinearLayout gt   lt  LinearLayout gt    Then  make your RV Adapter class implement View OnClickListener so that you can act on the item being clicked   Add an int field to hold the position of the one expanded view  and initialize it to a negative value   private int expandedPosition   -1    Finally  implement your ViewHolder  onBindViewHolder   methods and override the onClick   method   You will expand the view in onBindViewHolder if it s position is equal to  expandedPosition   and hide it if not   You set the value of expandedPosition in the onClick listener    Override public void onBindViewHolder RVAdapter ViewHolder holder  int position         int colorIndex   randy nextInt bgColors length       holder tvTitle setText mDataset get position        holder tvTitle setBackgroundColor bgColors colorIndex        holder tvSubTitle setBackgroundColor sbgColors colorIndex         if  position    expandedPosition            holder llExpandArea setVisibility View VISIBLE         else           holder llExpandArea setVisibility View GONE             Override public void onClick View view        ViewHolder holder    ViewHolder  view getTag        String theString   mDataset get holder getPosition             Check for an expanded view  collapse if you find one     if  expandedPosition  gt   0            int prev   expandedPosition          notifyItemChanged prev                Set the current position to  expanded      expandedPosition   holder getPosition        notifyItemChanged expandedPosition        Toast makeText mContext   Clicked    theString  Toast LENGTH SHORT  show              Create a ViewHolder to represent your cell layout    and data element structure     public static class ViewHolder extends RecyclerView ViewHolder       TextView tvTitle      TextView tvSubTitle      LinearLayout llExpandArea       public ViewHolder View itemView            super itemView            tvTitle    TextView  itemView findViewById R id tvTitle           tvSubTitle    TextView  itemView findViewById R id tvSubTitle           llExpandArea    LinearLayout  itemView findViewById R id llExpandArea             This should expand only one item at a time  using the system-default animation for the layout change   At least it works for me   Hope it helps

User · Answer

There is a very simple to use library with gradle support  https   github com cachapa ExpandableLayout   Right from the library docs    lt net cachapa expandablelayout ExpandableLinearLayout     android id    id container      android layout width  match parent      android layout height  match parent      app el duration  1000      app el expanded  true  gt        lt TextView         android layout width  match parent          android layout height  wrap content          android text  Click here to toggle expansion    gt        lt TextView         android layout width  match parent          android layout height  50dp          android text  Fixed height          app layout expandable  true    gt     lt  net cachapa expandablelayout ExpandableLinearLayout gt    After you mark your expandable views  just call any of these methods on the container  expand    collapse   or toggle

User · Answer

I am surprised that there s no concise answer yet  although such an expand collapse animation is very easy to achieve with just 2 lines of code   recycler itemAnimator as SimpleItemAnimator  supportsChangeAnimations   false    called once  together with notifyItemChanged position     in adapter  whenever a child view in item s recycler gets hidden shown  So for me  the explanations in the link below were really useful  https   medium com  nikola jakshic how-to-expand-collapse-items-in-recyclerview-49a648a403a6

User · Answer

I know it has been a long time since the original question was posted  But i think for slow ones like me a bit of explanation of  Heisenberg s answer would help   Declare two variable in the adapter class as  private int mExpandedPosition  -1  private RecyclerView recyclerView   null    Then in onBindViewHolder following as given in the original answer            This line checks if the item displayed on screen           was expanded or not  Remembering the fact that Recycler View            reuses views so onBindViewHolder will be called for all          items visible on screen      final boolean isExpanded   position  mExpandedPosition             This line hides or shows the layout in question         holder details setVisibility isExpanded View VISIBLE View GONE               I do not know what the heck this is            holder itemView setActivated isExpanded               Click event for each item  itemView is an in-built variable of holder class          holder itemView setOnClickListener new View OnClickListener                  Override             public void onClick View v         if the clicked item is already expaned then return -1    else return the position  this works with notifyDatasetchanged                   mExpandedPosition   isExpanded   -1 position         fancy animations can skip if like                 TransitionManager beginDelayedTransition recyclerView         This will call the onBindViewHolder for all the itemViews on Screen                 notifyDataSetChanged                                And lastly to get the recyclerView object in the adapter override    Override public void onAttachedToRecyclerView  NonNull RecyclerView recyclerView        super onAttachedToRecyclerView recyclerView        this recyclerView   recyclerView      Hope this Helps

User · Answer

Do the following after you set the onClick listener to the ViewHolder class    Override     public void onClick View v            final int originalHeight   yourLinearLayout getHeight            animationDown YourLinearLayout  originalHeight    here put the name of you layout that have the options to expand               Animation for devices with kitkat and below     public void animationDown LinearLayout billChoices  int originalHeight               Declare a ValueAnimator object         ValueAnimator valueAnimator          if   billChoices isShown                  billChoices setVisibility View VISIBLE               billChoices setEnabled true               valueAnimator   ValueAnimator ofInt 0  originalHeight originalHeight      These values in this method can be changed to expand however much you like           else               valueAnimator   ValueAnimator ofInt originalHeight originalHeight  0                Animation a   new AlphaAnimation 1 00f  0 00f      Fade out              a setDuration 200                  Set a listener to the animation and configure onAnimationEnd             a setAnimationListener new Animation AnimationListener                      Override                 public void onAnimationStart Animation animation                                         Override                 public void onAnimationEnd Animation animation                        billChoices setVisibility View INVISIBLE                       billChoices setEnabled false                                       Override                 public void onAnimationRepeat Animation animation                                                      Set the animation on the custom view             billChoices startAnimation a                     valueAnimator setDuration 200           valueAnimator setInterpolator new AccelerateDecelerateInterpolator             valueAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                 public void onAnimationUpdate ValueAnimator animation                    Integer value    Integer  animation getAnimatedValue                    billChoices getLayoutParams   height   value intValue                    billChoices requestLayout                                        valueAnimator start              I think that should help  that s how I implemented and does the same google does in the recent call view

User · Answer

Use two view types in the your RVAdapter  One for expanded layout and other for collapsed  And the magic happens with setting android animateLayoutChanges  true  for RecyclerView Checkout the effect achieved using this at 0 42 in this video

User · Answer

After using the recommended way of implementing expandable collapsible items residing in a RecyclerView on RecyclerView expand collapse items answered by HeisenBerg  I ve seen some noticeable artifacts whenever the RecyclerView is refreshed by invoking TransitionManager beginDelayedTransition ViewGroup  and subsequently notifyDatasetChanged     His original answer   final boolean isExpanded   position  mExpandedPosition  holder details setVisibility isExpanded View VISIBLE View GONE   holder itemView setActivated isExpanded   holder itemView setOnClickListener new View OnClickListener          Override     public void onClick View v            mExpandedPosition   isExpanded   -1   position          TransitionManager beginDelayedTransition recyclerView           notifyDataSetChanged                Modified   final boolean isExpanded   position    mExpandedPosition  holder details setVisibility isExpanded   View VISIBLE   View GONE   holder view setOnClickListener new View OnClickListener          Override     public void onClick View v            if  mExpandedHolder    null                mExpandedHolder details setVisibility View GONE               notifyItemChanged mExpandedPosition                     mExpandedPosition   isExpanded   -1   holder getAdapterPosition            mExpandedHolder   isExpanded   null   holder          notifyItemChanged holder getAdapterPosition                details is view that you want to show hide during item expand collapse mExpandedPosition is an int that keeps track of expanded item mExpandedHolder is a ViewHolder used during item collapse   Notice that the method TransitionManager beginDelayedTransition ViewGroup  and notifyDataSetChanged   are replaced by notifyItemChanged int  to target specific item and some little tweaks   After the modification  the previous unwanted effects should be gone  However  this may not be the perfect solution  It only did what I wanted  eliminating the eyesores     EDIT    For clarification  both mExpandedPosition and mExpandedHolder are globals

[android] RecyclerView expand/collapse items

Examples related to android

Examples related to android-layout

Examples related to android-recyclerview

Examples related to expand