After Effects animation in Android – Lottie for Android Studio

If you landed on this page, you have already heard about the possibility to import Adobe After Effects animation to your Android app. There might be various reasons to do so. I went down this road because I wanted to play an animation exported to .mp4 by using VideoView in Android.

The problem was that there is a very common known bug in Android which makes the VideoView flicker with a black color before playing any animation. There are a few dirty fixes on the internet but they didn’t seem to work for me, so I decided to avoid them.

Instead, I decided to go for Lottie. You can find it either on its github page, or homepage of the project. It’s a library that allows you to import animations from a JSON file. The JSON file is basically a string representation of your animation from After Effects.

Bodymovin for After Effects

To be able to export animations as JSON files, you need to install an extension, as After Effects does not support this by default. Bodymovin is doing exactly what we need. Below is a great Youtube tutorial on how to add Bodymovin to your AE. It’s fairly easy to do, so I decided not to write a how-to on this.

Import Lottie to Android Studio

This is the first step – add Lottie to your gradle.app file. Be careful, because lottie version 3.8.0 and higher only support applications running on androidx. From the author’s github page:

If your app uses android.support libraries, you should use version lower than 3.8.0, otherwise use the newest possible version. You can find version list on maven repository site. In my app, I make use of android support libraries, so I went for 3.7.0 instead.

dependencies {
    ...
    implementation "com.airbnb.android:lottie:3.7.0"
    ...
}

After than, sync your Gradle. You should not run into any troubles if you read this chapter and understand lottie versioning. If you mix up the versions and support/androidx libraries, you will get a following error:

Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
  	is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
  	Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:4:5-14:19 to override.

You don’t need to do any of the stuff written in the stacktrace. Simply switch versions, as I described above.

Lottie – easy way (using XML)

I assume that by now, you have lottie imported in your Android Studio project and you have your animation exported to a .json file. The first and the easiest way to display your animation is using an XML file. Place your .json file under /assets, open your layout resource file and add a following element:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_fileName="myanimation"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"
        app:lottie_imageAssetsFolder="images" />

In the code above, I set a fixed width and height, as this helps to improve performance of the animation (read more here). I also specified that the animation should loop indefinitely and should start playing automatically after instantiating.

Make sure to read this paragraph! Bodymovin sometimes renders your animation as .json, but also exports some of the stuff from After Effects as images.You need to place these images under specific path in your assets folder in your Android project, and then point to it from the XML configuration. Above, you can see that I placed my images under /assets/images/, while my file’s path was /assets/myanimation.json. If you do not have any images, you can leave out the last XML property.

You can also store your animation in resources folder. Place your JSON file under /res/raw and replace the app:lottie_fileName="myanimation" with app:lottie_rawRes="@raw/hello_world". Keep your images in /assets/ directory.

Lottie – flexible way (programatically)

The second way to import your animation in Android Studio is very similar to the first one. Instead of setting XML properties, you only initialize the lottie XML element, then identify it in your activity and use a few setters to manage it from there. The advantage is that you will be able to use it’s listeners and all available methods, so it gives you a bit more flexibility.

Start by initializing the lottie in XML.

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp" />

Then, move to your code. In your activity (or wherever you want to do this), insert following code:

LottieAnimationView lottie = findViewById(R.id.myanimation);
lottie.setAnimation("myanimation.json"); // from your assets folder
lottie.loop(true);
lottie.autoplay(true);
lottie.setImageAssetsFolder("images/");
lottie.playAnimation();

And that’s it. This way, you can access the lottie element anywhere in your code and do whatever you want with it. There is so much more you can do, and I found this github lottie example to be the most informative – you should definitely give it a read.

Conclusion

You might end up having some performance issues. If you do, go through the answer of Nick Cardoso on Stackoverflow (I also pasted the answer below). If you don’t, then you should be ready to go! Hope this article helped you.