Android Confusion on supporting multiple screen sizes

Question

Ive read Android documentation on the subject of supporting multiple screen sizes but I just cant seem to wrap my head around it. I know qualifiers need to be set in layout names and android picks the one whos qualifier is closes to the width of the phone.

Im not to worried about tablets at the moment but when I develop for my physical device everything is fine and dandy all in default layout folder: layout/main.xml

But if I test on my friends phone Samsung Galaxy S4 everything is streched in a vertical way. I just dont know where to begin really...

Is there a standard set of folders that I could implement to lay my layouts in and then edit for optimized performance?

Answer 1

http://developer.android.com/training/basics/supporting-devices/screens.html . It's all explained in this tutorial link.

Answer 2

If one layout should support all screens then,

1. your app theame should be similer for tabs and mobiles

2. never use fixed values for layouts like (ex:300dp , 15dp), all are wrap , match , fill depends on requirement,

3. make all the icons, images in 2 or 4 different sizes

NOTE: if you have minor changes for smaller to larger device ui, then in on create get the device height and width , make your changes (images, layout widths etc..) runtime from java

If your app is not similer from small to big devices

Use layout(mobiles) ,layout-large(7 inch tabs) layout-xlarge(10 inch tabs)

Answer 3

Start with device independent pixels (dp) and scalable-independent pixels for fonts (sp)

If something is stretched vertically after that, it probably means it's a background image that's trying to fill up the entire height of a layout (by the way, next time you have a problem, please do post the relevant xml code and dimensions of the image, or at least a screenshot of the problem).

In that case, just use the different size qualifiers to solve your problem ( not your density qualifiers). Density qualifiers don't help for widths or heights of bitmaps that are larger than the widths or the heights of device screens. This is just a rule of thumb that you should be aware of.

Use the toolbar select box in the layout designer of Android Studio/IntelliJ to quickly test multiple device screens all in one go. This is the fastest way to do it. Do not use Eclipse for that, its ADT layout designer doesn't have that capability (at least, not the last time I've checked). Even if you use Eclipse most of the time, it's worth using Android Studio/intelliJ just for that functionality, and then switching back to Eclipse (assuming it's still your favorite IDE after that) when you're done with testing that aspect of the layout.

Also, don't try to do a different layout for each size qualifier that you encounter. Only use different size qualifiers for the layouts that are actually giving you problems. And don't forget that common layout components that don't need to be duplicated can just be abstracted away in a parent layout. And if you can find a way to resolve your specific problem without the use of size qualifiers, that can work just as well. For instance, if instead of using a single image for your background, you could replace it with a larger image that you don't mind getting clipped at different aspect ratios, or replace the background image with something entirely different and abstract (like a solid color, a gradient, a tiling background, a large vector graphic, or a large patch-nine png) that looks ok at different aspect ratios, that could be even simpler still.

Answer 4

At the high level, you just need to take care of these things:

- Better have the images sliced for either XHDPI (720x1280) OR XXHDPI (1080x1920) resolution and keep them in respective folders. XHDPI images into drawable-xhdpi and XXHDPI images into drawable-xxhdpi folder. One set of image slices are enough.
- You don't need to write different XML layouts for the same screen if you are not supporting Tablets (except for very rare times)
- Try to avoid hard coding the android:layout_width & android:layout_height parameters. Use wrap_content , fill_parent OR match_parent .
- Try to avoid keeping any image slices inside simple drawable folder instead keep inside specific drawable folders like drawable-xhdpi , drawable-hdpi etc.
- Try to use, color codes & 9 patch images as much as possible instead of using images for everything which will reduce the build size and also helps in avoiding OutOfMemoryException .
- Inside simple drawable folder, keep all your XML drawables like background of a button with separate images for clicked & focused states etc.

If you follow these steps, you don't need to worry about supporting multiple screen resolutions for most of the cases.