Achraf Ben Alaya
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
SUBSCRIBE
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
No Result
View All Result
Achraf Ben Alaya
No Result
View All Result
Home Blog

Animations with Lottie in Xamarin Forms

achraf by achraf
April 26, 2020
in Blog, xamarin
0
Animations with Lottie in Xamarin Forms
0
SHARES
202
VIEWS
Share on FacebookShare on Twitter

Animations with Lottie in Xamarin Forms

Days ago , I have been trying to add some animation to one of my applications ,and I was fascinated when I found Lottie .

First , what is Lottie ?

Lottie is a library, designed for iOS, Android and React Native, by Airbnb, that allows you to run animations. These animations are defined in a JSON file, containing all the details of colors, shapes, transforms and more. These JSON files are created by Adobe After Effects. However, many designers have been happy to share their works, and you can access pre-built animations at LottieFiles.

Now , for me , what is more amazing than animation , is “Featured animations from community” ! You know why people are awesome ! people contribute to Lottie Files everyday, and just now I have found new awesome animations that I will spend some time after writing this post to see if I may need one of them .

Let’s see what are we going to build ! For our demo application I didn’t only just use Lottie plugin but I also used another plugin called Rg.Plugins.Popup to present the animation in a more beautiful way . now let’s see the

Demo :

 

1 of 3
- +

Now As you can see , using some animations can make your app look prettier and the user can understand his actions more easily .

How to use Lottie and Popup ? As I said before , I used two plugins , Lottie and Rg.Plugins.Popup . First let’s start by adding Lottie plugin by simply installing it to our solution :

As you can see there is a lot of Lottie plugins , when using xamarin.forms you should focus on Com.Airbnb.Xamarin.Forms.Lottie , here I’m using the latest stable and available version 3.0.0 .

now all you need is to download an animation file , which is a json file from Lottie website :

and after that, you should put that file inside the Assets folder in android project and inside Resources folder in Ios project.

Now , simply , to use one of those files you need to add this bloc of code

<forms:AnimationView x:Name="AnimationView"
  IsPlaying="True"
   Animation="gift-box.json"
  Loop="True"
  AutoPlay="True"
  VerticalOptions="FillAndExpand"
  HorizontalOptions="FillAndExpand" />

You can then control the animation , such as AutoPlay,Loop and IsPlaying so you can control the behavior of your application . Just like that , we have created a simple animation that you can include inside any page inside your project. now , let’s install the Rg.Plugins.Popup :

At this time , the available version is 1.1.5.188 . now after installing the nuget , there is some more work to do . The plugin requires to be initialized. To use a PopupPage inside an application, each platform application must initialize the Rg.Plugins.Popup. This initialization step varies from a platform to another : Android : You need to add ” Rg.Plugins.Popup.Popup.Init(this, bundle);” as in the picture below

On iOS

 

and like that , we have prepared our environment to use our plugin . now we need to create a PopupPage (You can read more details about it in this link)

<?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"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
                mc:Ignorable="d"
                x:Class="LottieListTest.Views.PopupPageSentEmail">
                <Frame CornerRadius="20" 
                 BackgroundColor="GhostWhite" 
                HorizontalOptions="CenterAndExpand" 
                VerticalOptions="CenterAndExpand"
                 x:Name="AnimationFrame">
                    <StackLayout Spacing="10">
                        <forms:AnimationView x:Name="AnimationView"
                            Animation="91-mailsent.json"
                            Loop="True"
                            AutoPlay="True"
                            WidthRequest="150" HeightRequest="150"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand" />
                       <Label Text="Sent!" HorizontalTextAlignment="Center"/>
                         </StackLayout>
                         </Frame>
                        </pages:PopupPage>

now , after creating the PopupPage , we need to call it from our main page

await PopupNavigation.PushAsync(new PopupPageSentEmail()); We have, at end, created a beautiful simple addition to our project that will make it look better .

You can find the whole project , with the apk file so you can test it on your android phone inside the project on github from this link. Sorry iOS users , I don’t have neither a Mac or Iphone .

https://github.com/achrafbenalaya/xamarinformsaniamtion/blob/master/LottieListTest/Imagesandapk/com.companyname.lottielisttest-Signed.apk

ShareTweet
Previous Post

Font Awesome ,Bootstrap and Material Font Icons For Xamarin.Forms

Next Post

Sql tips

Related Posts

Microsoft Ignite Cloud Skills Challenge March 2021
Blog

Microsoft Ignite Cloud Skills Challenge March 2021

March 2, 2021
59
Hello Microsoft Graph !
Azure

Hello Microsoft Graph !

February 25, 2021
24
You forget to shutdown your virtual machine on your way home ? send an email and save your time
Blog

You forget to shutdown your virtual machine on your way home ? send an email and save your time

February 6, 2021
37
Azure Automation :  How to create PowerShell Runbook
Azure

Azure Automation : How to create PowerShell Runbook

February 4, 2021
26
Welcome to Azure Resource Mover service
Azure

Welcome to Azure Resource Mover service

February 2, 2021
57
Background Tasks With Hangfire And .Net 5
Blog

Background Tasks With Hangfire And .Net 5

January 25, 2021
130
Next Post
Sql tips and tricks

Sql tips

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Microsoft Teams

What’s new in Microsoft Teams

September 4, 2020
81
Migration from Asp.Net Core 3.1 to 5.0 and publish to azure

Migration from Asp.Net Core 3.1 to 5.0 and publish to azure

November 12, 2020
107
Configure Azure Web App Logging With .NET 5

Configure Azure Web App Logging With .NET 5

December 11, 2020
35
How To Host a React Static Website on Azure

How To Host a React Static Website on Azure

September 27, 2020
69

How To host a Next.js app on Azure

October 5, 2020
54
Azure Function to Upload Data to Azure Blob

Azure Function to Upload Data to Azure Blob

August 29, 2020
51
Facebook Twitter LinkedIn Youtube
Microsoft Ignite Cloud Skills Challenge March 2021

Microsoft Ignite Cloud Skills Challenge March 2021

March 2, 2021
Hello Microsoft Graph !

Hello Microsoft Graph !

February 25, 2021
You forget to shutdown your virtual machine on your way home ? send an email and save your time

You forget to shutdown your virtual machine on your way home ? send an email and save your time

February 6, 2021

Categories

  • Apps (1)
  • Azure (18)
  • blazor (2)
  • Blog (36)
  • c# (6)
  • Cloud (17)
  • docker (2)
  • Games (1)
  • General Tips & Fix (1)
  • motivation (1)
  • Motivation (3)
  • News (7)
  • sql (3)
  • Tricks, Tips and Fixes (1)
  • xamarin (5)

No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About