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) 550×300.

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

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.