I have designed attached screens for my app. The app targets android 1.6 and above. Currently the app is running on majority of hdpi and mdpi devices and few devices having some odd resolution like 1024×600 with 169 dpi, 1024×600 with 179 dpi, 1024×600 with 240 dpi. I have provided alternative layouts to support multiple screens in below mentioned folders.
layout: Default layout resources.
layout-hdpi: For hdpi screens. Few layouts in my projects need to be specifically optimized for this.
layout-mdpi: For mdpi screens. Few layouts in my projects need to be specifically optimized for this.
layout-large: Default layout resources for large screens.
layout-large-hdpi: Layout resources for hdpi screens having resolution 1024×600
layout-sw400dp-v11: This is mainly for 7″ tablet. Only devices running Honeycomb or above can recognize this.
Now I also need to add support for qHD screens(540×960 having 256 dpi or similar). Below is the example screen I need to design and add support for qHD screens. This screenshot is taken on HTC Incredible S having resolution of 480×800 with 240 dpi.
I have designed layout for qHD screens so that it will look same on those screens as well.
Now, I have below questions:
1. Am I having right directory structure for providing alternative resources considering I need to support hdpi, mdpi and above mentioned odd screens? If not, how should I provide alternative resources as for those screens? I really need to design separate file so that the UI looks the same across multiple screen resolutions and densities.
2. qHD Screen are having 256 dpi. That means those screens are hdpi screens. I already have resource for hdpi screens which looks as above on most of the devices. but when I view it on qHD screens, it looks like below screenshot. So, how do I provide alternative resource for qHD screen such that it won’t affect my current layout resources which are showing good on most of the devices?
@Espiandev
A qHD, hdpi device has a display-independent pixel (DIP) screen size of 360×640, whereas the Incredible S’s is 320×533 hence why some of the images are higher up the screen relative to others. So essentially, the qHD device can show more stuff that the Incredible S, per screen. See here for an explanation of DIPs and some more tips
— Thank you for this insight. I am aware of this. Also I have read post by Dianne Hackborn,; “New Tools For Managing Screen Sizes” – http://android-developers.blogspot.in/2011/07/new-tools-for-managing-screen-sizes.html
From what it looks like, you’re currently using some margin or padding above the goal/gain/to go parts, I’d instead suggest changing their gravity to bottom (i.e. align them to the bottom of your screen) and then use a margin or padding below the item.
— No I am not using padding or margin for these parts. Its a relative layout where goal/gain/togo buttons are below that meter tape button. As you have suggested setting gravity to bottom and have bottom padding; yes, I had tried that as well but then distance between that meter tape button and these circles increase and I have to modify sizes and margins between those glasses, button below that and meter tape button which created different layout file. When you view this screen on small screen devices, views will overlap as small screen devices can show less views.
But I’d work on making your app adaptable to screens rather than trying to divide screen sizes up like this, as you shouldn’t really need separate layout resources for mdpi, hdpi etc.
— I agree that Normally I shouldn’t need separate layout for mdpi and hdpi screen. But the requirement here is that screen should look exactly the same on all screens. Like, all views within that yellow circle should not go outside of that circle. That button at the center should be always at the center. Also, the relative sizes of those 3 little circles at the top and below meter tape button should be same. This left me no choice than creating different layout for mdpi and hdpi screen.
I have created different layout file for qHD screen. Now my question is where do I put that so that qHD devices will use that file and other devices will continue to work as those are working now.
A qHD, hdpi device has a display-independent pixel (DIP) screen size of 360×640, whereas the Incredible S’s is 320×533 hence why some of the images are higher up the screen relative to others. So essentially, the qHD device can show more stuff that the Incredible S, per screen. See here for an explanation of DIPs and some more tips.
There’s no real way to make the UI look exactly the same on the Incredible S and qHD devices. Unlike iOS devices, screen sizes are very varied. From what it looks like, you’re currently using some margin or padding above the goal/gain/to go parts, I’d instead suggest changing their gravity to bottom (i.e. align them to the bottom of your screen) and then use a margin or padding below the item. That way it will hopefully stay aligned with your lunch/dinner boxes. If you post your XML file, that will help diagnose the problems.
Before Android 3.2, I don’t believe there is a way to distinguish the two cases above, but after 3.2, you can use the swXXXdp (shortest width) attribute. But I’d work on making your app adaptable to screens rather than trying to divide screen sizes up like this, as you shouldn’t really need separate layout resources for mdpi, hdpi etc.