Develop Reference

Size images properly for mobile devices

Currently i'm trying to develop a mobile app for the Android devices (using Appcelerator).
There are alot of Android devices out there with different screen resolutions. So i basically want the app to look the same on every Android device.
So suppose i have a background image in the center of the screen. Which is (in pixels) 550x300.
I just tried to set the width and height of the imageviews to dips (density independent pixels). So in my case to: 332dp x 226dp.
I tested this first on an HTC One X. In there the image in nicely centered and i have a small space left on the left and right side to the edge of the screen.
Then i tested it on a slightly older device, the HTC Desire Z. In there the image width is a little bit more than the actual width of the screen. (example screen. The blue square represents the image)
So that means setting the width and height as dp isn't a good choice either for images.
What would be a good way to set the image width and height so that it looks the same on both phones. i.e., so that they both have a small white spaces on the other edges of the image left (like i have now in the HTC One X)??
Any advice on this matter?
edit
Thanks for the info so far. Some of you posted links to resources etc and made some suggestions. I'll try to work them out in the next few days, so i might take a couple of days before i accept an answer. In the mean time, any ideas suggestions are welcome.

Use the various drawable folders, i.e. drawable, drawable-large, drawable-xlarge to store your image assets for your background in various sizes. Review http://developer.android.com/guide/topics/resources/providing-resources.html for more information.
Also refer to Android: Scale a Drawable or background image? for helpful information.

I would recommend using a size to fit.
in objective c it looks kinda like this... not much of a android programmer but this may help.
CGRect frame = _textView.frame;
frame.size.height = _textView.contentSize.height;
_textView.frame = frame;
so if you could figure a way to get the frame size then you could set your image to that size any way the view is positioned.
and if you dont want it to take up the whole screen and just the sides then there might be a autoresizing function for android this way your image will be flexible with your frame which will vary based on the phone size.

I think the is problem is not that the image is wider, but the screen width of the phone is smaller on the HTC Desire Z.
I think the best way fot the image to look the same on all devices would be to set width/height programmatically.
But I think this doesn't really matter, as you will encounter much more complicated problems further wil developing for multiple devices. Both look good IMO.

What I would is set your android:layout_width to fill_parent and then add a android:layout_marginLeft and android:layout_marginRight in dip. You can also set a margin for the top and bottom, but based on your screenshots that doesn't seem to be an issue.
As a general rule, try to avoid setting fixed heights and widths for your widgets. Here is a great reference for dealing with different screen sizes:
http://developer.android.com/guide/practices/screens_support.html

So i basically want the app to look the same on every Android device.
No you don't. You think you do, but you really don't. That's like trying to fit a photograph in a 4x6, 5x7, and 8x10 frame -- something's gotta give. You have small phones, medium phones, large phones, 7" tablets, 10" tablets -- these are not the same experience and you simply have to allow some leniency to the design to make it work. If you just want a specific amount of space outside of the image, just give your ImageView a specific margin in DP units, e.g.:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dip"
//...
/>
You should be striving to make the experience the same (although different layouts for tablets are highly recommended) but you can't expect it to look identical across all screen sizes and densities.

Different sizes on 2 devices, even if I use "dp"

I've 2 tablets:
1 Samsung Android 3.0
DisplayMetrics {density=1.0, width=600, height=976,
scaledDensity=1.0, xdpi=161.55031, ydpi=155.51021}
1 Low cost device, Android 2.3.3
DisplayMetrics {density=1.0, width=480, height=800,
scaledDensity=1.0, xdpi=160, ydpi=160.42105}
If I use different layout for each screen size, both devices says they are large-long and mdpi, so I can't distinguish them by using layout folder names... The problem is:
I use a TextView with textSize="20dp"
In the firse device, text width is half of the screen, in the second device is bigger (80% of the screen width). Why? I expect that both devices display text in the same way if I use dp (and not px). I tried also with sp but nothing changes...
(I used TextView as example, I've the same problem with all elements in the layout: button sizes, ...)
I would try to use layout folder names like "layout-w600dp" or something else introduced in Android 3.2 but this is not the case.
I know I can change element dimensions by code in onLayout() but I don't want to do that...
Any suggestion?
Update
I solved my problems with layouts using themes: Activate a specific dimens.xml at runtime

The android documentation on Dimention say this
The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion
So it's totally ok what you see
You can achieve 50% of the screen using LinearLayout weigth..Refer this

Best way to set text size?

What is the best way to set the text size so it looks the same on all devices? The biggest problem I am having is setting the text size on the buttons so everything fits or isn't too small. I have tried setting the size in the xml, and I have just tried setting it dynamically by getting the screen size and messing with the screen width and height to set the size. I had tested different things on different devices and thought all was well, until I just tried my app on the Galaxy Nexus and half of my words were getting chopped off inside of the button. I made some adjustments and the font is now way too small on tablets.
Using the xml has worked fine for me before, but most of these new 7" tablets use the large layout, so my images and text are really small if I set the height, width, and text size with the xml. Setting the widths and hights dynamically have helped with the buttons and image sizes, but the font still doesn't look quite right.
Is my best bet just to find a happy medium via xml(large, x-large, etc.) or are there other ways?

Have you seen this article: Supporting Multiple Screens ?
It says:
you should prefer the sp (scale-independent pixel) to define text
sizes. The sp scale factor depends on a user setting and the system
scales the size the same as it does for dp.
The same issue is explained here, Different text size for different hardware

Android UI problem

I'm required to maintain the same Height in Spinner and EditText views, but when moving to a smaller screen and having the width as "fill_parent" or "wrap_content" the view controll increases it's height, so I tried to fix the height with 50dp (and 50dip) but the views just gets cut.
Some pics to illustrate my point
Second http://img218.imageshack.us/img218/6776/screenshot20110527at330.png How it should look (Bigger Screen)
Third http://img171.imageshack.us/img171/6776/screenshot20110527at330.png How it looks when fixed 50dp (Small Screen)
First http://img151.imageshack.us/img151/6776/screenshot20110527at330.png How it looks in with "fill_parent" & "wrap_content" property (smaller screen)

These are from emulator, right? Emulators don't scale well on computer screen. Just use mm and know that the size can never be the same in the real world. You will have to get used to variable size. Reasons - different screen densities reported wrong from Android (phone). Even today you can never make equal sized text on computer screen. So, next time you're asked to make an image X cm size, just laugh and ignore.
It will look OK, yes. But will not be the same size. The most important reason is that phone screen have different pixel densities that are reported wrong to Android and as a result the OS cannot scale properly.
See this thread:
Android: how to draw an ImageView with the same size regardless of device?

Use mm or inch , and will be the same physical size for any device

Android - text size on particular resolution - setting programatically

I am programming application, which will be used on various kinds of resolutions, but let's say, we would keep to the density. For medium, high and low I am setting it's own drawables, but it still doesn's solve my problem, so I am wondering, how to set values dependently on actual pixel screen density in Java code?
In this time I have to in XML set smaller letters and smaller textviews to fit it into low resolution screen, on the other hand, high density screen is used from about 60% and text fields are too small. I am wondering if there is some way how to, during the start of the program, in some If loop find out, what the resolution is and then set layout_height and textSize for items I want.
Thanks
edit: Solved myself - http://developer.android.com/reference/android/util/DisplayMetrics.html

well before moving ahead to set the text size programatically, I recommend you to set the Textsize property's value in dip instead of px. it seems that you have marked the textsize value in px.