Codename One: User interface layout on simulator and a real Android device are complete different

Question

Well, it is the first time I tested my app on a real Android device. The user interface layout is shockingly different from the simulator. Please see images:

The code are the same and nothing had been modified.

Android version is 5.1.1.

The code to display the screen is:

    private final void show() {
    loginSignupForm = new Form(null, new BorderLayout());
    Tabs loginSignupTabs = new Tabs();
    Image splashScreenImage = theme.getImage("Starlent_logo25x25.png");
    ((Label) loginSignupForm.getToolbar().getTitleComponent()).setIcon(splashScreenImage);
    Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
    prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
    prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
    loginSignupForm.add(BorderLayout.CENTER, loginSignupTabs);
    loginSignupForm.show();
}

So, how do I manage or expect the layout to be in different devices?

At the very least, I hope to have the logo placed in the center of the Android device. How do I do that?

Answer 1

You are using the native theme, if you install an Android skin you will see that the theme behaves that way on the simulator too as this is intentional.

Your theme and code can override platform specific behavior to produce identical results e.g. override tab placement etc. The app won't feel as native on Android though if the tabs are on the bottom.