Xamarin.Forms SplashScreen with Lottie

A while ago I was asked to create an animated SplashScreen and I missed a lot of a tutorial that would help me with this, I came to find one on a site that gave me a north to where I should start that was this one.

And analyzing his I decided to do mine and create this tutorial to help those who need it.

First let's create a Xamarin Forms project.

With the project created we will add the library of Lottie, for those who do not know is a mobile library for iOS and Android.
Want to know more about see here lottie also has an article by Thiago Bertuzzi where he does all the part of setting xamarin with lottie.

In our project we will install these three nugget packages

The Com.Airbnb.Android.Lottie package will only be installed in the
Android project in version 3.0.6

The Com.Airbnb.iOS.Lottie
package will only be installed in the iOS project in version 2.5.10

And the Com.Airbnb.Xamarin.Forms.Lottie package will be installed in the three projects in version 3.0.4

After installation it is necessary to start them on their respective platforms.

On android on MainActivity just add the code AnimationViewRenderer.Init();

In iOS in AppDelegate just add the code AnimationViewRenderer.Init();

Cool with everything installed and set up let's make the magic happen.

On Android, we'll create the MySplashScreenAnimatedActivity page that will boot before main Activity.

If you want to display only one image, just specify android: windowBackground in the Activity style, but lottie animation is implemented as a visualization called LottieAnimationView, then set this view in the Activity layout that is in the Resurce -> Values -> style.xml folder

First, prepare a theme for the home page separately from MainActivity. This time, the background is set beyond the full screen setting.

The background is android: windowBackground, and the same can be done with android: colorBackground However, here, a black
screen is displayed for a moment, so I use android: windowBackground The background color is set in colors.xml that is in the folder Resurce -> Values -> colors.xml

MySplashScreenAnimatedActivity

Implementation of the SplashScreenAnimatedActivity.cs.

It inherits Animator.IAnimatorListener and transitions to MainActivity when the animation ends.

In the layout folder of the Android project was created the Activity_SplashScreen.xml with the following layout.

Finally we have the following animation in Android

iOS also performs a homepage in our case will be the MySplashScreenAnimatedViewController as on Android.

The appDelegate file turned out this way.

See that I check if Windows = null if it is I run my My SplashScreenAnimatedViewController otherwise I run forms.

In my SplashScreenAnimatedViewController, add LOTAnimationView and call FinishedLaunching again in the event at the end of the animation to initialize Forms.

And that's it guys for those who want to see the full code just access my github