Styling layout in Codenameone for phone and tablet

Question

I completed the development of my app, using a layout of form components that perfectly suited the iphone 6 in the simulator. I used a combination of Theme styles (always Base Resource) and some coded tweaks to the look and feel.

When i ran this up against the iphone 5 i had expected naively the display to shrink to fit, as you may expect with browser applications, but instead my components (labels largely) went off the edge of their containers. Panic.

I ended up having to measure the display height and judge the device from there and code up different sized components to get the right fit. This took some time.

Next to TestFlight in the AppStore. As part of wider testing I decided to install on my iPad 3, only to find the layout components rendered all very small. Panic.

I have now spent a couple of days resolving this just about. I basically use this method to determine the type of device 'category' to then apply the size of font or fontimage etc.

public static ScreenSizeEnum getScreenSize() {
    if (Display.getInstance().isTablet() && Display.getInstance().getDisplayHeight() > 2000) {
        return ScreenSizeEnum.TABLET;
    }
    else if (Display.getInstance().getDisplayHeight() < 950) {
        return ScreenSizeEnum.SMALL;
    } else if (Display.getInstance().getDisplayHeight() > 949 && Display.getInstance().getDisplayHeight() < 1200) {
        return ScreenSizeEnum.MEDIUM;
    } else {
        return ScreenSizeEnum.LARGE;
    }
}

This is unsurprisingly not foolproof. The Ipad 6 plus is not recognised as a tablet but has a large display height, but one of the Nexus's are a tablet but has a small display height.

My question is, how on earth do you get around this problem?

Tablets and phones come in different sizes but its important that you still get a quality component render regardless of form factor. The CN1 KitchenSink demo didn't really address it. Many thanks in advance.

Answer 1

From the description of the issue it seems you are thinking about a tablet as a "large phone" which is the wrong way to look at it. A tablet has similar density to a phone but more real-estate in inches which means you need to design your app so it will use up the additional space more effectively.

Here are two screenshots of the same Kitchen Sink demo one running in an iPad and the other running in an iPhone. Notice the UI's look very differently as we adapted the UI to use up the additional space. Image's (e.g. multi-images) and fonts are determined by density not by the amount of pixels as the goal is to use the extra space not to fill up the screen with larger images/text.