Gluon AppBar keep in the view

Question

I'm trying to build a message window with App Bar on the top

This screen consist of Gluon App Bar on the top and VBox in bottom which has rest of the element shown in the screen.

Issue is when i click on the text area to enter text the App Bar goes out of scope.

Is there a way I can set App Bar to be always on top?

Answer 1

If you are deploying your app on Android, the TextField and TextArea controls include a built-in check: when those input controls get focused, if required the scene is moved up to prevent the software keyboard from hiding the control.

These translation affects the whole scene, so all the nodes in it (View, VBox, TextField, TextArea, AppBar, ...), will be translated as well.

So if you want to keep the AppBar node always visible and in the same top position, a possible fix could be counteracting that translation whenever it happens.

If you have a BasicView for instance (Gluon IDE plugin -> single view project), with a TextField control at the bottom of the view:

public BasicView() {

    Label label = new Label("Hello JavaFX World!");

    Button button = new Button("Change the World!");
    button.setGraphic(new Icon(MaterialDesignIcon.LANGUAGE));
    button.setOnAction(e -> label.setText("Hello JavaFX Universe!"));

    VBox controls = new VBox(15.0, label, button, new TextField());
    controls.setAlignment(Pos.BOTTOM_CENTER);
    controls.setPadding(new Insets(20));

    setCenter(controls);
}

you can modify it like this:

public BasicView() {

    ...

    setOnShown(e -> {
        MobileApplication.getInstance().getAppBar().translateYProperty()
                .bind(controls.getScene().getRoot().translateYProperty().multiply(-1));
    });
}

Make sure that the view is already added to the scene when you add this binding (to prevent a NPE).

Now when the textfield gets the focus, the whole scene will be moved up, and the appBar will be moved down the same amount: