Lottie Animations in Xamarin Forms

CoverPhoto
Image Credits to LottieFiles.com

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.

LottieFile.gif
Figure 1. Lottie Files website

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.

Download.gif
Figure 2. Searching for Lottie Animation

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.

LottieDownloaded.PNG
Figure 3. Json File for Lottie Animation

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.

InstallLottie
Figure 4. Managing of Nuget Pacakge

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.

LottieNuget
Figure 5. Lottie Nuget for Xamarin Forms.

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.

RgPluginsDownload
Figure 6. Rg.Plugin.Popup Nuget

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.

AddexistingItem.jpg
Figure 7. Adding of Lottie File
AddedJson
Figure 8. Adding of Lottie File

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.

AppXaml
Figure 9. Initialization of Rg Plugins.

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

AddLoadingPage
Figure 10. Adding of LoadingPage.

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.

ConverPopupPage
Figure 11. Updating of LoadingPage.xaml.

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

LoadingPopupCodeBehind.jpg
Figure 12. LoadingPage inheriting from PopupPage.

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.

ConsumingLottie.jpg
Figure 13. Consuming of Lottie File.

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

MainPageXaml.jpg
Figure 14. MainPage content

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.

MainPageCodeBehind.jpg
Figure 15. Navigating to LoadingPage.

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

OutPut2.gif
Figure 16. Sample UWP Application

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 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s