How image will display in different devices...

[jatin.kanand]

Hi,
I'm a beginner in the field of mobile development. I've just completed a canvas example with image. While doing that, i came across a question that how the image will look on different screen size / resolution on different devices (Sony, Nokia etc.).

Let's say if i have loaded an image which is 240 x 320, what will happen if i see the same on a screen size of 128 x 160 or 360 x 640.

Pls. spare some time and reply to this post. Because of this my work has got stuck ...

Regards,
Jatin

[grahamhughes]

If, for example, the image is 200x200 pixels, then it will appear less than the screen size on a 240x320 screen. It will be greater than the screen size (so you will only see part of the image) on a 128x160 screen. It will occupy only a small part of a 360x640 screen.

Does that make sense?

Graham.

[jatin.kanand]

Hi Graham,

Thnx for the reply. Actually the problem is that i need to load an image onto a canvas and it should appear properly on different devices with different screen size. Lets say i am loading a background image and i want it to appear as per screen size no matter what the screen size is.

Could you pls. guide me how to achieve such result? Otherwise for each device, i will have to create separate .jar file to show the image size perfectly fitted in the screen.

Regards,
Jatin

[grahamhughes]

Ultimately, you will need to match the sizes of images to the size of the screen.

Your options are:

1. Have different JARs for different image sizes. Obviously, you might need a lot of JARs! This is the popular approach for game developers.

2. Have all the different sizes of image in one JAR. Unless you only have a very small number of images, this is likely to result in a JAR that is too big - many devices have a limit to the size of JAR they can install.

3. Re-scale the images at run-time. There is no API method for doing this, so you'd need to write your own image scaling code. In general, the results are not likely to look very good.

4. Use vector images using the SVG API, which will re-scale quite nicely. However, not all device support the SVG API. Also, SVG might not be suitable for your artwork style.

For options (1) and (2), you need to be careful not to need images that match the screen size exactly. There is a huge number of screen sizes (once you look across manufacturers), some of which vary only slightly. For example, if you look at Canvas sizes (with setFullScreenMode(true)), there are Nokias with 176x208, Sony Ericssons with 176x220, and Motorolas with 176x204 or 176x205. That's just three manufacturers, all with the same screen width, but with four heights. Ideally, you want to use the same artwork on all these sizes. You need to consider that in designing your screen layouts. As I said, try to avoid needing images of exactly the screen size. Design the layout so it can cope with slight variations - for example, by painting a solid colour on the screen and centering an image on top.

Graham.

[jatin.kanand]

Hi Graham,
Thnx a million for your support. I think now i have a better idea about how different devices deal with images and what not to do to ruin the look and feel of the application .

Regards,
Jatin

[Infernal01]

1. Have different JARs for different image sizes. Obviously, you might need a lot of JARs! This is the popular approach for game developers.

Wow, this is the most popular approach ? How do game developers distribute a game this way ? Don't they end up creating a JAR for almost each phone model ?

jatin.kanand i'm using Graham's 3rd option. You can find some resizing methods on google.

[grahamhughes]

Wow, this is the most popular approach ? How do game developers distribute a game this way ? Don't they end up creating a JAR for almost each phone model ?

Any game from EA, Gameloft, Glu, Digital Chocolate, I-play, etc, will be constructed like this. Yes, they will have a large number of different JARs, just for one title. Not one for each model... Nokias, for example, support only 96x65, 128x128, 128x160, 176x208, 208x208, 240x320, 352x416 and 360x640. Eight sizes, even if you support every single one. And many of these are the same as, or sufficiently similar to, the sizes used by other manufacturers. (Oh, some of them work in both orientations, so you get 320x240 as well as 240x320 on the same device.) As I mentioned earlier, you'll use the same size artwork on screens that differ only slightly in size.

Add to that, differences in sound capabilities, heap sizes, JAR restrictions, performance, API availability and quality, and so on, and you can end up with a large number of distinct JARs for a global release of one title (say, 50 to 100).

Graham.

[Infernal01]

I didn't knew that, thanks.

[aj4mobile]

I agree with Graham's suggestions. And also, for image scaling operations the developer can use JSR 226: Scalable 2D Vector Graphics API on the devices it support.