Android: Glide not showing large image from URL

Question

I'm trying to load a large hi-res (3225x4800) image from URL into glide for a newspaper company. The image I wanted to load is this High Res Image.

String url = "http://www.businessweekmindanao.com/content/wp-content/uploads/2015/10/fitness-and-wellness-poster-final.jpg";

Glide.with(getActivity()).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
        imageView.setImageBitmap(resource);
    }
});

I'm using Mike Ortiz' TouchImageView from the solution offered here: https://github.com/MikeOrtiz/TouchImageView/issues/135 when loading resource from url. But it seems to only work on small resolution image and it does not load high quality image.

There is an alternative solution I tried from stackoverflow: Android: not displayed ImageView with UIL and TouchImageView which tries to modify the onMeasure() method of Mike's library. It works with:

Glide.with(getActivity()).load(url)
                .into(imageViewPreview);

The problem is it loads the image in very low resolution.

Is there a way to load high resolution image like: 7480x3740 for instance using Glide and TouchImageView? How do I do that?

Please calculate how many bytes that would be in memory: 7480x3740x4 — greenapps, Nov 13 '16 at 09:22
Please post the url in such a way that we can click a link to see the picture. — greenapps, Nov 13 '16 at 09:24
@greenapps thank you for your comment. The link was in the string variable: http://www.businessweekmindanao.com/content/wp-content/uploads/2015/10/fitness-and-wellness-poster-final.jpg — OBL, Nov 13 '16 at 09:46
`The link was in the string variable:`. No. That was the url. Only now i can click. Thanks. But why do not you react on that calculation? — greenapps, Nov 13 '16 at 12:38

score 12 · Accepted Answer · edited Mar 04 '18 at 01:35

I have found a solution that worked for my requirement. The override() method does the trick. Setting higher numbers for the target resolution seems to be the final workaround, but the bigger the numbers, the longer the time it would take to display the image(s), so it would be wise to implement a preloader/progressbar.

Glide.with(getContext())
    .asBitMap() //[for new glide versions]
    .load(url)
    //.asBitmap()[for older glide versions]
    //.placeholder(R.drawable.default_placeholder)
    .override(1600, 1600) // Can be 2000, 2000
    .into(new BitmapImageViewTarget(imageViewPreview) {
        @Override
        public void onResourceReady(Bitmap  drawable, GlideAnimation anim) {
            super.onResourceReady(drawable, anim);
            progressBar.setVisibility(View.GONE);
        }
    });

Custom centered preloader/progressbar placeholder indicator on relativeLayout xml:

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />

This is neat because another issue related about loading image asBitmap() in Glide will not show placeholders for error and preloader/progress indicator:

Glide.with(getActivity())
    .load(url).asBitmap()
    .placeholder() //<== will simply not work:
    .error() // <== is also useless
    .into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
        imageView.setImageBitmap(resource);
    }
});

In my research, I have also tried a Picasso solution to handle high quality image:

Picasso.with(getContext())
                .load(url)
                .resize(1500, 0)
                .placeholder(R.drawable.default_placeholder)
                .error(R.drawable.download_error)
                .into(imageViewPreview);

In the end, I was happy with the Glide version.

I hope this will be helpful to anyone that might be facing the same challenge.

score 4 · Answer 2 · answered Jul 12 '18 at 13:20

I had issue while loading image from url into TouchImageView using Glide. It would show a black screen. I found a fix which works like this. Pass width and height in Glide override method and after setting bitmap call setZoom of TouchImageView with value 1.

Here is the complete code:

Glide.with('context')
                    .asBitmap()
                    .load('url')
                    .apply(new RequestOptions().override(1600, 1600)) //This is important 
                    .into(new BitmapImageViewTarget('imageview') {
                        @Override
                        public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                            super.onResourceReady(resource, transition);
                            'imageview'.setImageBitmap(resource);
                            'imageview'.setZoom(1); //This is important
                        }
                    });

@ArnoldBrown This is for TouchImageView not ImageView. I just checked the github repo for this https://github.com/MikeOrtiz/TouchImageView and they still have setZoom method — Shivam Pokhriyal, Jan 17 '19 at 07:51
this is work for me, without .setZoom(1) Thank you. but why we apply code ? — Vrajesh, May 01 '20 at 18:59

score 1 · Answer 3 · answered Mar 08 '20 at 18:20

1

Add android:usesCleartextTraffic="true"

Glide will start loading images in android 10

answered Mar 08 '20 at 18:20

Ekta Dushanj

119
2
5

Please be specific, It is not understandable by freshers. Where to add this tag? – Pratik Butani May 08 '20 at 09:14
We need to add that in our manifest file with < application tags. – Ekta Dushanj May 10 '20 at 12:18
Thanks for this. Adding that to the `AndroidManifest.xml`'s ` – nebulasmoothie Nov 05 '20 at 02:23
Basically this enable the application to use HTTP protocol which is blocked by default in android-10. Better solution would be to HTTPS if you have control over the images. – Saty Oct 19 '21 at 17:27

score 0 · Answer 4 · answered Jan 19 '21 at 08:53

I have same issue and it is due to large image size. resolved it by following way:

    Glide
    .with(imageView.context)
    .load(url)
    .placeholder(R.drawable.placeholder)
    .apply(RequestOptions().transform(CenterCrop(), RoundedCorners(if (applyCorner) 32 else 1)))
    .into(object : CustomTarget<Drawable>(200, 200) {
        override fun onLoadCleared(placeholder: Drawable?) {
            // called when imageView is cleared. If you are referencing the bitmap
            // somewhere else too other than this imageView clear it here
        }

        override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
            imageView.setImageDrawable(resource)
        }

Android: Glide not showing large image from URL

4 Answers4