Swarm of XeBees

• Tweet
• Sharebar

• Tweet

One of the major challenge with Blackberry Application development is adding support for multiple screens with varying sizes and pixel density. Your application must scale up or down as per the screen resolution (width, height and pixel density). In order to do it right, you must ensure scaling up and down is handled correctly for all

in your application. In this article, we will focus primarily on Texts. So the problem statement for now is "How one can ensure all texts are scaled up correctly on multiple Blackberry devices?". I will share more information on Images and Layouts in future blogs.

Base Resolution
Well to start with, pick a base screen resolution and develop your application for that. Generally it is easier to scale up, so one should chose base resolution as 320x240_162 where width = 320, height = 240 and pixel density = 162.

Ui.UNITS_pt
Blackberry automatically scales fonts which are specified in points. So make sure, in your application, fonts for all texts are specified in points rather than pixels. Fonts specified in pixels may look smaller or larger depending on the pixel density of the device. However, those specified in points will appear almost similar on all devices.

For example you can set default font for your application by:

Font font = FontFamily.forName("BBGlobal Sans").getFont(Styles.APPLICATION_FONT_STYLE,
        Styles.APPLICATION_FONT_SIZE, Ui.UNITS_pt);
FontManager.getInstance().setApplicationFont(font);

where Styles is a custom class to consolidate all styles at one place. Similarily, you can change font of a RichTextField by:

titleRTF.setFont(Font.getDefault().derive(Styles.TITLE_FONT_STYLE,
        Styles.TITLE_FONT_SIZE, Ui.UNITS_pt));

Run-time Validation
Automatic scaling of fonts (specified in points) is good and will resolve most of the issues related to text scaling. However, still there might be some areas where scaling has not happened as desired. For example, on a specific device, there can be a button whose label is now getting truncated or at other place text has become larger then its specified container and does not fit in any more etc etc.

For such boundry cases, you can make a runtime check and adjust the font size accordingly, ofcourse, in agreement with UI Designer and the Product Owner. You can do that by:

ButtonField customButton = new ButtonField("Continue") {
        public int getPreferredWidth() {
                return Display.getWidth() / 4;
        }
};

Font customFont = Font.getDefault().derive(Styles.BUTTON_FONT_STYLE,
        Styles.BUTTON_FONT_SIZE, Ui.UNITS_pt);

LabelField validatorLF = new LabelField(customButton.getLabel());
validatorLF.setFont(customFont);

int contentWidth = validatorLF.getPreferredWidth();
int i = 1;
while(contentWidth > (customButton.getPreferredWidth() - Styles.CONTENT_PADDING_LEFT -
        Styles.CONTENT_PADDING_RIGHT)) {
                customFont = Font.getDefault().derive(Styles.BUTTON_FONT_STYLE,
                                Math.max((Styles.BUTTON_FONT_STYLE - i), 3), Ui.UNITS_pt);
                validatorLF.setFont(customFont);
                contentWidth = validatorLF.getPreferredWidth();
                i++;
}

customButton.setFont(customFont);

In the above example, we have a "Continue" button whose width is one-fourth of the screen width. For most of the devices "Continue" label scales correctly. However, on few devices, the label gets truncated.

So, what we are doing here is we are reducing the font size incrementally by 1 point until it fits perfectly well in the specified button size. We have also set the minimum font size to make sure it is readable. Kindly note, we have reduced the font size since we have fix container (Button) width (one-fourth of the screen size).

This trick comes quite handy when we have to adjust font by one or two points for few devices. In the follow-up blog, I will share my thoughts how we should handle challenges with images and layout scaling for multiple screens.

Filed under: Blackberry, Mobile, Mobile Apps