Xamarin Forms essential: FFImageLoading, manage your images

By

Discover 'FFLoadingImage' library

Today I want to make a quick presentation of a really good library for Xamarin Forms. This is the kind of library we would like to see more often on XF... This one is dedicated to image manipulation. It's called "FFImageLoading".

If I take time to make this presentation, it's because I think that we should use it in almost all our "basic" Xamarin Forms applications. When I say basic, I exclude Games or other specific apps. But in my mind, I suggest you to change all your traditional "<Image />" by "<FF:CachedImage />" in your apps.

Before to start, where to find it ?
On Github: https://github.com/luberda-molinet/FFImageLoading
On Nuget: https://www.nuget.org/packages/Xamarin.FFImageLoading


Main features

So what will you find using this library ? I will not explain all the details but the main interesting features of the library.

Multi-platform

The good point is that this library supports multiple platforms:

  • - All the xamarin platforms: iOS, Android, MAC, and Xamarin Forms 
  • - But also Windows (WinRT & UWP)

So you can use the library either in your XAML code or in your code behind. It's really flexible, ideal for Xamarin Forms projects.

Image cache system

The main feature provided by the library is a picture cache system. This system is pretty complete and you are able to customize it if you want (XAML and code behind). You can set cache keys to your images, you can set a lifetime and so on...

Thanks to the cache you can greatly improve performances of long lists for instance (with images in their data items). 

Here is a XAML example on how to use the 'CachedImage' control:

<!-- contact image -->
<FFImg:CachedImage 
  Source="{Binding ProfilePictureUrl}"
  LoadingPlaceholder="ic_loader.jpg"
  ErrorPlaceholder="profilemale.jpg"
  HorizontalOptions="Center" 
  CacheType="Memory"
  Margin="30,20,30,5"
  Aspect="AspectFit"
  DownsampleWidth="130"                                            
  >
 <FFImg:CachedImage.Transformations>
  <FFTr:CircleTransformation BorderHexColor="#FFFFFFFF" BorderSize="0" />
 </FFImg:CachedImage.Transformations>
</FFImg:CachedImage>


'CachedImage' used in long list for better performances:


Image loading and PlaceHolders

Thanks to "FFImageLoading" you can load images from different sources (from XAML or code-behind):

  • - from stream sources
  • - from file image sources
  • - or from Uri sources

But the user-friendly point is that you can specify temporary images for the loading process and in case of error.
For instance if you load an image from the web, it can take some times, so the temporary picture will be displayed instead. 
And if an error occurs when loading the image, the "Error placeholder image" will be displayed automatically. From a user point of view, it's really cool and now it costs nothing ;)


Download properties

When you want to display a FFImageLoading image , you can specify several usefull parameters (XAML and code behind).

  • - we already talk about cache parameters like "CacheDuration" property
  • - you can also specify "retry" parameters in case of errors like "RetryCount" to tell how many times you want to retry or "RetryDelay" to wait before retrying loading the image.
  • - But you can also specify download properties like "DownSampleWidth" or "DownSampleHeight" to specify a new size for the downloaded image

SVG / Gif support

A good point to notice too, is that the library support the SVG and Gif formats. So instead of loading traditionnal pictures, you can load a SVG image for a loading placeholder for instance.

If you are a good designer and replace your icons and simple pictures by SVG files, it can make you save size on your final app's packages !

Transformations

FFImageLoading offers "transformation" capabilities. That means that you can apply effects on images before to display it. These effects are of 2 kinds:

  • - image rendering effects, to apply some effects on colors
  • - or image clipping effects to make the image looks rounded, circle or cropped...
  • - AND you can also implement your own effect thanks to the provided "ITransformation" interface !

Some effects / transformations:


Optimizations

All these features look optimized (without any complicated setup for you) and I didn't really have any issue by using it. I just noticed a better user navigation thanks to the quick loading of images. So if you want to learn more about this library, I suggest you to follow the following links:

The Wiki:
https://github.com/luberda-molinet/FFImageLoading/wiki

How to use it in details (tutorial in video):
https://www.youtube.com/watch?v=eVA9C7Ik_AM



Comments

Post a Comment

Popular posts from this blog

EMGU with Xamarin Forms guide [part 1]

By
Image
I- Introduction, OpenCV and EMGU Do you know OpenCV ( Open Source Computer Vision Library:  https://opencv.org/ ) ?  This open source library let's you work and play with images and videos with a lot of powerful image processing algorithms !  If you want some details, I suggest you to first navigate to the link above or search for 'OpenCV' on Google.  Examples of OpenCV processing found on the web (filters, object detection, edges...): EMGU is a .NET OpenCV wrapper. That means that you will be able to use OpenCV functionnalities in your .NET projects using C# for instance. EMGU is cross platform, so you will also be able to use it in your Xamarin projects ! That's great because there is no advanced image processing library in Xamarin. In this article, we will talk about EMGU and list the steps to setup a Xamarin Forms project using EMGU . It may help you because, we must say that it's not a trivial task...  II-What do I need to
Read more »

[Xamarin Forms] Custom bottom bordered entry (iOS & Android)

By
Image
Custom entry with renderers For my Xamarin Forms project I needed to render an 'Entry' control with a bottom border of a specific color. There are several possibilities but I will show you mine. For that, I used renderers. iOS one is particularly not trivial. The wished result look like that: iOS Renderer [assembly: ExportRenderer(typeof(ExtDatePicker), typeof(ExtDatePickerRenderer))] namespace MyCompany.iOS.Renderers { public class ExtDatePickerRenderer : DatePickerRenderer { protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e) { base.OnElementChanged(e); // Need to connect to Sizechanged event because first render time, Entry has no size (-1). if (e.NewElement != null) e.NewElement.SizeChanged += (obj, args) => { var xamEl = obj as DatePicker; if (xamEl == null) ret
Read more »

Set your browser on Fire with P5.js

By
Image
This post is made for those (like me) who like image processing , web development and maybe, for those who want to learn new programming technics ... - I will make you discover p5.js , a javascript library specialized in graphical creation for your web browser ! - I will also talk about the the Youtube channel "The Coding Train" presented by Daniel Shiffman. A lot of its videos are based on P5.js. It was for me a great source of inspiration and made me discover javascript (because I'm a newbie with JS...) So I'm pretty sure, you will learn a lot too... - Finally I will present you my personnal example of what I did with P5.js. It's about an old retro fire effect (used in demoscene few years ago) :) So let's begin with p5.js ! I- What is P5.js ? a- Presentation As I mentionned it previously, P5.js is a graphical Javascript library. With it, you will be able to make great effects in your web pages in a few minutes.  This lib
Read more »