FFImageLoading + Lottie = 😍

lottieandffimageloader


February is the Xamarin Month and I was designated to post on the 10th, so here I am! I would also like to thank Luis Matos for putting up this event together. This year’s theme is Love and Friendship with this in mind, I’m sharing the story of what drove me to write this custom control.

Last year while going through FFImageLoarder Github issue list, I noticed some people asking for a way to indicate exception and loading states, I thought that was a cool idea, just a few weeks before I had the same issue on a project that I was working. So I decided to share what I did, but with a little twist which is the awesome animations library Lottie as the Github issue mentions.

I extended CachedImage class from FFImageLoader lib, that way I could create two bindable properties Called IsLoading and IsFailed. I overrode the method OnPropertyChanging, to know when the source (image url/image path) changes. This way we are able to hook events to CachedImage’s Error, Success and DownloadStarted handlers, with control over this 3 events, we can set the IsLoading and IsFaulted values accordingly. You can find the entire source code for this custom control over here.

Okay but, when does Lottie come into play? Well, we will use the properties of our ImageView to show and hide the Lottie animations! Pay close attention on the binding of Lottie’s AnimationView IsVisible property . On line 15, we are referencing the binding source to the IsLoading property of our custom control called ImageView, this one will be our loading indicator. The same goes to the second AnimationView IsVisible property, which is pointing to ImageView’s IsFailed. Yay XAML =P

<custom:cachedimagecustomcontrol x:name="ImageView"
downsampletoviewsize="true"
isopaque="true"
cacheduration="0"
fadeanimationforcachedimages="true"
fadeanimationenabled="true"
loadingplaceholder="clear_background.png"
errorplaceholder="clear_background.png"
source="{Binding SelectedMonkey.Image}">
<forms:animationview animation="loading.json"
loop="true"
autoplay="true"
verticaloptions="FillAndExpand"
horizontaloptions="FillAndExpand"
isvisible="{Binding Source={x:Reference ImageView}, Path=IsLoading}">
<forms:animationview animation="error.json"
loop="false"
autoplay="true"
verticaloptions="FillAndExpand"
horizontaloptions="FillAndExpand"
isvisible="{Binding Source={x:Reference ImageView}, Path=IsFailed}">

Since I made no changes or extensions to Lottie, I won’t bother explaining how to set it up in you project, since the awesome MVP Charlin Agramonte already did that here.

As usual you can find a sample using this custom control in my github.

CAUSER TIP: 

Check out this Lottie Files site if you want a bunch of free animations to use in your project.

throw new CauserException();

References

One thought on “FFImageLoading + Lottie = 😍

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s