PopUps and Animations with Xamarin Forms

Today we're going to learn how you can do a customizable PopUp and how to use the amazing animations of Lottie.

Rg.Plugins.Popup

Rg.Plugins.Popup - is a cross platform plugin for Xamarin.Forms which allows to open Xamarin.Forms pages as a popup that can be shared across iOS, Android and UWP (macOS supporting will be soon). Also the plugin allows to use very simple and flexible animations for showing popup pages. For more information see Wiki

Lottie Animations

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

Let's configure out proyect in which we've worked previously, if you do not have the solution please download it here

Open ShellDemo Solution and go to ShellDemo.Android, right click on the proyect and select Properties, after that you must take a look into the Application part, the Framework Target

So open Manage NuGet Packages for Solution, search first Rg.Plugins.Popup and install it, then search for Com.Airbnb.Xamarin.Forms.Lottie, look a the Dependencies part, check that the Target Framework for Android Proyect is the same of that package version

In this case our proyect targets to Android Pie (9.0), so I'm going to install the version number 2.7.1 that's targeting the same Android Version.

Before moving on the view and coding, we must configure our packages to use them in our proyect.

Go to you MainActivity.cs file located in the ShellDemo.Android proyect and add this lines of code:

Congratulations you've configured the Rg.Plugins.Popup,and Lottie animations.

Let's build the View

Go to the portable proyect and inside Views folder, add a new one with the name: PopUps, then in that folder add a new ContentPage named: LoadingPopUp and replace the content of that file for this:

Then open LoadingPopUp.xaml.cs and replace the content for this:

Now if you want to test our new PopUp, go to AppShell.xaml.cs and replace the content with this lines of code:

So when the app starts, the PopUp will appear. Debug the app and test it.

As you can see the PopUp was successfully shown, but what's about the animations. We need to modify again the LoadingPopUp.xaml, replace the content again for this:

Before you play the app again, download loading.json file, and add it into ShellDemo.Android > Assets folder.

That's it, the animation now is running in the PopUp Page.

Results

Related Links

Completed Solution: Azure DevOps Repo

Lottie Documentation: Com.Airbnb.Xamarin.Forms.Lottie

Lottie Files: Animations

Rg.Plugins.Popup Nuget: Rg.Plugins.Popup

Rg.Plugins.Popup Documentation: Documentation