Xamarin Forms essential: FFImageLoading, manage your images


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

0 commentaires:

Xamarin Forms + Parse + Push Notifications + Android = trouble

2 Comments


Quick Introduction

It took me some times to implement Parse's push notifications in my Xamarin Forms (Android) application. I find out some issues and made workarounds. Strangely, I have the impression that I'm a rare guy working with Xamarin Forms and Parse... But maybe you are in the same situation that I was. So just read the following.

The context

I'm actually making a (cool) Xamarin Forms app (maybe I will talk about it later in another post). One of my final steps is to implement Push notifications. Details of the context of my project are the following:

- Xamarin Forms (Android & iOS) app
- I use Parse server for my business server. Actually I host my Parse server at https://parse.buddy.com for convenient reasons but I could host it on many other servers.
- So logically, for the push notifications, I would like to use Parse push notification service.
- In order to use Parse Services, I use Parse .NET SDK (latest available version is v.1.7.0.0) - note that it's important for the next part ;)

The problem (Parse .NET SDK)


I encountered many problems but specially 2 annoying ones with Parse. 
The first one is that there is no Parse PCL library to use with Xamarin Forms... I talked about it in this post: Parse for Xamarin - no PCL, my solution.
But my main problem was with push notifications (specially with Android). It was not working and I couldn't find any solution on the web ?! (maybe I'm not efficient enough with Google :p) It took me several days to find a working solution...

Almost my troubles where located in the Parse .NET SDK ! 

What are the issues ?!

1- Setup PN for android apps

First thing to do is to configure your Android Application. I'm sure you have found many articles on it. But the key points to care of are:
  • Use FCM (Firebase Cloud Messaging) instead of GCM (former Google Cloud Messaging) because it is deprecated.
  • Then make a big attention to your androidManifest.xml file. Some sections are mandatory in order to make PN works...
You can find a good article on it here. Take your time and follow the guide step by step: https://buddy.com/parse/push-configuration/

For the "AndroidManifest.xml" file, take a look at mine with needed sections and permissions:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto" package="com.yourapp.android" android:versionName="1" android:versionCode="1">
  <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="25" />  
  <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  <uses-permission android:name="android.permission.VIBRATE" />  
  <permission android:protectionLevel="signature" android:name="com.yourapp.android.permission.C2D_MESSAGE" />
  <uses-permission android:name="com.goodchapp.android.permission.C2D_MESSAGE" />
  
  <application android:label="My app" android:icon="@drawable/icon">    
    <meta-data android:name="com.parse.push.notification_icon" android:resource="@drawable/icon" />
    <meta-data android:name="com.parse.push.gcm_sender_id" android:value="@string/gcm_sender_id" />  
    <provider android:name="android.support.v4.content.FileProvider" android:authorities="com.yourapp.android.fileprovider" android:exported="false" android:grantUriPermissions="true">
      <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
    </provider>    
    <service android:name="parse.ParsePushService" />
    <receiver android:name="parse.ParsePushBroadcastReceiver" android:permission="com.google.android.c2dm.permission.SEND">
      <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
        <category android:name="com.yourapp.android" />
      </intent-filter>
    </receiver>    
  </application>
</manifest>

Don't forget to replace "com.yourapp.android" by your own app's package name. And I put my GCM_SENDER_ID into the "strings.xml" file.
GCM_SENDER_ID must be prefixed by "id:", (ie: "id:XXXXXXX")

2- Parse .NET SDK, issue 1: latest release does not contain fixes

Yes you read it correctly. As everybody should have done, I used the latest Parse SDK release that can be found here on github:
https://github.com/parse-community/Parse-SDK-dotNET/releases

"Missing SenderID issue": After investigations, I found that there was an interesting bug specifically on push notifications... but I also noticed that this bug was already corrected...

ref: https://github.com/parse-community/Parse-SDK-dotNET/issues/194



As you can see, the fix has been made on March 2016. The latest SDK release is from January 2016... So the latest release doesn't contain bug fixes !


3- Issue 2: GET_ACCOUNTS permissions uneeded

There is also a second issue that has not been merged into the latest release. It concerns a permissions in the "AndroidManifest.xml" file that you must not set !

This is the "Get_ACCOUNTS" permission. Be sure to remove it from your manifest in order to get Parse PN working EVEN IF A DEBUG MESSAGE TELLS you that this permission is needed...

ref: https://github.com/parse-community/Parse-SDK-dotNET/pull/223



It took me too much time to understand that :p ! And the last problem will make you understand why !

4- Issue 3: Invalid debug messages in the SDK :'(

Finally, as I told you, I found invalid debug messages in the SDK source code. So that's why I didn't understand quickly what was happening.

In particular in this file:
https://github.com/parse-community/Parse-SDK-dotNET/blob/5fc0a7ef101708e0402ad394ae4ba4f829a700a8/ParsePush/Internal/Android/ManifestInfo.cs

Take a look at the picture bellow. I thought I was dealing with a specific problem but in fact it was another :'0




Finally what did I do ?

As I have no more time, I did what nobody should do when publishing a "production" application :p
- I took the latest release source code
- Then I corrected by myself the mentionned issues (using the work already done by Richard Ross on github).

- Finally I recompiled a release version for Android only. If you are interested, you can download the recompiled Parse.Android.dll file below. I gave it the version number 1.7.0.1.

Parse.Android.dll (v.1.7.0.1 with Push notification fixes)

(enjoy)


2 commentaires: