Add high quality animations to Xamarin.Forms with Lottie Library

Animations are essential aspect of any app, not only it adds a visual element but also acts as a key indicator to user friendliness if implemented wisely. Some of the scenarios could be that if you have a long processing task, then instead of showing the activity indicator and kill the UX, one could add animations and keep the user engaged (visually).

Now myself being from a core development background, I lack the animation and design skills. So if you are from a similar world then no worries, as Lottie is to your rescue.

What is Lottie ?

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Xamarin.Forms ?

Big thanks to Martijn van Dijk, for creating a plugin that fills the gap for app developers like myself. You can read his post Bring Stunning Animations to Your Apps with Lottie to know more about Lottie from him.

Show me how...

Ok, so lets fire up Visual Studio and get on with adding Lottie animations to Cross platform Xamarin.Forms app :

Create a cross-platform Xamarin.Forms App and add Nuget package to all the projects (PCL, iOS and Android)

PM> Install-Package Com.Airbnb.Xamarin.Forms.Lottie -Version 2.0.0  

OR

Image for NuGet Package

Next step is to initialize the AnimationViewRender in Android and iOS

For Android - in MainActivity.cs
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity  
{
    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        AnimationViewRenderer.Init();

        LoadApplication(new App());
    }
}
For iOS, in AppDelegate.cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options)  
{
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());

    AnimationViewRenderer.Init();

    return base.FinishedLaunching(app, options);
}

Once AnimationViewRender.Init() is added, add the view in shared project and add the following XAML code to show the AnimationView

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
             x:Class="LottieAnimationDemo.LottieAnimationPage">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <forms:AnimationView x:Name="AnimationView" 
                                 Animation="like.json" 
                                 AutoPlay="True" 
                                 Loop="True" 
                                 VerticalOptions="FillAndExpand" 
                                 HorizontalOptions="FillAndExpand">

            </forms:AnimationView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

The animation like.json file is referenced from the Assets folder for Android and any folder in iOS

Make sure that the Build action is set correctly for the .json files

  • For Android - Build action should be Android Asset
  • For iOS - Build action should be BundleResource

Check out awesome animations here.

Once the above steps are completed, the animation will be shown as below:

Happy Coding ....