Lottie is a library created by Airbnb that allows you to run animations. It works by using a Json file that provides the content to render the animation. Thanks to Martijn van Dijk, this awesome library is also available on Xamarin Forms. For more information checkout the repository here: https://github.com/martijn00/LottieXamarin. Also, I would recommend checking out his great blog post: https://blog.xamarin.com/bring-stunning-animations-to-your-apps-with-lottie/
In some forums, I saw people were frustrated because Lottie was not working for them, so in this post I will try to explain step by step how to make it work.
1-Install the Lottie Package in all your projects
2-Init Lottie in both projects Android and iOS, using AnimationViewRenderer.Init();
3-Add your view in your XAML or using CodeBehind, in the case of XAML you have to add the reference
xmlns:forms=“clr-namespace:Lottie.Forms;assembly=Lottie.Forms“
4-Choose your animation
Choose your animation created in Adobe After Effects and export it to JSON file using an After Effects extension called Bodymovin.
Or if you don’t have one you can take a JSON file from here:
https://www.lottiefiles.com
5-Add your JSON to your project
In iOS add it into your project and make sure you have the build action in Bundle Resource
In Android, put it in you Assets folder and make sure you have the build action in Android Asset
And that’s it, you should have your animation working!!
Complete Source code here: https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin%20Forms/LottieSample
Happy coding! 🙂
14 Comments
Hi i can make a portuguese brazilian version and repost ? referencing your post ?
Yes, sure 🙂
Are you single?
Awesome, thanks for the blog post!
@ehuna
Thanks for blog post
It was easy to follow.
Have one problem though when trying out lottiefiles. Colors is not rendered as shown in the animation. Ex. a red heart is shown black.
Do you know why?
Thank you very much,
I did not know about Lottie before. This is a really great tool and darn nice to include animations in Xamarin.Forms apps.
Cheers,
Paul
Dear XamGirl, your posts have always been of help to me, really appreciate your efforts. please how can you assist, i need to design an app that looks like the Atom Bank app (https://play.google.com/store/apps/details?id=com.atombank.release&hl=en), is it possible to use lottie to create such animations or can i do them in normal Xamarin.Forms Animation.
Thanks
Hi Olamide, many of then you can do it using Xamarin animations https://trailheadtechnology.com/xamarin-forms-fancy-animations/
Some custom ones like min 0:11 of the video, you can do it using lottie.
Thanks !!! excelent!!! Muchas gracias!
Thanks a lot, great article!
This is exactly what I needed for my project. It had the key info that is missing from all the other sites, including the main site. You solved my days of frustration within minutes.
There is some option to hide the Action Bar? Because I have try a lot of things, but nothing works
NavigationPage.SetHasNavigationBar(this, false);