CODEWITHSUNDEEP
javalayoutjavafx-2
NightRa
NightRa

Reputation: 11811

Absolute layout- centering of buttons

I'm working on a project, and I need to make two buttons absolutly centered on the scene. I haven't found any built in pane option to do the work, so I had to use alot of binding. The code for that is really long and I'm quite sure there is an easier way to do the job. Here is a demo: http://screencast.com/t/pvi5WLko

So what I want to know is, if there's an easy way to do the same thing and preferably with built in panes or something.

I want the buttons to be centered, no matter how the window is resized. Example:

enter image description here

Upvotes: 4

Views: 899

Answers (1)

sarcan
sarcan

Reputation: 3165

The probably easiest way would be to use a VBox:

public void start(final Stage stage) throws Exception {
    final Button button0 = new Button("Start learning");
    final Button button1 = new Button("Customize");

    final VBox box = new VBox();
    box.setFillWidth(true);

    box.getChildren().setAll(button0, button1);
    box.setAlignment(Pos.CENTER);

    stage.setScene(new Scene(box));
    stage.setWidth(200);
    stage.setHeight(100);
    stage.show();
}

Another possible way of doing this is with a GridPane:

public void start(final Stage stage) throws Exception {
  final Button button0 = new Button("Start learning");
  final Button button1 = new Button("Customize");

  final GridPane cPane = new GridPane();
  cPane.getChildren().addAll(button0, button1);
  GridPane.setConstraints(button0, 0, 0, 1, 1, HPos.CENTER, VPos.CENTER);
  GridPane.setConstraints(button1, 0, 1, 1, 1, HPos.CENTER, VPos.CENTER);

  final ColumnConstraints columnn0 = new ColumnConstraints();
  columnn0.setPercentWidth(100);
  cPane.getColumnConstraints().addAll(columnn0);

  final RowConstraints row0 = new RowConstraints(1);
  row0.setPercentHeight(50);

  final RowConstraints row1 = new RowConstraints(1);
  row1.setPercentHeight(50);

  cPane.getRowConstraints().addAll(row0, row1);

  stage.setScene(new Scene(cPane));
  stage.setWidth(200);
  stage.setHeight(100);
  stage.show();
}

The idea here would be to configure the rows and columns in the grid to fill your scene using the according constraints objects. The above defines one column and two rows. You can then align your components within the cells of the Grid, using GridPane.setConstraints(...).

You might want to alter the code slightly to have the top button align to VPos.BOTTOM and the lower one to VPos.TOP, depending on whether you want the buttons to stick together (you'll then have to define a margin for both, of course).

Upvotes: 1

Related Questions