Animation on xamarin forms using Lottie dont work!

Rafael.Santos

Hi,
anyone use the Lottie nugget to play animations on xamarin forms.
I tested a simple example that dont run, just appear on android emulator a blank window.

I install the Lottie nugets.

Here is my xaml page:

<?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:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"

         x:Class="Example.Forms.MainPage">

    <forms:AnimationView 

            x:Name="AnimationView"

            Animation="LottieLogo1.json"

            Loop="True"

            AutoPlay="True"

            VerticalOptions="FillAndExpand"

            HorizontalOptions="FillAndExpand" />

I put the file "LottieLogo1.json" on Resources folder of the Droid Project.

Thanks

JinJiaHsu

It doesn't work even if I put the file "LottieLogo1.json" on Assets folder of the Droid Project.
Can anyone make it work?
If yes, please share the project. Because after I load official Lottie solution downloaded from github, Visual Studio 2015 hangs on initializing all projects.

JinJiaHsu

The video of the issue: https://github.com/JinJiaHsu/Lottie/blob/master/Animation not showing.gif
The source code: https://github.com/JinJiaHsu/Lottie
Can anyone fix it?

DanielKatz

I have the exact same issue... The first time that I use Lottie, so I don't even know what to look for....

Rafael.Santos

I dont know why they announce this features on the xamarin blog that simple dont work. Even the same simple example that be use to demonstrate the feature simply does not work!

Charlin

Are you guys initializing it
AnimationViewRenderer.Init(); ?

More information in this article: https://xamgirl.com/lottie-animations-step-by-step-in-xamarin-forms/

Rafael.Santos

Perfect works fine.

Rafael.Santos

But on iOS dont appear nothing, just the same blank page

Rafael.Santos

Sorry, change for other animation (json file) an works.

StephenWilkinson

I think that some .json files do not autoplay correctly - you must call play on the animation from the codebehind or somewhere. Odd.

FilipeIsaac

Same here. In Android I don't even had to use "AnimationViewRenderer.Init();", but in iOS the animation didn't started.
I had to start it from codebehind using "animationView.Play()".

@Charlin Great tutorial! Already saved it in my bookmarks

LucasRoscoeLage

Hey, I´m having a problem trying to use Lottie json animation within a carousel view, I intent to change the animation´s reference when swiping my carousel, and I want to start the new animation at this very moment, but when I try to set AutoPlay to false and IsPlaying to true when swiping, my animations weren´t able to start, if I set AutoPlay to true, the animations will start independently from my swipe actions, this if I leave Loop to true, does anyone have any sugestions on how to start it at the changeIndexEvent of my carouselView?

MarkZhukovsky

Hope they move to .NET Standard compatibility..

Christophe_Faucon

Lucas I think you should use the play method, instead of setting IsPlaying.

LeonardoFernandez

@LucasRoscoeLage said:
Hey, I´m having a problem trying to use Lottie json animation within a carousel view, I intent to change the animation´s reference when swiping my carousel, and I want to start the new animation at this very moment, but when I try to set AutoPlay to false and IsPlaying to true when swiping, my animations weren´t able to start, if I set AutoPlay to true, the animations will start independently from my swipe actions, this if I leave Loop to true, does anyone have any sugestions on how to start it at the changeIndexEvent of my carouselView?

Hi @LucasRoscoeLage i need to do the same approach do you find the way. Thanks in advance.

curtis.ehrhart

@Charlin thank you for the write up. My project required an old version of Android, so I wasn't able to use it. But I can't wait to use this in future projects!

curtis.ehrhart

out of curiosity, how come I can't add AnimationViewRenderer.Init(); in my MainActivity.cs?

It says it doesn't exist in the current context

ashujangir

You Can Use Lower Version Like 2.5.0

JuanManuelGentili

@curtis.ehrhart said:
out of curiosity, how come I can't add AnimationViewRenderer.Init(); in my MainActivity.cs?

It says it doesn't exist in the current context

@curtis.ehrhart, you have to add the Lottie library in the Droid project and then add the corresponding using in MainActivity.cs.

MNadeem

when i use lottie in my project
then lottie animation does not appear. what to do now.>>>>>????
out of curiosity, how come I can't add AnimationViewRenderer.Init(); in my MainActivity.cs?

It says it doesn't exist in the current context

piotrekbigu

From my observation it does not work in latest version which is 2.7.0.
When I downgaded to 2.6.3 it started working. Please also remeber to set HeightRequest and WidthRequest properties

<myxml>
    <lottieForms:AnimationView
        Animation="LottieLoading.json"    
        AutoPlay="True"
        Loop="True"
        HeightRequest="250"
        WidthRequest="250"
        VerticalOptions="FillAndExpand" 
        HorizontalOptions="FillAndExpand" />
</myxml>

Roy_QA

The information on this thread was helpful in the past, but it's outdated now. If you are using a newer version as of Oct-2020, you may want to follow the steps below:

1. In Visual Studio, right click your Xamarin Forms Project > Manage NuGet Packages, and install:
   • Com.Airbnb.Xamarin.Forms.Lottie (4.0.4 or latest): install on Xamarin Project, Android and iOS.
   • Com.Airbnb.AnAndroid.Lottie: install on Android project only.
   • Com.Airbnb.iOS.Lottie: install on iOS project only.
2. There's no need to initialize the components in the Android and iOS projects.
3. On the root of your Xamarin Forms Project, create a new folder called Resources.
4. Add your Lottie JSON files to the Resources folder, and don't forget these important steps:
   • Ensure the file names are all lowercase, otherwise you may encounter problems with Android.
   • Highlight each file, and check the Properties window to ensure Build Action = Embedded resource. Otherwise your animation will not play. It's easy to forget this important step, I often add the files and forget to check this property.
5. Add the assembly reference at the top of the XAML page that you want to play the animation (see last row in the snippet below).

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
             xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms" ...

6. Finally, add your animation:
   • Please note that the Loop attribute doesn't exist anymore. You have to use RepeatMode which gives you more options.
   • The Animation attribute is formatted as {Resource Folder name}.{Lottie JSON animation file}
   • Don't forget to set the attribute AnimationSource="EmbeddedResource".
   • You may have to set the HeightRequest attribute if the animation is not working.

   <lottie:AnimationView Animation="Resources.your_lottie_animation_goes_here.json"
                         AnimationSource="EmbeddedResource"
                         RepeatMode="Infinite"
                         AutoPlay="True"
                         HeightRequest="300"
                         VerticalOptions="EndAndExpand"
                         HorizontalOptions="FillAndExpand" />

I hope this information saves you some time.

DimChris

I think that lottie latest version needs to update target framework to Android 10, and also to update your libraries to AndroidX

CliftonSteenkamp

@Roy_QA Is there any reason why we can't just put it in the Assets folder in android and the Resources folder in iOS like how it was done with previous versions? I've updated to the latest version and it's just not working (the animation is not displaying). After trying different things and downgrading, just for interest sake, I'd like to know why does the embedded resource folder method work?

Roy_QA

@CliftonSteenkamp, yes you can place the animation in the Assets(Android)/Resources(iOS) folders, it's just not practical to maintain the two platforms. If you decide to place the animation in the Assets(Android)/Resources(iOS) folders, just make sure to change the Animation="your_lottie_animation_goes_here.json" attribute to point to the correct location (see referring to files in Resources).

Junior_Oliveira

@Roy_QA said:
The information on this thread was helpful in the past, but it's outdated now. If you are using a newer version as of Oct-2020, you may want to follow the steps below:

1. In Visual Studio, right click your Xamarin Forms Project > Manage NuGet Packages, and install:
   • Com.Airbnb.Xamarin.Forms.Lottie (4.0.4 or latest): install on Xamarin Project, Android and iOS.
   • Com.Airbnb.AnAndroid.Lottie: install on Android project only.
   • Com.Airbnb.iOS.Lottie: install on iOS project only.
2. There's no need to initialize the components in the Android and iOS projects.
3. On the root of your Xamarin Forms Project, create a new folder called Resources.
4. Add your Lottie JSON files to the Resources folder, and don't forget these important steps:
   • Ensure the file names are all lowercase, otherwise you may encounter problems with Android.
   • Highlight each file, and check the Properties window to ensure Build Action = Embedded resource. Otherwise your animation will not play. It's easy to forget this important step, I often add the files and forget to check this property.
5. Add the assembly reference at the top of the XAML page that you want to play the animation (see last row in the snippet below).

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
             xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms" ...

6. Finally, add your animation:
   • Please note that the Loop attribute doesn't exist anymore. You have to use RepeatMode which gives you more options.
   • The Animation attribute is formatted as {Resource Folder name}.{Lottie JSON animation file}
   • Don't forget to set the attribute AnimationSource="EmbeddedResource".
   • You may have to set the HeightRequest attribute if the animation is not working.

   <lottie:AnimationView Animation="Resources.your_lottie_animation_goes_here.json"
                         AnimationSource="EmbeddedResource"
                         RepeatMode="Infinite"
                         AutoPlay="True"
                         HeightRequest="300"
                         VerticalOptions="EndAndExpand"
                         HorizontalOptions="FillAndExpand" />

I hope this information saves you some time.

Thanks!!! Really saved my day

Junior_Oliveira

working perfectly on Android. On IOS the OnRepeatAnimation event does not fire.

Sumit77

@Junior_Oliveira I have followed your steps
1. I create a new Project LottieAnimation.
2. Adding Com.Airbnb.Xamarin.Forms.Lottie Plugins 2.0.4.
3. Add Lottie reference in XAML Page.
4. Add the animation code.

It's working fine in iOS
but in Android, I need to HELP, anyone have an idea to resolved or any suggestion where am I wrong.

Junior_Oliveira

Good Morning

The steps suggested are not mine! The suggestion is @Roy_QA .

About your problem, add some code please, explain where the json files are.

Sumit77

@Junior_Oliveira, @Roy_QA
I have attached the project please check and let me know, what is wrong with this project.
and thanks for replying.

deck95

@Roy_QA said:
The information on this thread was helpful in the past, but it's outdated now. If you are using a newer version as of Oct-2020, you may want to follow the steps below:

1. In Visual Studio, right click your Xamarin Forms Project > Manage NuGet Packages, and install:
   • Com.Airbnb.Xamarin.Forms.Lottie (4.0.4 or latest): install on Xamarin Project, Android and iOS.
   • Com.Airbnb.AnAndroid.Lottie: install on Android project only.
   • Com.Airbnb.iOS.Lottie: install on iOS project only.
2. There's no need to initialize the components in the Android and iOS projects.
3. On the root of your Xamarin Forms Project, create a new folder called Resources.
4. Add your Lottie JSON files to the Resources folder, and don't forget these important steps:
   • Ensure the file names are all lowercase, otherwise you may encounter problems with Android.
   • Highlight each file, and check the Properties window to ensure Build Action = Embedded resource. Otherwise your animation will not play. It's easy to forget this important step, I often add the files and forget to check this property.
5. Add the assembly reference at the top of the XAML page that you want to play the animation (see last row in the snippet below).

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
             xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms" ...

6. Finally, add your animation:
   • Please note that the Loop attribute doesn't exist anymore. You have to use RepeatMode which gives you more options.
   • The Animation attribute is formatted as {Resource Folder name}.{Lottie JSON animation file}
   • Don't forget to set the attribute AnimationSource="EmbeddedResource".
   • You may have to set the HeightRequest attribute if the animation is not working.

   <lottie:AnimationView Animation="Resources.your_lottie_animation_goes_here.json"
                         AnimationSource="EmbeddedResource"
                         RepeatMode="Infinite"
                         AutoPlay="True"
                         HeightRequest="300"
                         VerticalOptions="EndAndExpand"
                         HorizontalOptions="FillAndExpand" />

I hope this information saves you some time.

You are a LIFESAVER. Thank you.

SlowFing

Does anyone have any tips on how to get this working with animations which contain merge paths?
Where do you put the EnableMergePathsForKitKatAndAbove?

Xasanrah

Hi there, if somebody gets the same problem(not playing the animation) on the android platform then check the following -
Depending on the Android Target Framework of your project you need to install a specific version of the Com.Airbnb.Xamarin.Forms.Lottie(Lottie component). Starting from 3.1.0 and above it works only for Android projects with Target Framework 10(API 29). The last version that works for Target Framework Android 9(API 28) is 3.0.4.
So if your project still targets the Android 9(API 28) then install 3.0.4 version

afsanchez

I'm using Visual Studio 2019, writing an Android app. For me using @Roy_QA was the right path. However, to make it work, I had to place my *.json files in the 'Assets' folder, setting them to AndroidAsset in build action, and then point to them as follows:

<lottie:AnimationView Animation="myanimation.json" AnimationSource="AssetOrBundle" />

Only after this method is when it began working for me. Strangely, running them from the Resources folder would not work. I am not sure why.

I hope this helps others.

Roy_QA

You probably forgot the most important step:

Highlight each file, and check the Properties window to ensure Build Action = Embedded resource. Otherwise your animation will not play. It's easy to forget this important step, I often add the files and forget to check this property.