Question

I hired a designer to help me redesign the UI for my Android app. For each Activity he gave me an image for the background, which includes any static content like fancy frames for text content; plus images for the buttons, which must fit in to the background image in exact places, to fit into the frames in the background image.

However, since Android devices have different screen sizes and aspect ratios, it’s easy to fit the background image by itself with android:scaleType="centerInside", but how can I get all the other images to fit in with background exactly, to the pixel? If they didn’t have to fit in with the background, I would just set the exact width and height for each ImageButton, but depending on how the background scales (based on the screen size and ratio) they might end up not aligned correctly.

Thank you very much in advance.

Update:
Is there some way I can have an entire view (e.g. a RelativeLayout) scale inside the screen, like the way the image scales inside the ImageView with scaleType="centerInside"? If so, I would be able to set the RelativeLayout‘s size to the same as the background image, and put all of the other buttons / images in their places relative to the background image, and then just have the whole thing (the RelativeLayout containing all the other views) center inside the phone’s screen.

Answer 1

Your approach is wrong (or at least bad), because android devices offer screens not only with different sizes but also with different densities. What you shall read now is Designing for Multiple Screens first. Then understand that non scallable bitmaped UI will rather not work as you imagine. You need to support screen sizes which means your UI elements (like i.e. buttons, lists, headers etc) shall scale. There’s lot of possibilities to deal with this, one is using 9-patch bitmaps (randomly chosen tutorial on the 9-patch).

Also, please read this article: Supporting Multiple Screens

When desining UI it suffices to assume you design for mdpi density. Once your layout is done you create drawables for i.e. mdpi and hdpi (and put under the same names into res/drawable-mdpi and res/drawable-hdpi respecitvely). Layout files remains unchaged but framework would automatically pick right asset so your UI will look sharp as long as you provided drawables for that density. Please see Providing Resources article as well.