Lottie for Android primer

Visual design is quite important for an app. The quality of apps has been steadily increased over the years, and the aesthetic part is the area with the biggest improvement in my opinion.

They say that a picture speaks a thousand words. So how many words would a pretty animation speak?

Lottie is a multi-platform open-source library, initially made by Airbnb, for quickly and easily showing smooth animations, such as these:

These animations are made in Adobe After Effects and they are vector-based (i.e. they can scale without pixelating). But you don't need to worry about this and you don't need to make them because there are plenty of such short and cute animations all over the internet (e.g. LordIcons, LottieFiles).

The actual animation is a JSON file that describes the path, color, etc. After acquiring that file, you would need to place it in the Assets directory of your Android project. This is a different directory from your Resources directory where drawables are placed. You would probably need to create it, by right-clicking in the Project Explorer in Android Studio, New -> Folder -> Assets Folder. Place your JSON file in the /app/assets/ folder that has been created.

Then head to the project's GitHub page to find the latest version, and include it in your build.gradle (app):

dependencies {
  implementation 'com.airbnb.android:lottie:3.4.0'
}

After syncing with Gradle, you would be able to use the Lottie view in your layouts. Place it just like you would place a regular ImageView. Since this view displays vector-based graphics you would need to explicitly set the width and height.

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView"
            android:layout_width="120dp"
            android:layout_height="120dp"
            app:lottie_autoPlay="true"
            app:lottie_fileName="animation.json" />

You can customize the view both using XML or programmatically (e.g. auto-play,  repeat-count, etc).

The most common things I find myself wanting to change in an animation are the colors. You could use the excellent LottieFiles online editor to inspect the layers and change their colors.

Sometimes, even with the editor, you won't be able to change the desired color. In these cases, you would need to manually apply a filter on runtime:

        val filter =
          SimpleColorFilter
            (ContextCompat.getColor(context!!,R.color.mainColorLight))
        val keyPath = KeyPath("**")
        val callback = LottieValueCallback<ColorFilter>(filter)
        animationView.addValueCallback(keyPath,
          LottieProperty.COLOR_FILTER, callback)

You can choose which path to apply the filter on, or you could apply it to all paths in case you just want the animation to have a single color.

Hopefully, after this super-quick crash course, you are convinced that adding a short and fancy animation in your Android app is not that hard :)