Once upon a time, we were developing another mobile app in Xamarin.Forms. As usual, we gathered requirements and our designer started to work on UI/UX. At that moment, I was under huge impression what Lottie can do so I asked him what he thinks about it. We both agreed that it’s great and we should use it. Unfortunately, we were doing MVP, so there was no money for it. When talking about Lottie, it’s really easy to implement it in Xamarin.Forms the problems is on the design side — you need to create an animation in eg. Adobe After Effects. This takes time & sometimes designers are not familiar with AE.
I started to think which loader to choose. I thought: “there is no way I will use Activity Indicator”.

No fucking way… This circle is making me sick. Blah.

I started to think what can be easily achieved. I came up with the following solution.

Let’s use app icon and rotate it!

UPDATE 2020

Somehow it happened that this is one of my most popular article. Because of that I’ve decided to put this loader in XamForms.Enhanced. It is availble from version 2.5.0

The app icon had a plain colour background with a small circle logo on it. I asked our designer to send me the logo with an alpha background. He did it & I started to work.
I created CustomLoader which inherits from Image. I knew that I have to have IsRunning property, so I added one. The logic behind it was very simple:

if(IsRunning)
{
    RotateElement();
}
else
{  
    StopRotation();
}

I also knew that the logic above should be put in OnPropertyChanged method. And that was all I knew. So I started to develop.
While I was implementing it, I noticed that we should also set RotationLenght & Easing, so I added two more bindable properties 🙂

Let’s discuss it for a second.

As said earlier we have 3 bindables. What is the most interesting is IsRunning which is responsible for rotating our image. Then we have RotationLenght & Easing – these two allow us to adjust the animation.

Then there is OnPropertyChanged method. If IsRunning is changed we are either starting or stopping animation. The cancellation is done by cancellationToken.Token. Additionally, I’ve added FadeIn/FadeOut methods so the image (dis)appears smoother.

At the end, we have a RotateElement method which simply rotates the element. Voilà! If you want to check the code, there is a link to Github repo at the end of this post. In the repo, there is a sample of usage.

Let’s see the results.

Android
iOS

 
I don’t know how long it took me to implement it. For sure less than creating a Lottie animation in AE. Being honest, I’m kinda happy with the result. What’s more important: the client was happy too. That’s what I like!
This article is neither something new nor rocket science. You’ve seen it by yourself that it’s a really simple code. As I was googling I didn’t find a similar blog post, so here it is. Hope you like it.

Code

The code is on my Github repository in here. Feel free to use it.

feature image taken from: https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif

[mc4wp_form id=”497″]

Leave a Reply

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