How to show ProgressIndicator in center of Pane in Javafx

Question

I have a Pane with some controls and a button. When I click on the button, I want show ProgressIndicator in center of pane without removing any controls.

When I am adding a ProgressIndicator to pane during onAction of button, it adds it below the button. I want it to overlay on the pane.

The picture below explains what I want.

Code

package fx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

@Override
public void start(Stage arg0) throws Exception {
    final VBox bx = new VBox();
    bx.setAlignment(Pos.CENTER);
    TextField userName = new TextField("User Name");
    userName.setMaxWidth(200);
    TextField email = new TextField("Email");
    email.setMaxWidth(200);
    Button submit = new Button("Submit");
    submit.setOnAction(new EventHandler<ActionEvent>() {

        public void handle(ActionEvent event) {
            ProgressIndicator pi = new ProgressIndicator();
            //adding here but it is adding at below of button
            //how to do here
            bx.getChildren().add(pi);
            //Further process
          }
    });
    bx.getChildren().addAll(userName, email, submit);
    Scene c = new Scene(bx);
    arg0.setScene(c);
    arg0.setMinWidth(500);
    arg0.setMinHeight(500);
    arg0.show();
  }

  public static void main(String[] args) {
     Main h = new Main();
     h.launch(args);
  }
}

Answer 1

You need to use a StackPane as your root layout instead of using a VBox. StackPane allows you to stack nodes on top of each other (z-order).

On the button's action you can create a new ProgressIndicator and add it to your StackPane. I have introduced another VBox as the parent to the indicator, because I did not want the indicator to capture all the available space. You can disable the already present VBox to get the greying effect on button's action after the process is done you can enable the VBox again.

---

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage arg0) throws Exception {
        StackPane root = new StackPane();
        VBox bx = new VBox();
        bx.setAlignment(Pos.CENTER);
        TextField userName = new TextField("User Name");
        userName.setMaxWidth(200);
        TextField email = new TextField("Email");
        email.setMaxWidth(200);
        Button submit = new Button("Submit");
        submit.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {
                ProgressIndicator pi = new ProgressIndicator();
                VBox box = new VBox(pi);
                box.setAlignment(Pos.CENTER);
                // Grey Background
                bx.setDisable(true);
                root.getChildren().add(box);
            }
        });
        bx.getChildren().addAll(userName, email, submit);
        root.getChildren().add(bx);
        Scene c = new Scene(root);
        arg0.setScene(c);
        arg0.setMinWidth(500);
        arg0.setMinHeight(500);
        arg0.show();
    }

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