Lottie Animations in Xamarin Forms

Include beautiful After-Effects animations in your Xamarin apps

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations and renders them natively on mobile.

It was created by those clever people over at AirBnB, and you can find the library by managing your nuget packages and searching for Airbnb.

Getting started

In Visual Studio, create a new Xamarin Forms project for iOS and Android and use the nuget package manager to install the Lottie packages.

You may have to restart Visual Studio and manually update some Android support packages that seem to sometimes get missed. As long as the versions of Xamarin.Android.Support.* are the same, you’re good to go.

Find an animation

A great place to start looking for an animation, if you’re not an After Effects guru yourself, is LottieFiles.com. You can browse and download a growing collection of animations and sign up for notifications if you want.

For the example code I chose Jump Loader and downloaded the JSON file.

Include the JSON

Next, include the JSON file in the platform projects. Place the file under Assets in the Android project and under Resources in the iOS project.

Initialise the library

For the animations to render on iOS, you will need to make a small change to AppDelegate.cs

Open the class and include the following using:

using Lottie.Forms.iOS.Renderers;

Then add the initialisation code after the Xamarin.Forms.Init() and before the LoadApplication.

global::Xamarin.Forms.Forms.Init();
AnimationViewRenderer.Init();
LoadApplication(new App());

Add an animation yo your XAML

Finally, add an AnimationView to your XAML.

<forms:AnimationView Animation="jump_loader.json"
                             AutoPlay="True"
                             Loop="True"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand" />

In this example, we are telling Lottie to play our jump loader animation, auto-play when the XAML loads, and loop the animation indefinitely.

Wrap-up

Lottie is a super easy way to get some stunning animations into your Xamarin Forms app. Take a look at the Lottie GitHub repo for more info.

You can download the example code at the XamarinInsider repo.