Awesome Animations for your Xamarin.Forms apps with Lottie

let's be honest here for a second your application can do the best things the greatest things it will functionally do all the things that it needs to do but if it doesn't look great people are not going to have a great time using it you can solve that by incorporating some animations a very easy way to add awesome animations is by adding a lodi library to your xamarin forms application in this episode we are going to see how to get these lottie files and how to incorporate them in your xamarin forms application like this please don't forget to like and subscribe thanks so let's talk about lottie a little bit first lottie is something that is invented by airbnb and it allows you to create cool animations like you can see this drummer right here and you can export them to json files so that's pretty cool you can use after effects and some plug-in called body move-in to extract animations in json and then you can use them you can see it here you can use them in web ios android flutter all the things basically but also xamarin and that's what we're going to see here we're going to use this in xamarin forms this particular site lottie files is pretty cool it allows you to browse all these kinds of animations here we see the reasons and if we go there this is just from the community people are putting their animations up here for you to use so even if you're not familiar with um after effects and that kind of stuff or animations then you can probably find a suitable animation here you can download and use that in your application of course watch out for the license that is attached if you might need to attribute the artist that created this always give the proper credits to whoever done this so that's a little bit about lottie now because there is a lot of platforms that support it there have to be different libraries and there is one for xamarin specifically which is created by martijn van dijk and his company baseflow and this library has bindings for ios android and also for xamarin forms so the repository is right here github.com slash base flow slash lot xamarin it has holy information for you to get started it has some links to the things that i just mentioned after effects body movement so and here is some other examples but you know what let's just jump into the code and see what it's all about so here we are in visual studio 2019 for mac i've already created a little file new application just a blank forms application i've changed some things for the header to say lottie animations i've added a play and a pause button that you can see here i will get to that in a little bit but you know just to not bore you with some um basics right here and focus on only the animation stuff i've added this already and here in code you can see it's a stack layout a frame this is again this is all a file new application and here we have a stack layout with the buttons and we are going to add the animation bits here so the first thing you want to do is to go to your solution level and go to manage nuget packages where we are going to install the lobby forms package and watch out there is a couple of them so you want to make sure that you have the the form specific one and we're going to say add package and we're going to install them on all our projects because if you're going to use a plugin like this it's going to have a definition an interface on the shared library which is this one and then it's going to have renderers for the platform specific one which knows how to render the laudi animations in this case on that specific platform so also on android and ios click ok it's going to install for a little while we even get this little readme that will help us getting started i will show you that here in this video so we don't need that and whenever it's done it will open the readme for all the platforms but whenever that's done we can just go back to our page and we can start to add the animation here so if you have used previous versions or for some reason you have to use a older version or maybe you're finding this for an older project that you have or a problem that you might have um in in older xamarin forms projects you might have to use like these uh little init lines here so if you are using an older version of the lodi library you might want to do the animation view because that's the view that we are using to show a lot of animations actually lodi.forms that animation view and it will have a init call right here this new version doesn't need that anymore but if you have an older version then you might need this so that's something to be aware of lucky for us this new version doesn't need that although since we're on android while preparing this sample application on android i noticed that the animation was not showing and i don't know if this is a bug in the library or something else but for android you want to add a specific other nuget package which is the com airbnb android lottery which is probably the android specific renderers it doesn't install this by default i don't know why so you have to install this one onto your android project manually so if you have the problem that on only android your animations are not showing this might be a cause for that also the latest version only supports android 10 and up so if you want to support anything lower than that you will have to change to a older version probably you should check out the repository page to see what it supports probably we're just going to add this package right now wait a little bit for that to load the readme on how to use that we don't need it and we can go back to our shared example page right here so here are to do let's remove that and we're just going to type lottie this is a namespace that we're going to add with intellisense a little bit that's a shorthand for the namespace that we're going to use and then we're going to do animation view let's keep it like that so that intellisense will kick in to help us with the rest of the stuff here let's go over this little light bulb and it will add this xml namespace lottieforms here on the top for us so here you can see xmlnamespace lottie and it will know where to find this specific control and now it will know this this lottie prefix as well and we can start doing the rest so i'm going to give this a name so we can use this for the play and the pause buttons that we see so let's just name this lottie and of course we are going to use an animation so i've already downloaded a json file from the lottie files because i'm not a great animator myself i have to admit so i've already downloaded a little json file and i've added it to my ios project right here work.json and also to my android project and for the android project you want to add it into the assets folder so here it is and make sure that the build actions are okay so for work.json the build action needs to be the android asset on visual studio for windows you need to go into the properties and you can see that build action as well and set it through there i think for ios you need to set it to the build action and bundle resource that's the one that you need for ios unfortunately i don't think there is a way to load the animations from your shared project right here since the animation is probably going to be the same it would make sense to load it from your embedded resources on the shared project but i haven't been able to find a way to do that so that might be something a new feature that needs to be added to the library i don't know but at this time the time of recording at least it's it's not possible to do that so what you want to do is probably just name them the same make sure the build actions are okay and then you can just say okay i want to use the animation which is work.json and it will pick it up automatically per platform so you don't need to do anything special there so the other things that we can do i mean there's a lot of properties we're not going to go through all of them but the most important ones are probably auto play so whenever it's shown it will start playing automatically and you can also say okay does it need to loop yes or no so then the animation will just keep looping i think most of these animations will have support for you know a looping view so it doesn't really have a cutoff that you can notice visually but it will just loop through the animation of course you don't have to do that if if it's an animation that you just want to show once you can do that as well i'm going to give it a with request whoops loop is true a with request and a height request this is very because the animations are json so they scale infinitely basically like svgs like vectors so you want to give this a width and a height or place this in a stack layout that fills and expands so it just takes up all the room that is left but you want to make sure if if you're not seeing the animation it doesn't have like a default width and height so if you can't see it in your layout make sure to give it a width and height and play with those properties a little bit for it to to show up maybe i'm going to make this 300 and the height 2. this is a square one so it will figure that out and i'm going to set the vertical options just to be sure that it shows up okay and the horizontal ones same too okay so here we go we've implemented our little animation let's run this on ios and see if it shows up in our simulator on the right it should there we go here we see a little floating person that is typing on his laptop and you can see these bubbles going around you can see this person moving a little bit so that's pretty cool this is this is showing it so the things we didn't do yet is animate is implement the play and pause button right here so let's go back stop this for a little bit and go into this play handler so what you can do manually if that's what you need we can reference this to lottie because i set the name thing earlier and you can say okay i want this to play or in the pause handler okay i want this to pause so there's a lot of other stuff that you can use in here if we focus on the events only so you have some events that actually fire whenever the animation is finished or paused or played or it has some progress so you know a lot of animations might be used whenever you do a certain action and you maybe want to only show it once or have it animate only whenever the user clicks something or does something that's all things that you can do with these events and methods that are implemented so it's pretty complete pretty powerful now that we've implemented this play and pause button let's switch to our android emulator and see that it works there as well and here we go also on android you can see it show up nicely so and now whenever i click the pause button you can see that it stops moving so it pauses just like we expected and whenever we do play again it starts playing again see so it starts working again so that's pretty cool that is how easy it is to implement lottie animations into your xamarin forms applications there you go no more excuse why your app isn't looking fantastic with a lot of animations you can find all the sample code in my repository where this sample is please don't forget to like subscribe let me know if there's any other subjects that you want me to talk about and until next time

Channel: Gerald Versluis

Views: 4,909

Keywords: xamarin.forms, xamarin forms, xamarin forms tutorial, xamarin.forms 101, Lottie, Lottie animations, Xamarin, Android, iOS, Software Development, Cross-platform, lottie tutorial, lottie animation, android animation tutorial, lottie tutorial ios, xamarin 101, xamarin ui, xamarin forms ui, xamarin forms animation, xamarin forms ui design, how to use lottie animation, AnimationView, xamarin, ios, how to use lottie, android lottie animation, lottie ios, lottie android, XAML, visual studio

Id: wyjKiT5Td-c

Length: 12min 19sec (739 seconds)

Published: Mon Aug 31 2020