Xamarin Forms Lottie image not displaying

Question

I have Xamarin Forms application. I need to put image as json in project.

Here is XAML:

 <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="xxx.Views.ScanReadyPage">
    <StackLayout>

            <forms:AnimationView 
                x:Name="lottie" 
                Animation="12240-cash-car.json" 
                Loop="False" 
                AutoPlay="True" 
                WidthRequest="200" 
                HeightRequest="200" 
                Margin="10,0,10,0" 
                VerticalOptions="FillAndExpand" 
                HorizontalOptions="FillAndExpand" />
</StackLayout>

    </ContentPage.Content>
</ContentPage>

I have installed Com.Airbnb.Xamarin.Forms.Lottie version 3.0.3 and Xamarin.Forms version 4.3.0.991221

I have added downloaded file from lottiefiles.com: 12240-cash-car.json to Assets folder in XamarinForms.Android project and set build action to Android Asset.

Nothing is displayed on Android. No informations at output, no error occured. I have changed Xamarin Forms to 3.6.0 - no changes. I have installed all versions of Lottie: from 2.6.3 to 3.0.3. - no image is being displayed. (Version 2.6.3. and earlier have error about missing keystore).

I have checked code behind version but it is also not working:

 public MainPage()
                {
                    element = new AnimationView()
                {
                    Loop = true,
                    AutoPlay = true,
                    Animation = "12230-bounce-down-steps.json",
                    WidthRequest = 400,
                    HeightRequest = 400,
                    VerticalOptions = LayoutOptions.FillAndExpand,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    IsVisible = true,
                    Speed = 1
                };
            }

            AnimationView element = new AnimationView();

            protected override void OnAppearing()
            {
                element.Animation = "12230-bounce-down-steps.json";
                element.Play();
            }

How to make it works?

YoungEddie · Answer 1 · 2019-12-05T14:44:16.587

4

I have found solution here: https://iinteractive.com/notebook/2017/05/31/lottie-xamarin.html . At start install "Com.Airbnb.Xamarin.Forms.Lottie" in all 3 projects. Then install another library: "Com.Airbnb.Android.Lottie" separately in Android project. Now you can go to MainActivity.cs, enter "using Lottie.Forms.Droid" and "AnimationViewRenderer.Init(); and json images are displaying correctly. Thanks Guilherme Nimer for good tip.

edited Dec 05 '19 at 14:44

answered Dec 05 '19 at 14:29

YoungEddie

405
7
26

You can mark it as the right answer which will help more people with same problem:). – nevermore Dec 06 '19 at 08:08
1

It is not valid anymore – Cfun Aug 15 '20 at 23:57

score 1 · Answer 2 · answered Dec 05 '19 at 12:40

did u init the AnimationViewRenderer from MainActivity?

MainActivity.cs

protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;


            base.OnCreate(savedInstanceState);


            PullToRefreshLayoutRenderer.Init();         


            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

            AnimationViewRenderer.Init();


            LoadApplication(new App());

        }

on AppDelegate.cs

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {


            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
            AnimationViewRenderer.Init();
            return base.FinishedLaunching(app, options);
        }

Working animation that i use in my proj

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
              xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
              xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="SincorSPM.ErrorPopup.PopupError">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation
      PositionIn="Bottom"
      PositionOut="Center"
      ScaleIn="1"
      ScaleOut="0.7"
      DurationIn="700"
      EasingIn="BounceOut"/>
    </pages:PopupPage.Animation>

    <Frame IsClippedToBounds="True" CornerRadius="15" Margin="15,15">
        <StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="15,15">

            <Label Text="Ocorreu um erro!" TextColor="Orange" FontSize="Title" Margin="10,10,10,3" HorizontalOptions="CenterAndExpand"/>
            <Label Text="Verifique sua conexão e tente novamente" TextColor="Black" FontSize="Medium" Margin="10,0,10,0" HorizontalOptions="CenterAndExpand"/>
            <Label x:Name="txCode" IsVisible="False"  TextColor="Black" FontSize="Medium" Margin="10,0,10,0" HorizontalOptions="CenterAndExpand"/>
            <lottie:AnimationView 

                Animation="dc.json" 
                AutoPlay="True" Loop="true"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand" />
            <Button Margin="10,10" HorizontalOptions="FillAndExpand" Text="Fechar" BackgroundColor="#032e5c" CornerRadius="15" TextColor="White" Clicked="Fechar"/>

        </StackLayout>
    </Frame>



</pages:PopupPage>

my lottie is 3.0.3

When I install Lottie version 3.0.3, then in MainActivity.cs: AnimationViewRenderer.Init() - "The name 'AnimationViewRenderer' does not exist in the current context" When I install Lottie version 2.6.3 or earlier - AnimationViewRenderer.Init() is recognized well, but error occure: "Unhandled Exception: Java.Lang.IllegalStateException: Missing values for keyframe." — YoungEddie, Dec 05 '19 at 13:01
on 3.0.3, mainactivity Add: using Lottie.Forms.Droid; on AppDelegate: using Lottie.Forms.iOS.Renderers; — Guilherme Nimer, Dec 05 '19 at 13:14
strange but using Lottie.Forms.Droid; - cause "Using directive is unnecessary. The type or namespace name 'Droid' does not exist in the namespace 'Lottie.Forms' (are you missing an assembly reference?)" — YoungEddie, Dec 05 '19 at 13:30
I have installed Lottie version 3.0.3 in all 3 projects (every of them has reference to Com.Airbnb.Xamarin.Forms.Lottie) — YoungEddie, Dec 05 '19 at 13:58
AnimationViewRenderer.Init() on Mainactivity then right click on it and show me a printscreen of all options you have on Quick Actions and Refactoring — Guilherme Nimer, Dec 05 '19 at 14:08

score 0 · Answer 3 · answered Apr 12 '20 at 14:13

0

I solved the issue by updating my xamarin.forms to the latest and changing Target Android Version to 10.0

answered Apr 12 '20 at 14:13

Siphamandla Ngwenya

2,696
1
16
21

Xamarin Forms Lottie image not displaying

3 Answers3