Size images properly for mobile devices

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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.