Photoshop Question posted in
The official user guide can be found here.

Android UI (Layouts + Resources) for different screen sizes and different densties – Photoshop

First of all, I have seen all the available answers on SO but could not get exactly what I wanted to ask, therefore I am writing this question here, it might help others too.

What I know

To support multiple densties we should provide different resources (images) in drawable folders by considering the following,

ldpi    :  0.75x
mdpi    :  1x
hdpi    :  1.5x
xhdpi   :  2x
xxhdpi  :  3x
xxxhdpi :  4x

For example, if we have an image of size 100X100 px in mdpi then, size of icons for other densties will be,

ldpi    :   75X75 px
mdpi    :   100X100 px
hdpi    :   150X150 px
xhdpi   :   200X200 px
xxhdpi  :   300X300 px
xxxhdpi :   400X400 px

My Questions:

  1. As there can be multiple screen resolutions in one density then while designing the icons for suppose mdpi which resolution should be considered? Suppose the designer is creating the Screen in Photoshop and then will give cut outs of the icons, then which screen resolution from mdpi should be considered?

  2. Will same image be shown on all the screen resolutions having same density. For example, like we have resolution from 480X600 to 1920X1200 in hdpi, then will same image be shown on these two resolutions? Will it not look small in 1920X1200 resolution rather than 480X600?

  3. What if we want to design a custom background image that should fit properly to all screen sizes? What should be the approach for the same? Suppose we want to design a background image for hdpi, then for which resolution should we design it? (480X600 or 1920X1200). I think it will not fit properly on all screen sizes.

  4. What should be a better approach to make the design to be resolution independent?

  5. What designers here do is, select a resolution, design the whole app screen in that resolution, cut out/slice the psd to get icons. But this way the design becomes resolution dependent, it doesn’t work good on other screens with other resolutions. What should be the best way to achieve screen resolution independent.

Any body knows good solutions to create resolution independent UI for Android?

Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As per my experience what I learned is,

    1. Phones

      hdpi - 480 x 800
xhdpi - 768 x 1280
xxhdpi - 1080 x 1920
xxxhdpi - 1440 x 2560

      Tables large-mdpi - 600 x 1024 xlarge-mdpi - 800 x 1280

    2. For tablets design different cutouts.

    3. Get it created for all the resolutions you want to support.
    4. Getting cutouts for most famous resolution for each category.
    5. Get cutouts for one resolution from each category and different cutout images for tablets.

  2. 0

    Here I’m giving answer of your first 3 questions. See below:

    1. Designing icons for mdpi, you should consider 320×480 mdpi resolution as a base standard. According to this, you can resize images for different screen resolutions.

    2. If you consider mdpi as your UI baseline, then you need to resize images as per 0.75x : 1x : 1.5x : 2x : 3x : 4x this scenario/std.

    3. Designing background image, you need 480×800 hdpi image size. Because most of hdpi devices lie on 480×800 this size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search