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 select to show more or less columns.

I would like the views in the RecyclerView to move/scale to their new positions, but I have no idea how this could be done.

What I want in the end

• allow to scale the grid via an expand/contract touch gesture => I know how to do that
• animate the change of the LayoutManager

Does anyone know how I can animate the change of the LayoutManager?

Answer 1

I deal with the same problem as you, and so far I have not found a good solution.

Simple change of columns number in GridLayoutManager seems weird so for now I use animation to fade out/in entire layout. Something like this:

private void animateRecyclerLayoutChange(final int layoutSpanCount) {
    Animation fadeOut = new AlphaAnimation(1, 0);
    fadeOut.setInterpolator(new DecelerateInterpolator());
    fadeOut.setDuration(400);
    fadeOut.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            productsRecyclerLayoutManager.setSpanCount(layoutSpanCount);
            productsRecyclerLayoutManager.requestLayout();
            Animation fadeIn = new AlphaAnimation(0, 1);
            fadeIn.setInterpolator(new AccelerateInterpolator());
            fadeIn.setDuration(400);
            productsRecycler.startAnimation(fadeIn);
        }
    });
    productsRecycler.startAnimation(fadeOut);
}

If you combine fade out/in animation with scaling each visible item, It will be a decent animation for GridLayoutManager changes.