DEV Community

Cover image for Xamarin.Forms | Lottie Animations | Embedded Resource
Wahid Abduhakimov
Wahid Abduhakimov

Posted on

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!

Top comments (4)

Collapse
 
isaacrebolledo profile image
Isaac Rebolledo

It works on Android too
Check your project file and folder structure

Collapse
 
albertoiglesias2001 profile image
Alberto Iglesias

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

Collapse
 
wahidustoz profile image
Wahid Abduhakimov

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?