Distribute remaining space in GridPane or how to do it

Question

We need a solution for a 3 column layout with the following requirements:

• The middle column has a fixed size
• The middle column is centered in the parent
• The other two columns both share the remaining space
• The other two columns both have the same size

Let's say we have an amount of horizontal space of 440px and a middle column with a fixed size of 40px. The other two column should share the remaining 400px, so that each column has a width of 200px.

------------------------------------
|    200px    | 40px |    200px    |
------------------------------------

If the overall size changes, let's say to 500px, the width of the middle column should not change, but the others should.

----------------------------------------
|     230px     | 40px |     230px     |
----------------------------------------

If this is possible with a GridPane, please tell me how.

If this is not possible with a GridPane, I'm open for other suggestions.

I would prefer a solution with plain a) Java Code without FXML and b) JavaFx only, so extra libraries.

Answer 1

You just need three column constraints:

ColumnConstraints leftCol = new ColumnConstraints();
leftCol.setHgrow(Priority.ALWAYS);
ColumnConstraints middleCol = new ColumnConstraints(40);
ColumnConstraints rightCol = new ColumnConstraints();
rightCol.setHgrow(Priority.ALWAYS);

GridPane gridPane = new GridPane();
gridPane.getColumnConstraints().addAll(leftCol, middleCol, rightCol);

You can do the same in FXML if you prefer:

<GridPane>
  <columnConstraints>
    <ColumnConstraints hgrow="ALWAYS"/>
    <ColumnConstraints minWidth="40" prefWidth="40" maxWidth="40"/>
    <ColumnConstraints hgrow="ALWAYS"/>
  </columnConstraints>

  <!-- ... -->
</GridPane>

Here's a SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.stage.Stage;

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        ColumnConstraints leftCol = new ColumnConstraints();
        leftCol.setHgrow(Priority.ALWAYS);
        ColumnConstraints middleCol = new ColumnConstraints(40);
        ColumnConstraints rightCol = new ColumnConstraints();
        rightCol.setHgrow(Priority.ALWAYS);


        GridPane gridPane = new GridPane();
        gridPane.getColumnConstraints().addAll(leftCol, middleCol, rightCol);

        Region left = new Region();
        left.setMinHeight(80);
        left.setStyle("-fx-background-color: red;");

        Region middle = new Region();
        middle.setMinHeight(80);
        middle.setStyle("-fx-background-color: green ;");

        Region right = new Region();
        right.setMinHeight(80);
        right.setStyle("-fx-background-color: blue ;");

        gridPane.addRow(0, left, middle, right);

        Scene scene = new Scene(gridPane, 400, 80);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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