2

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?

jewelsea
  • 150,031
  • 14
  • 366
  • 406
Javateer
  • 65
  • 6
  • Maybe use the [MaterialFX password field instead](https://github.com/palexdev/MaterialFX/blob/main/materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXPasswordField.java). – jewelsea Dec 01 '22 at 21:33
  • Note there were [bugs](https://bugs.openjdk.org/browse/JDK-8269026) in the display of the [JavaFX PasswordField bullet character rendering on android devices](https://stackoverflow.com/questions/68208352/passwordfield-bullets-are-not-showing-up-properly-in-android-app-built-using-g), that are fixed in recent releases (JavaFX 17+), so ensure you are using a recent JavaFX version. – jewelsea Dec 01 '22 at 22:55
  • The mask text is customizable by overriding [TextFieldSkinAndroid](https://github.com/openjdk/jfx/blob/fdc88341f1df8fb9c99356ada54b25124b77ea6e/modules/javafx.controls/src/android/java/javafx/scene/control/skin/TextFieldSkinAndroid.java#L78) maskText, or if the standard skin is used, overriding the same method in the [TextFieldSkin](https://github.com/openjdk/jfx/blob/0a785ae036f48c736b65df865a3b93f954d46fe5/modules/javafx.controls/src/main/java/javafx/scene/control/skin/TextFieldSkin.java#L675). – jewelsea Dec 01 '22 at 23:05
  • Similarly, MaterialFX provides a CSS stylable [hideCharacter](https://github.com/palexdev/MaterialFX/blob/main/materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXPasswordField.java#L304). I'm am little surprised the standard PasswordField doesn't allow the character to be as easily customized. – jewelsea Dec 01 '22 at 23:20

1 Answers1

2

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.

José Pereda
  • 44,311
  • 7
  • 104
  • 132
  • Perhaps using some way to set the hideCharacter to a large circle [U+2B24](https://www.htmlsymbols.xyz/unicode/U+2B24), might be an alternative. – jewelsea Dec 02 '22 at 23:47
  • 1
    @jewelsea, yes if that unicode works with Roboto fonts, that could work. However, the [bullet char](https://github.com/openjdk/jfx/commit/13cffbaad4068177d2d3239fa297302c3f94c217#diff-1aae808f38da2f99b6e1286c9a9189a92cd27c07274b7e8a60e7aee4fa7b9af4R43) used to mask the text is quite hidden in the Android skin class, so nothing to do unless we change its source code again... – José Pereda Dec 03 '22 at 01:18