Glide: ImageView height wrap_content problem

[ghost]

It seams that if I set the ImageView height to wrap_content, when I scroll my ListView(there is only a ImageView in the item), the height of the ImageView sometimes just a picture's height, and sometimes is normal. When I set the ImageView's height to a real size (such as 120dp), then it shows the right way

[TWiStErRob]

Wrap content on ImageView means you want original sized image and display it as large as possible (without upscaling).

When the list item is created, the first bind loads an original sized image (that's what wrap content tells Glide) and shows it, because the just-inflated image view doesn't have dimensions. When the item is recycled the next binds will have the previous images set which has a dimension, so that size will be loaded.

Try to set your heights as follows (generally):

• item root wrap content
• ViewGroups inside root wrap content or match parent
• text views wrap content
• image view match parent (maybe with margin)

What the above does is makes the list item as tall as the texts (+ paddings + margins) inside it. Then the image will on stretch as tall as the text. If you want a little bit bigger icon than texts add minHeight to the image view.

This will lead to weird display in preview, so add tools:layout_height="100dp" to root. At runtime the items behave a little differently in a list than in an unbounded preview.

All of the above still applies if you only have one image, except the minHeight is required, OR you must set a fixed size for the root or the ImageView. _Something has to tell Android and Glide how big an image you want_.

If the above didn't help please include your Glide load line, item xml and maybe a screenshot of what's going wrong. Also is it 3.6.0?

[ghost]

It works for me. Thanks

[nemphys]

This behavior sounds OK most of the time, but in my case it just does not do the job. It is impossible to set a "match_parent" or fixed-value height to one of the ImageViews in my layout, but I need "wrap_content" height to work properly.

A workaround I have found is to use setBottom(0) on the imageView right before calling the Glide code to load the image (this works because Glide first uses View.getHeight() before adding a measure callback and the View class returns mBottom-mTop for getHeight()).

This seems to do the job, since it forces re-measuring the image and applying the correct height to the imageView BUT it is available only >= API 11 and I need API 10 compatibility.

Any other method I have tried (eg. setImageDrawable(null)) does not work, since getHeight() still returns the height of the previous image even after clearing it.

Any other ideas?

[TWiStErRob]

See https://github.com/bumptech/glide/issues/135#issuecomment-167439120

[nemphys]

Cool, I didn't think "imageView.layout(0, 0, 0, 0);" was a good idea, but it actually works well!
Thank you.

[HugoGresse]

Could you post an example of this case? I've read all linked issues and comments whitout finding a working wrap_content height solution

[TWiStErRob]

@HugoGresse The solution most of the times is to not use wrap_content, mostly because it would trigger binding all the views at once on list startup (wrap -> 0-height while there's no content).
I hate hard-coding so I think the best solution is PercentLayout, see these examples:

• fixed aspect: https://github.com/TWiStErRob/glide-support/commit/24dd8002922df166cbd4fb020de1781887e5b6df#diff-76c2c920a3a86f9d8d6fa1446d55ddbdR14
• dynamic aspect:
  https://github.com/TWiStErRob/glide-support/commit/a1572179430e837d8410cc9f915d7c4737e584dd#diff-9b721ee4cbe0e6ed14a1f208ea8192d4R62 + https://github.com/TWiStErRob/glide-support/commit/a1572179430e837d8410cc9f915d7c4737e584dd#diff-264757075065805a9ab23cead2292032R20

[HugoGresse]

@TWiStErRob the fact is that image is the hearth of the application, some image are vertical and other horizontal (and I don't know before loading it), and I want my image views (which are in a RecyclerView) to not loose height space, and so wrap it's content.
It's not like this case where the row mainly context text.

For the moment I only use fitCenter() which is not working perfectly (some space is lost most of the times, I can share I image whith you if you want) and a fixed height. It will be great to find a generic solution for almost all cases as it's a recurrent issue. I've tried using a BitmapTarget and setting the height mannually but it seems to do nothing at all.

[TWiStErRob]

@HugoGresse I think to get a perfect fit with fitCenter you either have to know the input aspect before loading, or give up memory (.override(Target.SIZE_ORIGINAL)) or quality (.override(200)).

I always emphasize that the image urls are coming from somewhere and that somewhere must have some metadata about the images; if not, and you can change it, then that's the solution.

Can please share some more specifics about your issue? You could even open a new issue, so we can refer to it later (in case we find something useful). Describe what you want and what you know/have.

[TWiStErRob]

@HugoGresse this may be also a useful read: https://github.com/bumptech/glide/issues/1099#issuecomment-203868327

[HugoGresse]

wow, the way to think about image scaling is just perfect, thanks for the link. To refer to this, It was my bad, I added a paddingBottom to the imageView....

About the wrap_content, I'll continue to search in case I found a correct solution without loosing too much performance, thanks for your help.