Xamarin.Forms | Lottie Animations | Embedded Resource

wahidustoz

Wahid Abduhakimov

Posted on January 23, 2021

Xamarin.Forms | Lottie Animations | Embedded Resource

Lottie animation bindings for Xamarin.Forms has been out for quite a while now. Yet I see a lot of people out there who don't use a powerful feature to share animation files across platforms rather than manually *copy/paste*ing them into platform projects.

Sharing your resources has never been easier with Xamarin.Forms nowadays. Let's see how you can have a single point where you keep all your Lottie Animation files.

  • First, you need to install the nuget package to your shared project.
    Alt Text

  • Now, lets create a Resources folder under shared project and add the animation JSON file to that folder.
    Alt Text

Important! Build Action for the JSON file MUST be EmbeddedResource.

Alt Text

  • Let's add the animationView to a page and point the animations Source to the very EmbeddedResource we added earlier.
<?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:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
             x:Class="ayah.Views.MyPage">

    <Grid>
        <lottie:AnimationView AnimationSource="EmbeddedResource"
                              Animation="Resources.loading.json"
                              VerticalOptions="FillAndExpand"
                              HorizontalOptions="FillAndExpand"
                              RepeatMode="Infinite"/>
    </Grid>
</ContentPage>
Enter fullscreen mode Exit fullscreen mode

Notice, the AnimationSource property is set to EmbeddedResource.

Wholaa!

💖 💪 🙅 🚩
wahidustoz
Wahid Abduhakimov

Posted on January 23, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related