Scaling and positioning graphics

The screen size in Nokia Asha software platform is 240 x 320 pixels and the aspect ratio is 3:4. The screen size in Series 40 full touch 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 400 pixels in Series 40 full touch to 320 pixels in Nokia Asha software platform. When not in full screen mode, the height changes from 342 pixels in Series 40 full touch to 262 pixels in Nokia Asha software platform.

As a result, if absolute values are used for drawing a string vertically in the middle of the screen, it will not be in the middle on Series 40 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 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 in full screen mode (with status bar) on Nokia Asha software platform. One string uses absolute values, another uses relative values. The strings are on top of each other, when the Canvas is in full screen mode (with status bar). When the virtual keyboard is on, the “Absolute” string does not get redrawn and is hidden.

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);
    // Absolute values are used to draw the string, this is not recommended.
    g.drawString("Absolute String", 120, 151-(font.getHeight()/2), Graphics.TOP | Graphics.HCENTER);
    g.setColor(0x00FF00);
    // Relative values are used to draw the string, this is recommended.
    g.drawString("Relative String", getWidth() / 2, (getHeight() / 2) - (font.getHeight() / 2), Graphics.TOP | Graphics.HCENTER);
}

The string drawn using relative and absolute values overlap when the Canvas is in full screen mode (with status bar). The “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.