Apply Lottie Animations In Xamarin.Android

Lottie is a library created by Airbnb. It provides a good animation for Andorid as well as iOS in Xamarin. A special thanks to Martijn van Dijk for this.This awesome library is also available on Xamarin.

I saw people were frustrated because Lottie was not working for them. So in this post I will try to explain how to make it work.

For the first step, we will configure Xamarin.Android step by step.

Install the Lottie Xamarin.Android project.

Android

Add your View code in your XAML.

Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:orientation="vertical"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:background="@android:color/white">  
  8.     <FrameLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:paddingBottom="32dp">  
  12.         <com.airbnb.lottie.LottieAnimationView  
  13.             android:id="@+id/animation_view"  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_gravity="center"  
  17.             app:lottie_fileName="Logo/video_cam.json"  
  18.             app:lottie_loop="true" />  
  19.     </FrameLayout>  
  20. </LinearLayout>  
Write the code to play Animation in CS file.

Code
  1. using Android.App;  
  2. using Android.OS;  
  3. using Com.Airbnb.Lottie;  
  4.   
  5. namespace demo  
  6. {  
  7.     [Activity (Label = "demo", MainLauncher = true, Icon = "@mipmap/icon")]  
  8.     public class MainActivity : Activity  
  9.     {  
  10.         private LottieAnimationView animationView;  
  11.   
  12.         protected override void OnCreate (Bundle savedInstanceState)  
  13.         {  
  14.             base.OnCreate (savedInstanceState);  
  15.             SetContentView (Resource.Layout.Main);  
  16.             this.animationView = FindViewById<LottieAnimationView> (Resource.Id.animation_view);  
  17.         }  
  18.         protected override void OnStop ()  
  19.         {  
  20.             base.OnStop ();  
  21.             this.animationView.CancelAnimation ();  
  22.         }  
  23.   
  24.         protected override void OnStart ()  
  25.         {  
  26.             base.OnStart ();  
  27.             this.animationView.Progress = 0f;  
  28.             this.animationView.PlayAnimation ();  
  29.         }  
  30.     }  

Place a JSON file in the Assets foler. The main point here is to check if the build action in Android asset is checked or not.

Android

Compile your Android project. Yes, it is working here.

Android

Feel free to comment if you are not able to configure it.
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now