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:
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?
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?
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.
What should be a better approach to make the design to be resolution independent?
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.
The best way to create a responsive layout is to use ConstraintLayout as the base layout in your UI. ConstraintLayout enables you to specify the position and size of each view according to spatial relationships with other views in the layout. All the views can then move and resize together as the screen size changes.
36x36 (0.75x) for low-density (ldpi) 48x48 (1.0x baseline) for medium-density (mdpi) 72x72 (1.5x) for high-density (hdpi) 96x96 (2.0x) for extra-high-density (xhdpi)
As per my experience what I learned is,
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
For tablets design different cutouts.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With