Android Interpolators: A Visual Guide

If you like pina coladas 🍹, and getting caught in the rain 🌧, AND you can’t remember the difference between each of the various Interpolator subclasses, then this blog post is for YOU 👈🏼!

Animations – motion, interactions and transitions – are all a critical component of material design. They help to make the user experience feel more natural and fluid. But designing and implementing the perfect animation can be a cumbersome and timely process. Luckily, the Android SDK does a lot to help us along - with things like ViewPropertyAnimator and Transitions, but often times simply remembering all that is available can feel like half the battle.

Say 👋 to interpolator

Well folks, today I am here to help - introducing interpolator - an open sourced app - with all the Interpolator subclasses visualized on one screen.

Each interpolator is applied to an identical pink dot in a vertical list. All of the dots have the exact same animation set on them except, of course, for their interpolator. As you can see in the screenshot above, the dots are all labeled with their respective Interpolator class name so you can easily see which one is which without having to look at the code. As an added bonus, each of the dots is draggable, so you can easily compare and contrast the effects of two different interpolators side by side.

Check out the code to download the app today!

Movers and Shakers and GIFs 👯

But in case you’re in a hurry or you just want to see some pretty animations, right this second, here are all of the various Interpolators in action:

And if you liked these Android visual aids, you might also enjoy our ImageView.scaleType visual guide