Jonathan Peppers

Xamarin, C# nerd, at Microsoft

glidex.forms - Fast Images for Xamarin.Forms on Android

If you missed my last post about Xamarin.Forms performance on Android, make sure to check that out here

From my experience making image-heavy Xamarin.Forms apps in the past, Android was a huge pain-point. Android.Graphics.Bitmap is somewhat of a troublemaker, and to make matters worse, Xamarin.Forms API design makes it tough to handle them properly. The Xamarin.Forms team will improve this as time goes on, I'm sure, but it would require breaking public API changes--so it's not easy.

So how to fix it?

Google has some complex documentation on handling Android.Graphics.Bitmap here. At the top, they are recommending to use a Java library named Glide to simplify working with images in your Android apps.

Looking at Glide's documentation, look at how beautifully you can load image, crop it as a circle, and include a loading indicator during the download:

Glide also covers loading the different types of images that Xamarin.Forms supports, such as:

  • Web Urls
  • Files on disk
  • Android resources (drawables)
  • Byte array (for miscellaneous ways)

So how to use Glide in Xamarin.Forms?

First I wrote a quick binding project for Glide, where I only bound the important Glide APIs. There were quite a bit of fixups needed to bind every possible public API of Glide, but I didn't care to do that. I decided to make glidex its own self-contained NuGet, because it seemed like it would also be useful for "classic" Xamarin.Android apps.

For the Xamarin.Forms implementation, I knew I would have to just throw IImageSourceHandler out the window and not use it. I also knew I would have to make two of my own custom renderers for Image and ImageCell. I started with the source for the "fast" image renderer from Xamarin.Forms as a starting point. It didn't take too much code to get things working, and it seemed to work rather well!

For comparison, here is a table of peak memory used via the different sample pages I've written:

Page Loaded by Peak Memory Usage
GridPage Xamarin.Forms 268,387,112
GridPage glidex.forms 16,484,584
ViewCellPage Xamarin.Forms 94,412,136
ViewCellPage glidex.forms 12,698,112
ImageCellPage Xamarin.Forms 24,413,600
ImageCellPage glidex.forms 9,977,272
HugeImagePage Xamarin.Forms 267,309,792
HugeImagePage glidex.forms 9,943,184

NOTE: I believe these numbers are in bytes. I restarted the app (release mode) before recording the numbers for each page. Pages with ListViews I scrolled up and down a few times.

To be fair, I did manufacture these samples to explicitly show problems with images in Xamarin.Forms on Android. The goal was to show how using Glide could completely mitigate the issues.

So try it out now!

I just released the 1.0.0 version of glidex.forms on NuGet, take it for a spin!

All you need in your app is the glidex.forms NuGet package, and add the following one-line to your existing apps:

As always, file issues and send me PRs on Github!

comments powered by Disqus