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.
- 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.
The first step is to right-click on your Solution. Then go to Manage NuGet Packages for Solution.
On the browse tab, type FFImageLoading. Look for FFImageLoading Forms, SVG Forms, and Transformations. Then install on each project in your solution.
Call CachedImageRenderer.Init() on each platform. Let’s put it on MainActivity.cs of our Android project and AppDelegate.cs of iOS.
Include your image in these folders. FFImageLoadingDemo.Android -> Resources -> Drawable and FFImageLoadingDemo.iOS -> Resources
Add the xmlns namespace of FFImageLoading library.
Start adding the FFImageLoading Views on your XAML file by using CachedImage keywords.
Here are 5 sample properties of FFImageLoading.
- Rounded transformation: Turn an image’s shape into rounded
- Blurred transformation: Blurred effect on image
- Grayscale transformation: Turn an image’s color into black and white
- LoadingPlaceholder: Show this image while waiting for the right image to finish downloading
- RetryCount: Number of attempts to download and render an image
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.