Search code examples
androidandroid-layoutandroid-imageviewandroid-drawableandroid-image

How to find out highest possible Image resolution to support multple screens


I'm a little bit confused by Androids approach to support multiple screens. I read the official documentation supporting multiple screens a couple times however I don't fully understand the concept.

In my quiz application every question should have an Image. In total there will be 255 Images. The app supports only landscape and smartphones of all screen sizes (without tablets).

enter image description here

Now my Designer want to know the highest possible Image resolution to buy the Images this week. I want to implement all Images in the highest resolution because Android will auto-scales the drawables if the device not match the drawable DPI. Otherwise he has to buy multiple Images.

So my problem is that I don't know how to find out the highest resolution for the question Image.

How should I proceed?


Solution

  • Step #1: Determine how big your image will be, in density-independent pixels (dp), based on the screen sizes you want to support (small, normal, large, xlarge) and your GUI design. That will be based in part on the sizes in dp associated with those screen size categories:

    • xlarge screens are at least 960dp x 720dp
    • large screens are at least 640dp x 480dp
    • normal screens are at least 470dp x 320dp
    • small screens are at least 426dp x 320dp

    Step #2: Decide what is the maximum density for which you want to have dedicated artwork (versus having Android upsample from a lower density).

    Step #3: Given your image size in dp and your desired maximum density, determine the maximum resolution in pixels.

    For example:

    • in Step #1, you decide that you will only work with small and normal screens, and given your GUI design, your image will be 120dp x 90dp

    • in Step #2, you decide that your maximum density that you are going to worry about is xhdpi (320dpi = twice the dp basis of 160dpi)

    • the result for Step #3 is 240px x 180px