How to animate recyclerview on scroll like Google

Question

How do I animate the RecyclerView when the items appear for first time and also when the user scrolls, just like the way it works for the google plus app or the google news stand app.

Also I read somewhere that RecyclerView does not directly support animation when the user scrolls; if this is true, is there any way we can still do it?

Answer 1

I did it this way. Might help someone. I don't know whether it's the best way to do it but works fine for me.

UPDATE: To fix fast scrolling behaviour, override onViewDetachedFromWindow method of the adapter and call clearAnimation on the animated view (in this case, holder.itemView.clearAnimation() ).Like this:

@Override
public void onViewDetachedFromWindow(ViewHolder holder) {
    super.onViewDetachedFromWindow(holder);
    holder.itemView.clearAnimation();
}

up_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="@android:anim/decelerate_interpolator">
<translate
    android:fromXDelta="0%" android:toXDelta="0%"
    android:fromYDelta="100%" android:toYDelta="0%"
    android:duration="400" />
</set>

down_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="@android:anim/decelerate_interpolator">
<translate
    android:fromXDelta="0%" android:toXDelta="0%"
    android:fromYDelta="-100%" android:toYDelta="0%"
    android:duration="400" />
</set>

And finally put this code in onBindViewHolder of recyclerView. Create a field called lastPosition and initialize it to -1.

Animation animation = AnimationUtils.loadAnimation(context,
            (position > lastPosition) ? R.anim.up_from_bottom
                    : R.anim.down_from_top);
    holder.itemView.startAnimation(animation);
    lastPosition = position;

Answer 2

https://github.com/wasabeef/recyclerview-animators

In my code is something like this:

import jp.wasabeef.recyclerview.animators.adapters.AlphaInAnimationAdapter;

....

public function populate() {
   // Get your recicleview
   rv = (RecyclerView)findViewById(R.id.rv);
   rv.setHasFixedSize(true);

   // Populate your cursor with your own method...
   Cursor myRecycleItems= null;
   myRecycleItems= mDbHelper.getItems();

   //create your 
   itemsAdapter= new ItemsAdapter(myRecycleItems, getApplicationContext());


   //Finnaly apply your adapter to RV with AlphaInAnimationAdapter:
   rv.setAdapter(new AlphaInAnimationAdapter(itemsAdapter));

}

You need to add dependencies to your gradle

dependencies {
  // jCenter
  ...... 
  your curent dependencies 
  ....
  compile 'jp.wasabeef:recyclerview-animators:2.0.0'
}

Read teh doc form https://github.com/wasabeef/recyclerview-animators to install it.

Answer 3

Without any outside libraries in RecycleView.Adapter on method onBindViewHolder use animation like in example:

       if (position>lastAnimatedPosition) {


        //set init transitionY to animate from it
        holder.itemView.setTranslationY(holder.itemView.getHeight());

        //animate to orginal position
        holder.itemView.animate().translationYBy(-  holder.itemView.getHeight()).start();


        lastAnimatedPosition=position;
    }

Above code will animate from bottom every row in list. Animation will be done only once, but onBindViewHolder is running on scrolling so first scrolling of list will be with animation effect.

Very important is to initialise view to start of animation, so in example i set:

  holder.itemView.setTranslationY( + Y change);

then animation go backs to orginal position:

 holder.itemView.animate().translationYBy(- Y change).start();

If you need alpha do this that way:

 holder.itemView.setAlpha(0);
 holder.itemView.animate().apha(1).start();

Answer 4

Use custom ItemAnimator with "slide up" animation for Add action. Like this - https://github.com/wasabeef/recyclerview-animators

Answer 5

For down_from_top.xml it should be

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="@android:anim/decelerate_interpolator">
<translate
    android:fromXDelta="0%" android:toXDelta="0%"
    android:fromYDelta="-100%" android:toYDelta="0%"
    android:duration="400" />
</set>