Develop Reference

Android layouts size and resize

I am doing a lot of work about android layout I still can't create a layout working in every phone. I am not sure about best the way to create a layout so correct me if I am wrong . There are three things to keep in mind :
Screen px (resolution, for example 1080x1920 px)
Screen dimension "inches"
Screen density dp or also called dpi ( dp is a virtual resolution, it's correct?)
To draw a layout working in every phone (my app will works for phones) do I have to create a directory "layout-kindofdensitydpi for every screen density (layout-ldpi,layout-mdpi,layout-hdpi,layout-xhdpi,layout-xxhdpi,layout-xxxhdpi) and draw "manually" or do I have to do something else?
I did a test, I created these 6 directory and drew manually for every resolution. It requires a lot of time, also device with a resolution of 768x1280 my app doesn't respect what I drew, for example spaces aren't respected, the collocation of elements doesn't result correct and frame layout with ImageView inside isn't scaled.
What I have to do? In some Android books isn't mentioned that elements could not resize and usually them explain how to put some text or image without analyse resize in every device.
Thanks in advice

First you should find the appropriate layout type for your UI (RelativeLayout or LinearLayout). Sometimes using a good layout(or nested layouts) can make the UI look good on every screen. I prefer LinearLayout cuz I can simply set layout_weight for components.
Then set different sizes in dimens.xml file for different densities or screen size buckets. Like this:
And you can also use match_parent or wrap_content
Don't forget to set the screen orientation of your activity if it doesn't need to rotate. Having one orientation makes it much easier to design.
If you couldn't make a good layout using tips above you should create multiple layouts to fit every screen size or density (Screen size and density are two different things).
You should find the best way to determine your screens according to.
Screen size bucket (small, normal, large, and xlarge) picks a layout that fits the screen (or the closest), density bucket (ldpi, mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi) picks a layout according to the density ,or the smallest width (I think it's almost the same thing as density).
480dp is the sw of these two devices
You can make layouts for different screen orientations too.
I don't like creating layouts for different screens for some reason. One of them and the most important is that sometimes same screen sizes have different densities and it makes it hard and time consuming. To create a layout and you should also provide a lot of pictures.

Use
android:layout_width="match_parent"
android:layout_height="match_parent"
to the outer layout to get access of the full screen of the device.
Also, if there are no changes in your UI then you don't need to create different layout folders.
Refer http://developer.android.com/training/multiscreen/screensizes.html

You should have a look at
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
http://developer.android.com/training/multiscreen/index.html
I would suggest using layout-swXXXdp or layout-large etc instead of layout-KindOfDensitydpi
Create your relative layouts using RelativeLayout and use the weights of LinearLayout. Don't hard code any of the positions in the layout

Image used as source in ImageView: What sizes should I create?

Its very clear for me what sizes should I use for the different versions of ic_launcher.png inside drawable-hdpi, drawable-ldpi, drawable-mdpi, etc.
What I don't understand is what sizes should I use for a picture (a png) that is simply used in one Activity as an ImageView.
I have this image in high resolution
In a normal pocket device this image should be like 90% width
In a tablet or larger devices, maybe 90% is too big
So, the question is:
Should I create several versions of this an_image-file.png for each folder in drawable? or just use a single version of it and adjust its width via XML? I'm asking because I'm worried about using the best practice in this subject.

There is no clear answer. Only way you can solve this is by trial and error. Sizes are defined for icons only for other image views you will have to try it on 5" smartphone 7" nexus 2 tab and 10" tablet.
At least for these three resolution you will have to create images, for other devices XML layouts will automatically adjust.

how to set layout for different screen size in android

I am working on a app in which there are some textfiels and button when I am running it on different screen size devices it is showing unexpected result as shown in the below image!
[Image 1] http://oi45.tinypic.com/25yvon4.jpg
[Image 2] http://oi45.tinypic.com/xmlqns.jpg
Here in first image some space is left vacant at the bottom due to large screen size and in second image the last row of buttons are hidden due to small screen size.Also for buttons I am using Table Layout.
Is there any way to solve this problem.

That's a broad topic that needs spatial understanding first.
Here's a good place to start - http://developer.android.com/guide/practices/screens_support.html
Long story short, always use point units (dps), try to avoid to hardcoded pixels within your code, position items in a relative way (ie.: in relation to other object - RelativeLayout, LinearLayout, etc) and make sure to take advantage of the power of "values-..." folders.
Example
values-xhdpi (XH)
values-hdpi (H)
values-mdpi (M)
values-land (Landscape)
values-sw600dp (smallest width at least 600dp)
....

Use layout, layout-large and layout-xlarge resource folders to customize your layout files if you care about various screen sizes. Test these layouts on phones, 7" and 10" tablets to cover all of your bases.
For small phones of less than 4" screens (qvga) as well as older devices (wvga), make custom layout files (in the layout folder) and refer to them dynamically in your java code when you detect these kinds of devices. Again, test on these older & smaller phones as much as possible. Borrow some phones from the Sony Device Loaner Program in order to get real-world testing done.
Lastly, use ScrollView to embed your layouts if you want vertical scrolling on smaller screens. Don't go crazy trying to fit everything on a smaller screen. Sometimes scrolling is a natural solution that your users will understand.

You must have to make screen for all devices if you want to solve your problem.Read below document for different screen:-
http://developer.android.com/guide/practices/screens_support.html
or
You can use weight or layout weight to prevent this problem.

How should I provide alternative resource for qHD(540x960 resolution with 256 dpi) screens

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 1024x600 with 169 dpi, 1024x600 with 179 dpi, 1024x600 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 1024x600
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(540x960 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 480x800 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 360x640, whereas the Incredible S's is 320x533 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 360x640, whereas the Incredible S's is 320x533 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.

Screen sizes and precise element placement on Android

I have a problem with supporting different screen sizes. My application has different drawables for mdpi (320x480), hdpi (480x800) or ldpi (240x432). I also have different layout for small, normal-notlong, normal-long. Every size scaling or placement features are done in dp. However my problem is that I need to precisely place an element on the screen so it will perfectly fit to the background. One example here is an image that I download and show inside a frame that is part of the background. Or I also draw a circle (using drawArc) on the top of an imageview object and need to place it precisely to fit a 'black hole' that is on that image. Because the position is dependent on the background I place the elements with parent margins. As I wrote I am using dp for that. However If I fit my setting for a 320x480 3" screen and then change to 3.1" the elements are slightly misplaced and don't fit the background. The same if I have 480x800 3.5" device but change to 3.6" - the elements are misplaced slightly but that is enaught to look poorly in the design. What can I do about it? I am sure there has to be a way to achieve this on any screen size - i.e. games must use some kind of that mechanism and they work on any screen size. Can any one help?