Quick Tip: Loading image(s) of any aspect ratio the right way(Android|iOS)

Disclaimer: This post just contains Android code, you can implement the same in iOS as well.

Sometimes we are given a requirement that we have to render an image or multiple items with images in a recycler view(being recycled)but we are not aware of what the aspect ratio of the original image is. All we know is that there’s only one dimension we can fix. This is specific to Android but you can use this process in iOS too.

Just for a headstart, this is how Google defines the aspect ratio

An aspect ratio is a proportional relationship between an image’s width and height. Essentially, it describes an image’s shape. Aspect ratios are written as a formula of width to height, like this: 3:2.

Cool, now that we know what aspect ratio is(Yay), let me quickly share what we are trying to solve here.

Let’s say we have an image that needs to be shown on the app and we do not know what the size of the original image is, but we want to show a scaled-down version that can just have a height of 18dp or maybe a width of 100dp, all we have is one dimension, either height or width, and we can not use both.

Now there are two problems here:

• We do not know what the width(or height) should be, of course, we can just get the aspect ratio and calculate the expected width as per the new height but this takes us to the second problem.
• We do not know the aspect ratio.

Initial thoughts - Is it some joke? We do not even know the width(or height) and not even the aspect ratio, how can we even do it?

And how do you expect me to reset and render properly in case of recycling? (View being recycled of different size)

I understand this should never be happening but sometimes it does and trust me the below solution(provided on SO and other places) will not work always 🙂

I had been using the second approach and it had always given me the right result in the case of a single image or images in a recycler view with the same aspect ratio but it breaks sometimes when all image's aspect ratios can be different.

I was a bit annoyed and even after doing all possible hacks:

• Resetting layout params
• Playing with margins

Nothing worked and I was totally disappointed.

There was one method that had been on my mind but I never tried to implement it because I always felt lazy even around the thought of implementing it.

✓ Download the image from the URL(I will be using glide to achieve the same)
✓ Find the original width and height of the image.
✓ Find the aspect ratio.
✓ Calculate the expected height/width as per the other known dimension.
✓ If the calculated width/height is greater, recalculate by subtracting 1/10th of the new dimension until it fits.
Note: 1/10 because I want to subtract minimum to have the best utilization of space, you can keep 1/2, 1/5 as per your need

That’s all folks, set the bitmap and you will see the image(s) in the perfect ratio.

Of course, we cannot live without code

and this is how I implemented it.
Note: (Github gist link is at the bottom)

Next up: How to keep height of horizontal recyclerview items with different image sizes equal? 😀

If you learned something new from this post, don’t forget to hit the 👏 icon. Stay tuned for the next one!

Always up for discussing anything cool, feel free to connect.
LinkedIn: Asheesh Sharma
Github Code link: Dynamic aspect ratio handler