Android how to create runtime thumbnail

Question

I have a large sized image. At runtime, I want to read the image from storage and scale it so that its weight and size gets reduced and I can use it as a thumbnail. When a user clicks on the thumbnail, I want to display the full-sized image.

Answer 1

Try this

Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(imagePath), THUMBSIZE, THUMBSIZE);

This Utility is available from API_LEVEl 8. [Source]

Answer 2

My Solution

byte[] imageData = null;

        try     
        {

            final int THUMBNAIL_SIZE = 64;

            FileInputStream fis = new FileInputStream(fileName);
            Bitmap imageBitmap = BitmapFactory.decodeStream(fis);

            imageBitmap = Bitmap.createScaledBitmap(imageBitmap, THUMBNAIL_SIZE, THUMBNAIL_SIZE, false);

            ByteArrayOutputStream baos = new ByteArrayOutputStream();  
            imageBitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos);
            imageData = baos.toByteArray();

        }
        catch(Exception ex) {

        }

Answer 3

The best solution I found is the following. Compared with the other solutions this one does not need to load the full image for creating a thumbnail, so it is more efficient! Its limit is that you can not have a thumbnail with exact width and height but the solution as near as possible.

File file = ...; // the image file

Options bitmapOptions = new Options();
bitmapOptions.inJustDecodeBounds = true; // obtain the size of the image, without loading it in memory
BitmapFactory.decodeFile(file.getAbsolutePath(), bitmapOptions);

// find the best scaling factor for the desired dimensions
int desiredWidth = 400;
int desiredHeight = 300;
float widthScale = (float)bitmapOptions.outWidth/desiredWidth;
float heightScale = (float)bitmapOptions.outHeight/desiredHeight;
float scale = Math.min(widthScale, heightScale);

int sampleSize = 1;
while (sampleSize < scale) {
    sampleSize *= 2;
}
bitmapOptions.inSampleSize = sampleSize; // this value must be a power of 2,
                                         // this is why you can not have an image scaled as you would like
bitmapOptions.inJustDecodeBounds = false; // now we want to load the image

// Let's load just the part of the image necessary for creating the thumbnail, not the whole image
Bitmap thumbnail = BitmapFactory.decodeFile(file.getAbsolutePath(), bitmapOptions);

// Save the thumbnail
File thumbnailFile = ...;
FileOutputStream fos = new FileOutputStream(thumbnailFile);
thumbnail.compress(Bitmap.CompressFormat.JPEG, 90, fos);
fos.flush();
fos.close();

// Use the thumbail on an ImageView or recycle it!
thumbnail.recycle();

Answer 4

Here is a more complete solution to scaling down a Bitmap to thumbnail size. It expands on the Bitmap.createScaledBitmap solution by maintaining the aspect ratio of the images and also padding them to the same width so that they look good in a ListView.

Also, it would be best to do this scaling once and store the resulting Bitmap as a blob in your Sqlite database. I have included a snippet on how to convert the Bitmap to a byte array for this purpose.

public static final int THUMBNAIL_HEIGHT = 48;
public static final int THUMBNAIL_WIDTH = 66;

imageBitmap = BitmapFactory.decodeByteArray(mImageData, 0, mImageData.length);
Float width  = new Float(imageBitmap.getWidth());
Float height = new Float(imageBitmap.getHeight());
Float ratio = width/height;
imageBitmap = Bitmap.createScaledBitmap(imageBitmap, (int)(THUMBNAIL_HEIGHT*ratio), THUMBNAIL_HEIGHT, false);

int padding = (THUMBNAIL_WIDTH - imageBitmap.getWidth())/2;
imageView.setPadding(padding, 0, padding, 0);
imageView.setImageBitmap(imageBitmap);



ByteArrayOutputStream baos = new ByteArrayOutputStream();  
imageBitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
byte[] byteArray = baos.toByteArray();

Answer 5

Use BitmapFactory.decodeFile(...) to get your Bitmap object and set it to an ImageView with ImageView.setImageBitmap().

On the ImageView set the layout dimensions to something small, eg:

android:layout_width="66dip" android:layout_height="48dip"

Add an onClickListener to the ImageView and launch a new activity, where you display the image in full size with

android:layout_width="wrap_content" android:layout_height="wrap_content"

or specify some larger size.

Answer 6

/**
 * Creates a centered bitmap of the desired size.
 *
 * @param source original bitmap source
 * @param width targeted width
 * @param height targeted height
 * @param options options used during thumbnail extraction
 */
public static Bitmap extractThumbnail(
        Bitmap source, int width, int height, int options) {
    if (source == null) {
        return null;
    }

    float scale;
    if (source.getWidth() < source.getHeight()) {
        scale = width / (float) source.getWidth();
    } else {
        scale = height / (float) source.getHeight();
    }
    Matrix matrix = new Matrix();
    matrix.setScale(scale, scale);
    Bitmap thumbnail = transform(matrix, source, width, height,
            OPTIONS_SCALE_UP | options);
    return thumbnail;
}

Answer 7

I found an easy way to do this

Bitmap thumbnail = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(mPath),200,200)

Syntax

Bitmap thumbnail = ThumbnailUtils.extractThumbnail(Bitmap source,int width,int height)

OR

use Picasso dependancy

compile 'com.squareup.picasso:picasso:2.5.2'

Picasso.with(context)
    .load("file:///android_asset/DvpvklR.png")
    .resize(50, 50)
    .into(imageView2);

Reference Picasso

Answer 8

If you want high quality result, so use [RapidDecoder][1] library. It is simple as follow:

import rapid.decoder.BitmapDecoder;
...
Bitmap bitmap = BitmapDecoder.from(getResources(), R.drawable.image)
                             .scale(width, height)
                             .useBuiltInDecoder(true)
                             .decode();

Don't forget to use builtin decoder if you want to scale down less than 50% and a HQ result.

Answer 9

This answer is based on the solution presented in https://developer.android.com/topic/performance/graphics/load-bitmap.html (without using of external libraries) with some changes by me to make its functionality better and more practical.

Some notes about this solution:

1. It is assumed that you want to keep the aspect ratio. In other words:

   finalWidth / finalHeight == sourceBitmap.getWidth() / sourceBitmap.getWidth() _{(Regardless of casting and rounding issues)}

2. It is assumed that you have two values (maxWidth & maxHeight) that you want any of the dimensions of your final bitmap doesn't exceed its corresponding value. In other words:

   finalWidth <= maxWidth && finalHeight <= maxHeight

   ^{So minRatio has been placed as the basis of calculations (See the implementation). UNLIKE the basic solution that has placed maxRatio as the basis of calculations in actual. Also, the calculation of inSampleSize has been so much better (more logic, brief and efficient).}

3. It is assumed that you want to (at least) one of the final dimensions has exactly the value of its corresponding maxValue _{(each one was possible, by considering the above assumptions)}. In other words:

   finalWidth == maxWidth || finalHeight == maxHeight

   The final additional step in compare to the basic solution (Bitmap.createScaledBitmap(...)) is for this "exactly" constraint. The very important note is you shouldn't take this step at first (like the accepted answer), because of its significant consumption of memory in case of huge images!

4. It is for decoding a file. You can change it like the basic solution to decode a resource (or everything that BitmapFactory supports).

The implementation:

public static Bitmap decodeSampledBitmap(String pathName, int maxWidth, int maxHeight) {
    // First decode with inJustDecodeBounds=true to check dimensions
    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(pathName, options);

    final float wRatio_inv = (float) options.outWidth / maxWidth,
          hRatio_inv = (float) options.outHeight / maxHeight; // Working with inverse ratios is more comfortable
    final int finalW, finalH, minRatio_inv /* = max{Ratio_inv} */;

    if (wRatio_inv > hRatio_inv) {
        minRatio_inv = (int) wRatio_inv;
        finalW = maxWidth;
        finalH = Math.round(options.outHeight / wRatio_inv);
    } else {
        minRatio_inv = (int) hRatio_inv;
        finalH = maxHeight;
        finalW = Math.round(options.outWidth / hRatio_inv);
    }

    options.inSampleSize = pow2Ceil(minRatio_inv); // pow2Ceil: A utility function that comes later
    options.inJustDecodeBounds = false; // Decode bitmap with inSampleSize set

    return Bitmap.createScaledBitmap(BitmapFactory.decodeFile(pathName, options),
          finalW, finalH, true);
}

/**
 * @return the largest power of 2 that is smaller than or equal to number. 
 * WARNING: return {0b1000000...000} for ZERO input.
 */
public static int pow2Ceil(int number) {
    return 1 << -(Integer.numberOfLeadingZeros(number) + 1); // is equivalent to:
    // return Integer.rotateRight(1, Integer.numberOfLeadingZeros(number) + 1);
}

---

Sample Usage, in case of you have an imageView with a determined value for layout_width (match_parent or a explicit value) and a indeterminate value for layout_height (wrap_content) and instead a determined value for maxHeight:

imageView.setImageBitmap(decodeSampledBitmap(filePath, 
        imageView.getWidth(), imageView.getMaxHeight()));