How to Build a Reusable Staggered Fade in Animation using Kotlin Extension Functions

I recently had a project that required a set of text views to slowly fade into the visible state in a staggered fashion.

One possible solution to this problem would be to wait for when onViewCreated is called on your fragment, find the view in your view hierarchy, and start an AlphaAnimation on it from alpha 0 (fully invisible), to alpha 1 (fully visible). Let’s see what that looks like in code.

First, we’re going to need a function that takes a view and applies an AlphaAnimation to it.

So this is a pretty good start, we have a function in our fragment that we can use for views in that fragment to have a delayed visibility fade in. But what if we want to use this functionality across multiple fragments? That’s where Kotlin extension functions come in. Let’s start with what extension functions are.

Kotlin provides the ability to extend a class with new functionality without having to inherit from the class or use design patterns such as Decorator. This is done via special declarations called extensions. For example, you can write new functions for a class from a third-party library that you can’t modify. Such functions are available for calling in the usual way as if they were methods of the original class. This mechanism is called extension functions. There are also extension properties that let you define new properties for existing classes.

https://kotlinlang.org/docs/reference/extensions.html#extensions

Sweet! So we can add some functionality to any view without all the hassle of extending the view class, naming it something new, and declaring all views that we want to exhibit that behavior as this new view type. Let’s create a class called ViewExtensions and in that class, define an extension function for the View class:

Notice how we declare the class that we are extending, View, before declaring the extension function name, fadeIn().fadeDuration is an optional parameter that has a default value in the ViewExtension’s class companion object.

Now that we have our extension function defined, all we have to do is call it on whatever view we want to fade in!

Now, if you are following along closely and/or you run this code, you’ll notice that this ends up in fading in all 3 views at the same time. So what if we wanted to stagger the fade in so that each view fades in after the one before it? Well, we can add functionality to the extension function to accept a haltTime value which will wait that long before fading in this view:

You’ll notice that we set the view’s visibility before running the animation and after. This helps ensure the effect will be applied even if the XML values aren’t what’s expected. Also, we leverage a Handler() to start the animation after the specified haltTime.

Now we tweak the code in our fragment to leverage the new functionality:

And that’s it! It’s a very simple example of a very powerful tool that I look forward to using more in the future.