JavaFX 2.0 Layout Panes - Sizing Buttons equally inside a VBox or HBox

When you have multiple buttons in a VBox or a HBox you often want to size and align them equally. The default preferred width of a button is computed based on its content (which includes the text as well as possible graphics) and the default preferred size of a VBox and a HBox is based on the biggest of their children.

If you want your buttons to grow with their parent you either have to raise their max size manually or to set it to the constant Double.MAX_VALUE which forces controls to grow as big as permitted by their parent.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 * 
 * Created on: 20.03.2012
 * @author Sebastian Damm
 */
public class SizingButtonsEqually  extends Application
{
    @Override
    public void start(Stage primaryStage) throws Exception
    {                
        VBox root = new VBox(30);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);
        
        HBox hbox = new HBox(30);
        hbox.setAlignment(Pos.CENTER);
        
        VBox vbox = new VBox(10);
        vbox.setMaxWidth(200);
        vbox.setStyle("-fx-border-style: solid;"
                + "-fx-border-width: 1;"
                + "-fx-border-color: black");
        
        VBox vbox2 = new VBox(10);
        vbox2.setMaxWidth(200);
        vbox2.setStyle("-fx-border-style: solid;"
                + "-fx-border-width: 1;"
                + "-fx-border-color: black");
        
        Button bt1 = new Button("1");  
        Button bt2 = new Button("I am Button!"); // got it? ;)
        Button bt3 = new Button("I am a veeeeeeeery long button");
        
        Button bt4 = new Button("1");  
        bt4.setMaxWidth(Double.MAX_VALUE);
        Button bt5 = new Button("I am Button!");
        bt5.setMaxWidth(Double.MAX_VALUE);
        Button bt6 = new Button("I am a veeeeeeeery long button");
        bt6.setMaxWidth(Double.MAX_VALUE);
        
        vbox.getChildren().addAll(bt1, bt2, bt3);
        vbox2.getChildren().addAll(bt4, bt5, bt6);
        hbox.getChildren().addAll(vbox, vbox2);
        
        HBox hbox2 = new HBox(20);
        hbox2.setStyle("-fx-border-style: solid;"
                + "-fx-border-width: 1;"
                + "-fx-border-color: black");
        hbox2.setAlignment(Pos.CENTER);
        hbox2.setPrefHeight(50);
        VBox.setVgrow(hbox2, Priority.ALWAYS);
        
        for (int i = 0; i < 10; i++)
        {
            Button bt = new Button(String.valueOf(i));
            bt.setMaxHeight(Double.MAX_VALUE);            
            hbox2.getChildren().add(bt);
        }
        
        root.getChildren().addAll(hbox, hbox2);
        Scene scene = new Scene(root, 500, 250); 
        
        primaryStage.setTitle("Sizing Buttons equally inside a VBox or HBox");
        primaryStage.setScene(scene);
        primaryStage.show();        
    }

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

This code should´nt include anything that you haven´t seen already and your application should look like this:

I chose again to give the Boxes a border to demonstrate their size and how they grow. If you resize the window you can see that the lower HBox grows vertically with the window and that all children buttons inside the HBox grow equally and use all the available space (because they could grow to Double.MAX_VALUE theoretically).

Another way to size and align your button equally is to use a TilePane. Please see the 2nd example in my post FlowPane and TilePane for a example on this.