Easily Animate Your Xamarin Applications with Lottie Animation
Tags: android, ios, csharp, dotnet
Published: 2020-01-14 03:51:23

---
title: Easily Animate Your Xamarin Applications with Lottie Animation
published: true
date: 2020-01-08 12:00:23 UTC
tags: android, ios, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/lottie-animations-xamarin-forms.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Lottie-animations-in-Xamarin-Forms.png
---

Adding simple animations to any application will make it look better. [Xamarin.Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/) provides native options to work with animations. But using Lottie animations makes it easier to add animation to your application. Lottie animations are open-source packages that cost nothing to access and use in the Xamarin applications. Please refer to this [GitHub repository](https://github.com/Baseflow/LottieXamarin) for the [ReadMe](https://github.com/Baseflow/LottieXamarin/blob/develop/README.md) and [License](https://github.com/Baseflow/LottieXamarin/blob/develop/LICENSE) files of Lottie animation projects.

Lottie animations animate elements using a JSON file, which provides the content to render the animation. There are a lot of things we can do with Lottie animations. In the following image, I have used Lottie animations to display an animated tooltip in a world map. It pops up with the name of the geolocation tapped. ![Lottie animations in Xamarin](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Lottie-animations-in-Xamarin.gif)

The following are the resources needed to create this Xamarin.Forms application:

- [Lottie NuGet packages](https://www.nuget.org/packages/Com.Airbnb.Xamarin.Forms.Lottie/)
- [Lottie JSON file containing the animation](https://lottiefiles.com/695-bouncy-mapmaker)
- [Syncfusion Maps control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps)

## Steps to add a Lottie animation in the Syncfusion Maps control

1. Create a Xamarin.Forms blank application.
2. Add the following NuGet packages to the application:
  1. [Xamarin.SfMaps](https://www.nuget.org/packages/Syncfusion.Xamarin.SfMaps/)
  2. [Lottie NuGet packages](https://www.nuget.org/packages/Com.Airbnb.Xamarin.Forms.Lottie/)
3. To create a map, add the ‘world-map.shp’ and ‘world-map.dbf’ files as resources to the project. To learn more about these resources, please refer to this [documentation](https://help.syncfusion.com/xamarin/maps/getting-started#adding-shape-files).
4. Now add a **SfMaps** control to display the map in your view.
```xml
<maps:SfMaps BackgroundColor="White" VerticalOptions="FillAndExpand">
            <maps:SfMaps.Layers >
                <maps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding DataSource}" ShapeIDPath="Country" ShapeIDTableField="admin"/>
            </maps:SfMaps.Layers>
</maps:SfMaps>
```
<ol start="5"> <li>Copy this Lottie animation [JSON file](https://lottiefiles.com/695-bouncy-mapmaker) to your Android, iOS, and UWP projects.</li>
<li>Add a Lottie animation view as a TooltipTemplate of SfMap control.</li>
</ol>
```xml
<!--Add a map with tooltip to your application -->
<maps:SfMaps BackgroundColor="White" VerticalOptions="FillAndExpand">
            <maps:SfMaps.Layers >
                <maps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding DataSource}" ShapeIDPath="Country"
                                     ShapeIDTableField="admin">
                    <maps:ShapeFileLayer.TooltipSettings>
                        <maps:TooltipSetting
                            ShowTooltip="True"
                            StrokeColor="Transparent"
                            BackgroundColor="Transparent"
                            ValuePath="Country"
                            Duration="1000">
                            <maps:TooltipSetting.TooltipTemplate>
                                <DataTemplate>
 
                                    <!--JSON file for animation -->
                                    <forms:AnimationView
                                            Animation="mapmaker.json"
                                            Loop="True" IsPlaying="True"
                                            VerticalOptions="FillAndExpand"
                                            HorizontalOptions="FillAndExpand" HeightRequest="70" WidthRequest="70"/>
                                </DataTemplate>
                            </maps:TooltipSetting.TooltipTemplate>
                        </maps:TooltipSetting>
                    </maps:ShapeFileLayer.TooltipSettings>
                </maps:ShapeFileLayer>
            </maps:SfMaps.Layers>
</maps:SfMaps>
```

Now the Lottie animation will be displayed as a pop-up for every tap within the map.

You can download the complete sample from this [GitHub](https://github.com/MeikandaNayanar/xamarin-forms-demo-applications/tree/master/MapsWithLottie) location.

## Conclusion

I hope you now have a clear idea of how to use Lottie animation in Xamarin.Forms applications. The same procedure can be followed to add Lottie animations to any template of the [Syncfusion Xamarin UI controls](https://www.syncfusion.com/xamarin-ui-controls/).

Please refer to this [link](https://lottiefiles.com/) to check the available JSON files to add animation to your Xamarin.Forms application.

If you like this article, we think you might also like the following eBooks and other articles.

[ebook] [Xamarin.Forms Succinctly](https://www.syncfusion.com/ebooks/xamarin-forms-succinctly)

[ebook] [Xamarin.Forms for macOS Succinctly](https://www.syncfusion.com/ebooks/xamarin_forms_for_mac_os_succinctly)

[blog] [7 Ways to Boost Your Xamarin Development Productivity](https://dev.to/syncfusion/7-ways-to-boost-your-xamarin-development-productivity-2hoi)

[blog] [Designing an Airfare Calendar in Xamarin.Forms](https://dev.to/syncfusion/designing-an-airfare-calendar-in-xamarin-forms-2oon)

The post [Lottie Animations in Xamarin.Forms](https://www.syncfusion.com/blogs/post/lottie-animations-xamarin-forms.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).