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);
  }
}

ItachiUchiha · Accepted Answer · 2015-09-26T08:32:32.463

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);
    }
}

this works fine, but the overlay to show the gray i had to add the vbox in my layout because the one bx.setDisable(true); wont be enough to show the gray also i added the loading text using Text label = new Text("Loading... Please wait"); label.setBoundsType(TextBoundsType.VISUAL); label.setFill(Color.BLACK); — kinsley kajiva, Jul 17 '17 at 10:38
This would not work when you want some other work on button click. For example, `ProcessIndicator` should show on login button click and hide after user validation. Because it open only after current thread completion. — Abhendra Singh, May 18 '18 at 10:22

How to show ProgressIndicator in center of Pane in Javafx

1 Answers1

Linked