This JavaFX control doesn't seem to have a GluonFX equivalent for the mobile device environment. On the desktop, the circle char that masks user input looks fine. But on the Android the same char is as small as tapping paper with the tip of an ink pen.
I've tried
.password-field .text {
-fx-font-size: 15;
}
and
passwordField.setFont(new Font(15));
but neither seem to change it. Is this just how it is for now? No way to make those black circles look bigger on the phone to the User?
This doesn't work:
.password-field .text {
-fx-font-size: 15;
}
because the inner Text node has its font property bound to the TextField/PasswordField control, and when the latter is set, it overrules it.
However, as you mentioned, this doesn't work either:
passwordField.setFont(new Font(15));
If you use Gluon Mobile, the glisten.css stylesheet applies the Roboto font, and the password field gets Roboto, regular, 13.3pt.
You can verify this by adding a listener:
passworldField.fontProperty().addListener((obs, ov, nv) -> System.out.println("Font: " + nv));
which results in something like:
Font: Font[name=System Regular, family=System, style=Regular, size=15.0]
Font: Font[name=System Regular, family=System, style=Regular, size=13.300000190734863]
Font: Font[name=Roboto, family=Roboto, style=Regular, size=13.300000190734863]
So it ends up using the usual "small" font.
But this works:
.password-field {
-fx-font-size: 15pt;
}
as it is applied after the Roboto font is set (your css stylesheet is applied at the end).
Font: Font[name=System Regular, family=System, style=Regular, size=15.0]
...
Font: Font[name=Roboto, family=Roboto, style=Regular, size=19.999999523162843]
(Note that on Android there is some font scaling applied as well).
If the bullet symbol is still too small, you can use a bigger font size.
See https://www.htmlsymbols.xyz/unicode/U+2022): Only with 28+ you will get a more visible symbol.
The only caveat of using large font sizes is that the caret gets too tall.