DEV Community

loading...
Cover image for Xamarin.Forms | Lottie Animations | Embedded Resource

Xamarin.Forms | Lottie Animations | Embedded Resource

wahidd profile image David Wahid ・1 min read

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!

Discussion (3)

pic
Editor guide
Collapse
albertoiglesias2001 profile image
Alberto Iglesias

Just for you know, in iOS is working fine, is just on Android is not working

Collapse
wahidd profile image
David Wahid Author

Did you try on a real Android device?
If it didnt work on a real device, I will look into the code and try to fix it?
The thing is, android simulators arent powerful enough i guess to render lottie animations.

Collapse
albertoiglesias2001 profile image
Alberto Iglesias

Hello David, I do exactly the same thing but the animations is not showing, can you check in this code or provide your sample?