From .psd to screen

Question

I have a client that gave me a .psd file that contains the entire screen of an Activity with all the graphics. The resolution is 480x800. The client wants the application to look identical to the one in the .psd file. The problem is that different devices have different resolutions and sizes. I know that the density is what really matters but how can I scale the graphics to look the same on all the devices? For example, I exported all the layers and recreated the screen in Android but, for some reason, the screen looks more crowded on a Nexus One (480x800).

One idea would be to create 9 patch images from the graphics and use for ImageViews android:background instead of android:src right?

Isn't it better to have a 320x480 resolution for the graphics? Or do I need for both resolutions? Also, I have to consider the height of the status bar which I understood it is 25dip but I am not certain about this.

So, to summarize, I am interested to find out what is the best way for a client to give you the mockups and graphics so that it is easy for the developer to implement according to the specifications.

Answer 1

That's something that's not easy to solve. Think of a webdesigner, one can't know all the possible resolutions and settings of every browser so he has to scale things accordingly.

In my opinion there are only three approaches here.

First: Let him state what devices he wants to support and only support those devices. Extract the layers with the size of the device with the highest resolution and scale them down on other devices. E.g. If you have to support two devices with 480x800(2) and 240x300(1), export all images to be 480x800 and scale them down accordingly. Don't write a single application for every device.

Second: Export the graphics with the highest resolution possible and scale them down on all devices relative to the device being used. Imagine, again, a webdesigner. All he does is define margins, paddings, etc. and it will look nice in almost any browser. You should do the same and resize your elements on demand.

Third: Make the application fixed, e.g. define a size of 200x200 for your whole application and just fill everything larger than the screen with a certain color, e.g. black. This happens a lot with java ME applications, they look great on the hardware they were made for and are still playable on hardware that is beyond their time though they look pretty ugly.

Hope this helps, Robin.