Android image resource and need for 10 images to cater for each screen resolution and orientation

0
votes

I'm a beginner developing an Android app that needs to display a clip art type png image the full width of the screen in both portrait and landscape mode:

Portrait:

Portrait

Landscape:

Landscape

Would I be right in saying that in order to cater for each screen resolution and orientation I need to include the following image sizes?:

Image width:        Resource folder:

xxhdpi – 1920 px    drawable-land-xxhdpi 
xhdpi – 1280 px     drawable-land-xhdpi 
xxhdpi – 1080 px    drawable-xxhdpi
hdpi – 960 px       drawable-land-hdpi
xhdpi – 720 px      drawable-xhdpi
mdpi – 640 px       drawable-land-mdpi
hdpi – 540 px       drawable-hdpi
ldpi - 480 px       drawable-land-ldpi
mdpi – 360 px       drawable-mdpi
ldpi - 270 px       drawable-ldpi

This seems overkill. The App could have a thousand of these images and thats 10 versions of each.

What is the normal approach in this scenario? Would you scale the images to suit?

1
androidimageandroid-layoutscreen

1 Answers

0
votes

Assuming you will maintain the same aspect ratio regardless of whether the screen is in portrait or landscape orientation and you will be displaying the image via an ImageView, you will only need 4 versions of each image - xxhdpi, xhdpi, hdpi, and mdpi.

As far as the image widths go, stick with the 2:3:4:6:8 scaling ratio recommended here, in the Android Documentation. That link specifically discusses icons, but the scaling ratio holds true for all images. So if you are using an image width of 640 px in landscape on mdpi, the hdpi, xhdpi, and xxhdpi should have widths of 960 px, 1280 px, 1920 px, and 2650 px, respectively. Don't worry about a ldpi version because Android will scale down the hdpi version for low resolution devices.

Last thing, set the scale type of the ImageView to a scale type which will maintain the image's aspect ratio (CENTER_CROP or CENTER_INSIDE). See the ImageView documentation for info about setting the scale. Then once you set the image to fill up the width of the screen, the image should appear as you would like.