Forum Xamarin.Forms

Animation on xamarin forms using Lottie dont work!

Rafael.SantosRafael.Santos PTUniversity ✭✭

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

Tagged:

Posts

  • JinJiaHsuJinJiaHsu USMember ✭✭

    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.

  • DanielKatzDanielKatz USMember

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

  • Rafael.SantosRafael.Santos PTUniversity ✭✭

    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!

  • Rafael.SantosRafael.Santos PTUniversity ✭✭

    Perfect works fine.

  • Rafael.SantosRafael.Santos PTUniversity ✭✭

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

  • Rafael.SantosRafael.Santos PTUniversity ✭✭

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

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

  • 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 :)

  • 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?

  • MarkZhukovskyMarkZhukovsky USMember ✭✭

    Hope they move to .NET Standard compatibility..

  • Christophe_FauconChristophe_Faucon USUniversity ✭✭

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

  • @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.ehrhartcurtis.ehrhart USMember ✭✭

    @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.ehrhartcurtis.ehrhart USMember ✭✭

    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

  • ashujangirashujangir Member

    You Can Use Lower Version Like 2.5.0

  • @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.

  • MNadeemMNadeem Member ✭✭

    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

  • 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_QARoy_QA Member ✭✭

    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" ...
    
    1. 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.

  • DimChrisDimChris USMember ✭✭✭✭

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

  • CliftonSteenkampCliftonSteenkamp USMember ✭✭

    @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_QARoy_QA Member ✭✭

    @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_OliveiraJunior_Oliveira USMember ✭✭

    @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" ...
    
    1. 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_OliveiraJunior_Oliveira USMember ✭✭

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

  • Sumit77Sumit77 Member
    edited December 2020

    @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_OliveiraJunior_Oliveira USMember ✭✭

    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.

  • Sumit77Sumit77 Member
    edited December 2020

    @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. :)

  • deck95deck95 Member

    @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" ...
    
    1. 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.

  • SlowFingSlowFing Member

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

  • XasanrahXasanrah CZMember ✭✭

    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

  • afsanchezafsanchez Member
    edited April 7

    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_QARoy_QA Member ✭✭

    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.

Sign In or Register to comment.