RecyclerView - animate change of grid layout manager columns

Question

I want to animate the change of my RecyclerViews GridLayoutManager. I defaulty show a list of items in a grid with 3 columns and the user can selec

Answer 1

The source of inspiration here would be the Google Photos app,the stock Sony Gallery app

There are basically 2 approaches you can go with:

1. You modify the spancount of the GridLayoutManager using setSpanCount(int)

2. You set a very high span count(~100) use the SpanSizeLookUp to change the per item spanSize on the fly.

   • I have used the Gist provided by Musenkishi,for this answer to provide an animator to animate the changes in grid layout changes
   • I have used this approach in a sample GitHub project implementing the same.
   • Caveats:
     • I have currently used the click listener to keep modifying the the span size look up.This could be changed to a ItemGestureListener to capture pinch zoom events and change accordingly.
     • You need to determine a way to choose a span count so that all the items in a row occupy the entire screen width (and hence you do not see any empty space)
     • You call notifyItemRangeChanged using a runnable post delayed since you cannot call the notifyChanged methods from within bindView/createView etc.
     • After changing the span size,you need to notifyItemRangeChanged with an appropriate range so that all the items currently displayed on the screen are shifted accordingly.I have used (code at the bottom)

This is not a complete solution but a 2 hour solution for the same.You can obviously improve on all the points mentioned :). I hope to keep updating the sample since this kind of views have always fascinated me. Do not view this as the final solution but just a particular way of achieving this approach. If you were to use a StaggerredLayoutManager instead,you could easily avoid blank spaces between items.

public int calculateRange() {
     int start = ((GridLayoutManager)        grv.getLayoutManager()).findFirstVisibleItemPosition();
     int end = ((GridLayoutManager) grv.getLayoutManager()).findLastVisibleItemPosition();
     if (start < 0)
         start = 0;
     if (end < 0)
         end = getItemCount();
     return end - start;
  }