How to efficiently display bitmaps on Android App

To create visually appealing apps, displaying images is a must. Learn to efficiently display bitmaps in your Android apps without sacrificing performance.

The pain of displaying images on Android

When working on developing visually appealing apps, displaying images is a must. The problem is, the Android OS doesn’t handle image decoding very well, forcing developers to be careful with certain tasks to avoid messing up performance.

Google has written a complete guide on displaying bitmaps efficiently, which we can follow to understand and solve the main shortcomings of the Android operating system when displaying bitmaps.

[[190609]]

Android app performance killer

Following Google’s guidelines, we can list some of the main issues we encounter when displaying images on Android apps.

Reduce the image sampling rate

Android always decodes and displays images at full size, regardless of the viewport size. Because of this, it's easy to get an outOfMemoryError on your device if you try to load a large image.

To avoid this, as Google says, we should decode the image using BitmapFactory , setting a value for the inSampleSize parameter. The image size is divided by inSampleSize, reducing memory usage.

 public static Bitmap decodeSampledBitmapFromResource (Resources res, int resId, int reqWidth, int reqHeight) {

    // First decode with inJustDecodeBounds=true to check dimensions
    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true ;
    BitmapFactory.decodeResource(res, resId, options);

    // Calculate inSampleSize
    options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

    // Decode bitmap with inSampleSize set
    options.inJustDecodeBounds = false ;
    return BitmapFactory.decodeResource(res, resId, options);
}

You can set inSampleSize manually, or calculate it using the display's dimensions.

 public static int calculateInSampleSize (BitmapFactory.Options options, int reqWidth, int reqHeight) {
    // Raw height and width of image
    final int height = options.outHeight;
    final int width = options.outWidth;
    int inSampleSize = 1 ;

    if (height > reqHeight || width > reqWidth) {

        final int halfHeight = height / 2 ;
        final int halfWidth = width / 2 ;

        // Calculate the largest inSampleSize value that is a power of 2 and keeps both
        // height and width larger than the requested height and width.
        while ((halfHeight / inSampleSize) >= reqHeight
                && (halfWidth / inSampleSize) >= reqWidth) {
            inSampleSize *= 2 ;
        }
    }

    return inSampleSize;
}

Asynchronous decoding

Even when using BitmapFactory, image decoding is done on the UI thread. This can freeze the app and cause ANR ("Application Not Responding") alerts.

This is easy to fix, you just need to move the decoding process onto a worker thread. One way to do this is to use an asynchronous task, as explained in the Google guide:

 class BitmapWorkerTask extends AsyncTask < Integer , Void , Bitmap > {
    private final WeakReference<ImageView> imageViewReference;
    private int data = 0 ;

    public BitmapWorkerTask (ImageView imageView) {
        // Use a WeakReference to ensure the ImageView can be garbage collected
        imageViewReference = new WeakReference<ImageView>(imageView);
    }

    // Decode image in background.
    @Override
    protected Bitmap doInBackground (Integer... params) {
        data = params[ 0 ];
        return decodeSampledBitmapFromResource(getResources(), data, 100 , 100 ));
    }

    // Once complete, see if ImageView is still around and set bitmap.
    @Override
    protected void onPostExecute (Bitmap bitmap) {
        if (imageViewReference != null && bitmap != null ) {
            final ImageView imageView = imageViewReference.get();
            if (imageView != null ) {
                imageView.setImageBitmap(bitmap);
            }
        }
    }
}

Image Cache

By default, the Android OS repeats the entire rendering process every time an image is decoded and placed in a view, wasting precious device memory. This can be particularly annoying if you plan to display the same image in different places or reload it multiple times due to app lifecycle or behavior.

To avoid using too much memory, it is recommended to use both memory and disk caches. Next, we will see the main differences between these caches and why it is useful to use both. The code is too complex to show here, so please refer to the Bitmap Caching section of the Google guide to learn how to implement memory and disk caches.

• Memory Cache: Images are stored in the device memory. Memory access is fast. In fact, much faster than the image decoding process, so storing images here is a good idea to make your app faster and more stable. The only downside of the memory cache is that it only survives the life of the app, which means that once the app is closed or killed (fully or partially) by the Android OS memory manager, all images stored there will be lost. Remember that the memory cache must be set with a maximum amount of available memory. Otherwise it may cause the infamous outOfMemoryError.
• Disk cache: Images are stored on the device's physical storage (disk). The disk cache can survive app launches, safely storing images as long as there is enough space. The downside is that disk read and write operations can be slow and will always be slower than accessing the memory cache. For this reason, all disk operations must be performed in a worker thread, outside the UI thread. Otherwise, the app will freeze and cause ANR alerts.

Each cache has its strengths and weaknesses, so the best approach is to use both and read from whichever is available first, starting with the memory cache.

***Thoughts and EpicBitmapRenderer

I don’t know if you’ve noticed, but as I mentioned at the beginning of this article, displaying images on an Android app is a real pain. It’s not as easy as it seems.

To avoid repeating these tasks in every project, I developed a 100% free and open source Android library, EpicBitmapRenderer . You can pick it up at the EpicBitmapRenderer GitHub repo, or learn more at the EpicBitmapRenderer website.

EpicBitmapRenderer is easy to use and automates all these annoying tasks in every image decoding operation so that you can focus on app development.

You just need to add EpicBitmapRenderer dependency to your Gradle (to see alternatives for other build tools, see the Importing Libraries section of the EpicBitmapRenderer documentation).

 compile 'com.isaacrf.epicbitmaprenderer:epicbitmaprenderer:1.0'

Decoding an image in EpicBitmapRenderer is easy: just call the required decoding method and manage the result. Take a look at the following example, where we get an image from a URL and display it on an ImageVIew.

 //Sample 3: Decode Bitmap from URL (Async)
EpicBitmapRenderer.decodeBitmapFromUrl(
        "http://isaacrf.com/wp-content/themes/Workality-Lite-child/images/IsaacRF.png" , 
        200 , 200 ,
        new OnBitmapRendered() {
            @Override
            public void onBitmapRendered (Bitmap bitmap) {
                //Display rendered Bitmap when ready
                ImageView imgView = findViewById(R.id.imgSampleDecodeUrl);
                imgView.setImageBitmap(bitmap);
            }
        },
        new OnBitmapRenderFailed() {
            @Override
            public void onBitmapRenderFailed (Exception e) {
                //Take actions if Bitmap fails to render
                Toast.makeText( MainActivity.this , 
                          "Failed to load Bitmap from URL" , 
                          Toast.LENGTH_SHORT).show();
            }
        });

license

This article and any associated source code and files are licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License.

Translation link: http://www.codeceo.com/article/android-app-display-bitmaps.html
Displaying Bitmaps Efficiently on Android Apps