Show / Hide a Node within a stage

Question

I am aware that there are already answers for this question but somehow, it was not able to solve my problem.

When I click the textfield in IMAGE1, I want the keyboa

Answer 1

I am experimenting with something similar, here is what I came up with (one of many possible solutions):

You need to wrap your main layout (IMAGE1) in a StackPane. Its usage is to overlay what needs be overlaid (the keyboard in your case). The keyboard is placed in another pane (a VBox in the following example). The VBox:

• is placed in the StackPane after the main layout to sit on top of it
• is given a maximum height, so that it doesn't fill the entire window
• is given a translateY equal to the height
• and bottom alignment

The relevant code n FXML:

This will always be outside of the view. Toggling the keyboard requires 2 TranslateTransitions (can it be done with 1, I wonder?), one to move the keyboard up, one down.

The example code:

1) Java:

import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Test1 extends Application
{
    @FXML private VBox statusContainer;

    private TranslateTransition showStatus;
    private TranslateTransition hideStatus;
    boolean showsStatus = false;

    @Override
    public void start(Stage primaryStage) {
        try {
            StackPane page = (StackPane) FXMLLoader.load(this.getClass().getResource("test1.fxml"));
            Scene scene = new Scene(page);

            primaryStage.setTitle(this.getClass().getName());
            primaryStage.setScene(scene);
            primaryStage.sizeToScene();
            primaryStage.show();
        }
        catch (IOException e) {
            Logger.getLogger(this.getClass().getName()).log(Level.SEVERE, null, e);
        }
    }

    @FXML void initialize() {
        showStatus = new TranslateTransition(Duration.millis(250), statusContainer);
        showStatus.setByY(-100.0);
        showStatus.setOnFinished(new EventHandler() {
            @Override public void handle(ActionEvent event) {
                showsStatus = true;
            }
        });
        hideStatus = new TranslateTransition(Duration.millis(250), statusContainer);
        hideStatus.setByY(100.0);
        hideStatus.setOnFinished(new EventHandler() {
            @Override public void handle(ActionEvent event) {
                showsStatus = false;
            }
        });
    }

    public void toggleStatus() {
        if( showsStatus ) {
            showStatus.stop();
            hideStatus.play();
        }
        else {
            hideStatus.stop();
            showStatus.play();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

2) FXML (call it test1.fxml to match the code):

3) The CSS for the VBox to stand out (call it test1.css):

#statusContainer {
    -fx-background-color: -fx-color;
}