Android ViewPager using SubsamplingScaleImageView results in blank screen for sometime when sliding images

Question

I have made a ViewPager using davemorrissey's SubsamplingScaleImageView

When sliding the ViewPager, the next slide appears to be blank for some seconds before the image loads.

Has anyone faced same type of issue ? Any pointers for possible fixes ?

viewPager = (ViewPager) findViewById(R.id.pager);
magePagerAdapter adapter = new ImagePagerAdapter();       
viewPager.setAdapter(adapter);

ArrayList<String> imageFull = new ArrayList<String>();
for(int i=0;i<10;i++){
String image = "mnt/sdcard/imageDemo"+i+".jpg";
imageFull.add(image);
}


    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      Context context = ImageGallery.this;

      SubsamplingScaleImageView fullImage = new SubsamplingScaleImageView(ImageGallery.this);
      fullImage.setImage(ImageSource.uri(imageFull.get(position)));         

      return fullImage;
   }


   @Override
   public void destroyItem(ViewGroup container, int position, Object object) {
      ((ViewPager) container).removeView((SubsamplingScaleImageView) object);

   }

That is a SubsamplingScaleImageView function to set Image from SD card as background in a SubsamplingScaleImageView. Details here - https://github.com/davemorrissey/subsampling-scale-image-view — Gissipi_453, Nov 28 '15 at 06:45
imageFull is actually an Arraylist of type String. I'm editing the question. — Gissipi_453, Nov 28 '15 at 08:23
No problem. Thanks for your precious time. I'm trying to understand and apply your answer to my program. — Gissipi_453, Nov 28 '15 at 08:28

daemmie · Answer 1 · 2015-11-26T13:14:36.977

Your Screen is black cause the image is not decoded yet.

You can use:

public final void setImage(ImageSource imageSource, ImageSource previewSource)

and use a thumbnail as preview. The preview is shown until the decoding of the image is finished.

Note that:

the Preview image cannot be used unless dimensions are provided for the main image.

No tested but something like:

Uri uri = imageFull.get(position);
Bitmap preview = MediaStore.Images.Thumbnails.getThumbnail(
                             getContentResolver(), uri,
                             MediaStore.Images.Thumbnails.MINI_KIND,
                             null);

ImageSource src = ImageSource.uri(uri);
src .dimensions(w, h); // if you don't know the size, you can just decode the bounds of your image which is quite fast

fullImage.setImage(src , ImageSource.bitmap(preview));

If generation of the Thumbnail is to slow for you, feel free to do that in an AsyncTask.

Can you elaborate a little bit ? How to use it with the ViewPager code ? — Gissipi_453, Nov 26 '15 at 13:01

score 1 · Accepted Answer · edited May 23 '17 at 11:44

I was able to workaround it with this patch. I also wrote a similar answer in the visibility problem issue

initialiseBaseLayer is called the first onDraw of the view, that's why it doesn't load until the page is partially visible.

The issue is that initializing outside onDraw you lose access to the canvas, which is used to calculate the max bitmap dimensions:

private Point getMaxBitmapDimensions(Canvas canvas) {
    if (VERSION.SDK_INT >= 14) {
        try {
            int maxWidth = (Integer)Canvas.class.getMethod("getMaximumBitmapWidth").invoke(canvas);
            int maxHeight = (Integer)Canvas.class.getMethod("getMaximumBitmapHeight").invoke(canvas);
            return new Point(maxWidth, maxHeight);
        } catch (Exception e) {
            // Return default
        }
    }
    return new Point(2048, 2048);
}

So, you will have to provide the max dimensions on your own. I'm using this function. I store the value during the onCreate of the activity and later the ViewPager get that value.

Before setting the image call fullImage.setMaxDimensions(x, y) and that's it.

It works fine (in my case) for a ViewPager, but it doesn't on a RecyclerView, so use it with care.

Android ViewPager using SubsamplingScaleImageView results in blank screen for sometime when sliding images

2 Answers2