gluonmobile has font bug on android os

Question

I created a demo project on github.com to show this bug: https://github.com/ismlsmile/TestGluonMobile

The project is created by the template "Gluon Mobile - Single View Project", and I only modify the text in BasicView.java, to add some chinese characters:

1.Windows.png: It is ok on Windows

2.Android.png: Chinese character can not show on Android

It is likely that a font bug.

Answer 1

By default Gluon Mobile uses Roboto font, which doesn't include Chinese characters.

One easy way you can solve this issue is by setting any of the Android system fonts that do include them.

Using Font.getFamilies() on my Android device I discovered this one: Noto Sans CJK SC Regular. Probably you will have that too, or if not, another similar family.

So you can easily create a css file (src/main/resources/style.css) with this content:

.view {
    -fx-font-family: "Noto Sans CJK SC Regular";
}

and then load it in your view:

public BasicView(String name) {
    super(name);

    getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
    ...
}

That should work.

EDIT

In order to apply the font to the AppBar as well, the css has to be set to the Scene, as this control is not part of the view.

In the MobileApplication class:

@Override
public void postInit(Scene scene) {
    Swatch.BLUE.assignTo(scene);
    scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
}

Then you'll need to apply the font to the root, and all the different controls that make use of a different font, like the AppBar:

.root,
.app-bar > .title-box > .label {
    -fx-font-family: "Noto Sans CJK SC Regular";
}

Note that you can use ScenicView to find out about the style classes for those controls.