Synchronizing animations in RecyclerView

The RecyclerView widget does a lot of complicated stuff for us, particularly animation-related. As of recently it also handles nice default animations with the DiffUtil to perform intelligent updates to our lists depending on the changes on the data we’re sending them.

But there ara some special cases that aren’t covered by RecyclerView and its utilities, such as the one I’ll cover in this article.

Imagine we have a list with some data and there is an icon we we want to have in perfectly synchronization between rows. In fact we wanna see a real case: a list of hours on different timezones with the typical blinking colon between the hour and minutes.

If we simply apply an infinite animation using any of the options available on the Android SDK we’ll finish obtaining a party of blinking colons at different timings (quite sarcastic times at different timings) :

The solution comes by creating a general timer for all the animations in our parent view that calls every row at the same time at fixed time (yeah time for time in time [Inception music behind])

On my approach I’m going to combine 2 popular libraries, one to simplify the code for the list adapter Renderers: https://github.com/pedrovgs/Renderers and for the key problem RxJava: https://github.com/ReactiveX/RxJava in order to manage the timer and the subscriptions in a simple way.

So, the first part is to create the timer and broadcast every X seconds (milliseconds, minutes, centuries, …) the signal to update list’s rows:

Don’t forget to unsubscribe to our brand new timer when we’re exiting:

Then we need to pass this animationTimer to every row, for our approach is easy because we can take advantage of the RedendererBuilder of Renderers library:

But hey! show me the magic inside this CustomRendererBuilder thing!:

There is no magic inside CustomRendererBuilder, only the simpler implementation we can do in order to pass our animationTimer to every row.

At this point we’ve created the timer, the adapter and sent the timer through the adapter to the list’s rows, only one thing is remaining: in our row implementation called Renderer (to fit the convention with Renderers library), we need to subscribe to the timer and call the animation on every emission from it:

That’s it! In our example the animation takes only one second to complete, this is important because the timer is emitting new events every second, and is the key to maintain the synchronization and a perfect animation effect in our list (if you want larger or fewer animations, you must keep both times the same).

You can find a full working example here: https://github.com/FireZenk/RecyclerViewSyncedAnimations

If you liked the article don’t forget to share, comment and if you wish, follow me on Twitter: https://twitter.com/FireZenk

Thanks to https://twitter.com/celtric for the revision and ViscaWeb for their support.