Getting Lottie Animation to work in Xamarin Android (native, not Forms) Splash Screen

francisc0francisc0 Member ✭✭
edited April 11 in Xamarin.Android

Hi,
Has anyone had any luck getting a lottie animation to work in an Xamarin Android Splash screen?

I've created a layout for my Splash screen:
PLEASE NOTE: I had to remove the http : // from the schemas because as a first time poster on this forum I was getting an error that I couldn't post links

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="schemas.android.com/apk/res/android"
    xmlns:app="schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/SunAnim"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="sun_burst_icon.json"
            app:lottie_loop="false"
            app:lottie_autoPlay="true"
            android:gravity="center" />
</LinearLayout>

and this is my SplashActivity:

using Android.Animation;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Support.V7.App;
using Android.Util;
using Com.Airbnb.Lottie;

namespace WeatherTest
{
    [Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity, Animator.IAnimatorListener
    {
        static readonly string TAG = "WeatherTest:" + typeof(SplashActivity).Name;
        LottieAnimationView animationView;

        public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
        {
            base.OnCreate(savedInstanceState, persistentState);
            SetContentView(Resource.Layout.Splash);
            setup();
        }

        void setup()
        {
            animationView = FindViewById<LottieAnimationView>(Resource.Id.SunAnim);
            animationView.AddAnimatorListener(this);
        }

        public void OnAnimationCancel(Animator animation)
        {
        }

        public void OnAnimationEnd(Animator animation)
        {
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }

        public void OnAnimationRepeat(Animator animation)
        {
        }

        public void OnAnimationStart(Animator animation)
        {
        }

        // Launches the startup task
        protected override void OnResume()
        {
            base.OnResume();

            if (animationView == null)
            {
                animationView = FindViewById<LottieAnimationView>(Resource.Id.SunAnim);
            }

            animationView.AddAnimatorListener(this);
            animationView.PlayAnimation();

        }

        public override void OnBackPressed() { }
    }
}

animationView always is null no matter from which lifecycle function I grab it from. The screen is always black.

I'm hoping to set it up where the animation plays and then it goes to the MainActivity when it ends

Answers

  • yelinzhyelinzh Member, Xamarin Team Xamurai
    edited April 12

    @francisc0 I've reproduce you code, it works well.
    IDE version:

    • Android.Lottie: 2.6.0
    • Xamarin.Android: 27.0.2.1
    namespace App6
    {
        [Activity(Theme = "@style/AppTheme", MainLauncher = true, NoHistory = true)]
        public class SplashActivity : AppCompatActivity,Animator.IAnimatorListener
        {
            LottieAnimationView animationView;
            public void OnAnimationCancel(Animator animation)
            {
            }
    
            public void OnAnimationEnd(Animator animation)
            {
                StartActivity(new Intent(this,typeof(MainActivity)));
            }
    
            public void OnAnimationRepeat(Animator animation)
            {
            }
    
            public void OnAnimationStart(Animator animation)
            {
            }
    
            protected override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
    
                SetContentView(Resource.Layout.layout1);
                animationView = FindViewById<LottieAnimationView>(Resource.Id.lottie_animationView);
                animationView.AddAnimatorListener(this);
                animationView.RepeatCount = 1;
                animationView.PlayAnimation();
            }
    
        }
    }
    

  • francisc0francisc0 Member ✭✭
    edited April 12

    I'm on Com.Airbnb.Android.Lottie 2.7.1 and Xamarin Android 28.0.0.1 so maybe it's a version issue?

    What does your @style/AppTheme look like?

    this is what my @style/MyTheme.Splash looks like:

    <?xml version="1.0" encoding="UTF-8"?>
    <resources>   
        <style name="MyTheme.Base" parent="Theme.AppCompat">
        </style>
        <style name="MyTheme" parent="MyTheme.Base">
        </style>
        <style name="MyTheme.Splash" parent="Theme.AppCompat.NoActionBar">
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowFullscreen">true</item>
        </style>
    </resources>
    
    
  • francisc0francisc0 Member ✭✭

    correction, this is what my Visual Studio for Mac is showing as my Xamarin.Android version is:

    Xamarin.Android
    Version: 9.2.0.5 (Visual Studio Community)
    Android SDK: /Users/me/Library/Developer/Xamarin/android-sdk-macosx
    Supported Android versions:
    4.4 (API level 19)
    7.1 (API level 25)
    8.0 (API level 26)
    8.1 (API level 27)

  • yelinzhyelinzh Member, Xamarin Team Xamurai
    edited April 15

    Try to use Android.Lottie: 2.6.0. I use lottie.json.

    splash_layout.axml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.airbnb.lottie.LottieAnimationView 
            android:id="@+id/lottie_animationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:lottie_fileName="5502-loading-22-wrench.json"
            app:lottie_loop="true"
        />
    
    </LinearLayout>
    

Sign In or Register to comment.