Home » Android » android – Glide shrinks image on first load

android – Glide shrinks image on first load

Posted by: admin June 15, 2020 Leave a comment

Questions:

When I load the image into the ImageView with Glide, it shrinks the image. When I rotate or reopen the same activity it has the right size. I already tried possible duplicate. I am already passing fix size to the ImageView inside the xml and I tried to override the size as well. centerCrop() and fitCenter() has no effect on the shrink.
I also tried to debug the image size. When it is shrinked or not it returns same width and height.

View:

<ImageView
      android:id="@+id/thumbnail"
      android:layout_width="@dimen/episode_detail_img_width"
      android:layout_height="@dimen/episode_detail_img_height"
      android:layout_marginTop="@dimen/episode_detail_img_margin_top" />

Glide

Glide.with(getActivity())
            .load(url)
            .placeholder(R.drawable.thumb_placeholder)
            .centerCrop()
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(thumbnail);
How to&Answers:

I am glade you got your answer. Just for more description of your problem is :

Glide calculated your ImageView height and width before starting a load of an image but when an image gets load it replace your placeholder drawable. so if your placeholder drawable height or weight is small, Glide will render downloaded bitmap with placeholder’s dimension.

So, for no lag in different screen size and layout, I advise using high dimension drawable in a placeholder.

And one more hack is that use color in a placeholder because color has no height or width, so render in the whole area of the view.

Answer:

You have defined placeHolder() method which will be loaded at initial time and when glide loads the image based on the given url then glide replace the Loaded Image with placeHolder image. which will be appear into imageView.
this loaded image set into imageView based on these specified method.

like: cropCenter(), fitCenter() etc.

don’t use cropCenter() it crops the image from center and fit it into your imageView so image quality will go off.

use fitCenter() method.

<ImageView
            android:id="@+id/conversation_team_photo"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:scaleType="fitCenter"
             />

and I have defined bast way to use glide here best way to use glide.

Answer:

It can be fix by:

1) add .dontAnimate()

2) find a placeholder that matches the image’s ratio

Explanation:
https://github.com/bumptech/glide/issues/1295

The first time the image loads the default .crossFade() kicks in and
your placeholder aspect ratio is not matching the loaded images’
ratio. The second time the image is loaded from memory cache and the
animations are skipped in that case, resulting in just loading the
image properly. You can disable animations via .dontAnimate(), or
force a fade-in animation .animate(R.anim.fade_in), or find a
placeholder that matches the image’s ratio (i.e. square in your case,
because of 512×512).

Answer:

In comparison to Picasso, Glide is much more efficient memory-wise. Glide automatically limits the size of the image it holds in cache and memory to the ImageView dimensions

Clean Your Project and try this Code :

Glide
  .with(context)
  .load(url)
  .override(400, 200) // resizes the image to these dimensions (in pixel).does not respect aspect ratio
  .into(thumbnail);