Code Unboxing

One of the things that user wants in a Mobile App is an immersive experience and one thing that I can think of is adding some animations in the mobile application. Me personally, I’m not that great when it comes to integrating animations to mobile apps but when I heard about Lottie I was curious and I’m super happy with it. In this article I would like to discuss about Integrating Lottie animation with Xamarin UWP platform.

Downloading Lottie Files

So why Lottie? Basically Lottie is just a framework which makes after effects more easy to implement in the Mobile space (Android, iOS, UWP). So in order to start,e you can visit the LottieFiles website which contains the collection of animation that you can use in your application as shown in Figure 1.

In this sample app let’s try to use the mughead animation by searching it in the Searchbar as shown in Figure 2. What’s nice with Lottie Files site is that you can edit some properties of the animation like the back color and the animation speed.

Just click the download button in the selected animation and it will give you a JSON file as shown in Figure 3. This file is the asset that we need to add in our UWP later.

Importing Lottie animation to UWP

Let’s start to get our hands dirty, first we need to download some Nuget packages for this sample app that we are going to create namely Lottie and Rg.Plugin. We will try to simulate a loading screen using a modal popup and the one being displayed is the Lotte Animation. First thing is to right click on the solution and click the Manage Nuget Packages for solution as shown in figure 4.

Next thing is to search for the Lottie Nuget for Xamarin forms and install it on the Core project as well as  in the platform project as shown in figure 5.

After successful install of the Lottie Nuget, next thing to do is to install the Rg.Plugin.Popup Nuget for the Core and the Platform project as shown in Figure 6.

Let’s then add the JSON file that we have downloaded from the LottieFiles site which in my case I also renamed it to cuphead.json for simpler filename in the Assets folder of the UWP platform as shown in Figure 7. and Figure 8.

Adding Loading Page

Let’s now create the Loading page, by initializing first the Rg.Plugin in the App.Xaml.cs file as shown in Figure 9.

Let’s add a new Content page called LoadingPage where we will place our Lottie animation as shown in Figure 10.

Modify the newly added Loading Page in such way that it will use the PopupPage by adding the Namespace for the Rg.Plugins and encasing it in the PoupPage tags as shown in Figure 11.

Next is to make it inherit from PopupPage in the LoadingPage.xaml.cs as shown in Figure 12.

Consuming Lottie files with Xamarin

We have already setup the Loading Page, next is to implement the Lottie animation that we have added in the assets by adding the Namespace of Lottie.Forms. Then you can already call the AnimationView which contains some properties that you will need like the Animation, IsPlaying and Loop as shown in Figure 13.

Let’s go to the MainPage, which will only contain a button that opens the Popup page as shown Figure 14.

To Complete the sample app let’s add the code PushAsync of PopupNavigation and pass the new instance of LoadingPage as it’s parameter as shown in Figure 15.

Let’s try to build and run the app and you should get the same result as shown in figure 16.

Here is the URL for the sample App: https://github.com/KirkPatrickJunsay/LottieXamarinFormsUWP

Conclusion

To wrap things up, we discussed how easy it is to Integrate Lottie Animation with Xamarin UWP platform. There are still many use cases that you can integrate Lottie not only loading screen but also can be Splash Screen, animated components, message prompts and many more. Another thing is that Lottie has a very good community actively sharing new Animations resulting into a large collection of Animation libraries that you can choose from. Lastly you can also check other cool Xamarin blogs on the URL below as the theme for the Month of July is all about Xamarin UI. A big kudos also for Luis and Steven for organizing the Xamarin UI July.

Here is the URL for Xamarin’s UI July Blog Posts: https://www.thewissen.io/introducing-xamarin-ui-july/

Happy Coding 🙂