XamarinForms 101: How to use FFImageLoading

Are you looking for tutorials on how to create simple image transformations in your Xamarin Forms?

Do you want to see a short sample of FFImageLoading implementation?

In this post, you will learn the steps of how to use FFImageLoading.

 

Let’s see first what FFImageLoading Nuget packages can do for you.

Check out this awesome features of FFImageLoading:

  • Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac and Windows (WinRT, UWP) support
  • Configurable disk and memory caching
  • Multiple image views using the same image source (URL, path, resource) will use only one bitmap which is cached in memory (less memory usage)
  • Deduplication of similar download/load requests. *(If 100 similar requests arrive at same time then one real loading will be performed while 99 others will wait).*
  • Error and loading placeholders support
  • Images can be automatically downsampled to specified size (less memory usage)
  • Fluent API which is inspired by Picasso naming
  • SVG / WebP / GIF support
  • Image loading Fade-In animations support
  • Can retry image downloads (RetryCount, RetryDelay)
  • Android bitmap optimization. Saves 50% of memory by trying not to use transparency channel when possible.

Transformations support

  • BlurredTransformation
  • CircleTransformation, RoundedTransformation, CornersTransformation, CropTransformation
  • ColorSpaceTransformation, GrayscaleTransformation, SepiaTransformation, TintTransformation
  • FlipTransformation, RotateTransformation
  • Supports custom transformations (native platform `ITransformation` implementations)

Amazing right? Now here are the steps on how to get started with your FFImageLoading.

Step 1

The first step is to right-click on your Solution. Then go to Manage NuGet Packages for Solution.

 

Step 2

On the browse tab, type FFImageLoading. Look for FFImageLoading Forms, SVG Forms, and Transformations. Then install on each project in your solution.

 

Step 3

Call CachedImageRenderer.Init() on each platform. Let’s put it on MainActivity.cs of our Android project and AppDelegate.cs of iOS.

MainActivity.cs of Android project

 

AppDelegate.cs of iOS project

 

Step 4

Include your image in these folders. FFImageLoadingDemo.Android -> Resources -> Drawable and FFImageLoadingDemo.iOS -> Resources

 

Step 5

Add the xmlns namespace of FFImageLoading library.

 

Step 6

Start adding the FFImageLoading Views on your XAML file by using CachedImage keywords.

Here are 5 sample properties of FFImageLoading.

  1. Rounded transformation: Turn an image’s shape into rounded
  2. Blurred transformation: Blurred effect on image
  3. Grayscale transformation: Turn an image’s color into black and white
  4. LoadingPlaceholder: Show this image while waiting for the right image to finish downloading
  5. RetryCount: Number of attempts to download and render an image

 

Step 7

And here is the demo of this FFImageLoading sample app that we just created in a few minutes.

 

All-in-all, FFImageLoading is an image-effect library that is easy to use and has a lot of features that you can apply in your Xamarin application.

GitHub: https://github.com/webmasterdevlin/FFImageLoading-Sample-Demo

4 Comments

  • Pedro Gonzalez

    Hi and nice article, question: how can i add gif image? Cant work for me, thx

    • Devlin

      I haven’t tried that. But I’ll try to check it out if I’ll have the same issue. It could be some version incompatibility.

  • Dilip

    Am getting CachedImageRenderer does not exist in the current contest error.Can any one help me how to resolve this issue?

    • Devlin

      Are you using the latest Visual Studio 2017 version? If yes, try to restart your Visual Studio 2017, make sure you’ve installed the right NuGet packages. If the problem still persists, it could be an incompatibility between the latest version of the IDE and the NuGet package.

Post A Comment