GlideX For Fast Images on Android

Jonathan Peppers

Getting good image performance on Android has traditionally been a difficult task. Google has some documentation on the subject, which unfortunately mentions some complex topics:

• Cache and recycle bitmaps in memory
• Java classes named LruCache and MutableSet<SoftReference<Bitmap>>?
• Specific cases for older Android versions

This is not the type of problem developers want to be focusing on–they just want to build their app!

To explain the problem further, let’s imagine a Xamarin.Forms page with lots of images (MainPage.xaml.cs):

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var uri = new Uri("https://pbs.twimg.com/media/DZ_B8cEU8AASnUI.jpg");
        for (var i = 0; i < 100; i++)
        {
            MainGrid.RowDefinitions.Add(new RowDefinition { Height = 100 });

            for (var j = 0; j < 4; j++)
            {
                var image = new Image
                {
                    Source = ImageSource.FromUri(uri)
                };
                Grid.SetRow(image, i);
                Grid.SetColumn(image, j);
                MainGrid.Children.Add(image);
            }
        }
    }
}

With the following MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloGlide.MainPage">
    <ScrollView Padding="0">
        <Grid x:Name="MainGrid" ColumnSpacing="0" RowSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
        </Grid>
    </ScrollView>
</ContentPage>

Note, you would not really want to implement a screen like this in a Xamarin.Forms application. ListView or CollectionView are much better options!

This example code presents 400 images of a strange man in a ScrollView (non-virtualized):

Especially in an emulator, the performance while scrolling this ScrollView is not the best. The Xamarin.Forms team has done a great job improving the performance of a page like this in recent releases–but is there a way to do better?

Glide: an image library for Android focused on smooth scrolling

Google’s response to this complexity problem is to use a Java library named Glide:

Note: For most cases, we recommend that you use the Glide library to
fetch, decode, and display bitmaps in your app. Glide abstracts out
most of the complexity in handling these and other tasks related to
working with bitmaps and other images on Android. For information
about using and downloading Glide, visit the Glide repository on
GitHub: https://github.com/bumptech/glide

Glide has a nice, fluent API for loading bitmaps in Java:

GlideApp
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

Glide handles a lot of details for you:

• Downloads images from URLs
• Handles device rotation
• Handles in-memory and on-disk caching
• Can crop, place a loading indicator, etc.

So if Glide is written in Java, how do we use it in Xamarin.Forms?

To unlock the power of Glide, I created “GlideX”: a simple library to swap-in Glide’s image loading implementation in-place of what Xamarin.Forms ships in the box. This began as an experiment, but perhaps one day could be the default for Xamarin.Forms?

How do I use GlideX in my Xamarin.Forms app?

This part is pretty easy:

• Add the glidex.forms NuGet package to the Android project in your solution.
• Add one line of code to initialize GlideX.

In your MainActivity.cs:

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(savedInstanceState);
        Xamarin.Forms.Forms.Init(this, savedInstanceState);
        // Add this line, that's it!
        Android.Glide.Forms.Init();
        LoadApplication(new App());
    }
}

And behold! smooth scrolling!

For a complete example, see my HelloGlide sample on Github.

Future plans

Try out GlideX today, and let us know how it works in your apps!

• File any issues you find using GlideX on Github.
• Track our progress on using Glide in Xamarin.Forms here.

For a complete demo, check our episode about GlideX on the Xamarin Show:

Jonathan Peppers Principal Software Engineer, .NET Android

Follow