Scaling and positioning graphics

The screen size of touch and type devices is 240 x 320 pixels and the aspect ratio is 3:4. The screen size of a full-touch device is 240 x 400 pixels and the aspect ratio is 3:5. If absolute values have been used for defining the dimensions of the UI components, they may not scale properly.

Even though the width remains the same, the height in canvas full screen mode changes from 320 pixels in touch and type to 400 pixels in full touch. When not in full screen mode, the height changes from 240 pixels in touch and type to 342 pixels in full touch.

As a result, if absolute values are used for drawing a string in the middle of the screen, it will not be on full touch. Also, some components might be hidden because the Y coordinate of their anchor point might fall outside the visible canvas due to the additional reduction by 200 pixels on the height of the canvas due to the appearance of the virtual keyboard.

To avoid this, place the UI components relative to the width and height of the screen and scale the UI accordingly instead of using the absolute values.

The following code draws two strings in the middle of the screen (in terms of X and Y axis) when not in full screen mode on full touch devices. One string uses absolute values, another uses relative values. The strings are on top of each other, when the Canvas is not in full screen mode. When Canvas is in full screen mode, string with absolute values is not vertically centered any more.

    public void paint(Graphics g) {
        int width = getWidth();
        int height = getHeight();      
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, width, height);
        g.setColor(0x000000);
        g.drawLine(0, height/2, width, height/2);
        g.drawLine(width/2, 0, width/2, height);
        g.setColor(0xFF0000);
        g.drawString("Absolute String", 120, 161, Graphics.TOP | Graphics.HCENTER); // NOT LIKE THIS!
        g.setColor(0x00FF00);
        g.drawString("Relative String", getWidth() / 2, (getHeight() / 2) - (font.getHeight() / 2), Graphics.TOP | Graphics.HCENTER); 
    }

String drawn using relative and absolute values overlap when the canvas is not in full screen mode	“Relative” string drawn is repainted automatically to the middle of the screen even when the virtual keyboard is on while the “Absolute” string does not get redrawn and the virtual keyboard hides the string.	In full screen mode, string drawn using relative value is centered vertically, while the string drawn using absolute value does not.

There is no method for scaling graphics in MIDP or in any standard Java ME APIs. Images should be either scaled for each screen size by using an image processing application or by having method for scaling images. Supporting several resolutions and including the needed images in the JAR file can increase JAR file size significantly.