JavaFX Tutorial - JavaFX HBox

• « Previous
• Next »

JavaFX API has layout classes that display UI controls onto the scene graph.

The HBox layout class places JavaFX child nodes in a horizontal row. New child nodes are appended to the end on the right side.

By default, the HBox layout honors the child's preferred width and height.

When the parent node is not resizable, for example Group node, the HBox's row height is set to the greatest preferred height of the child node.

By default each child node aligns to the top-left (Pos.TOP_LEFT) position.

We can programmatically alter the HBox's layout constraints, such as border, padding, margin, spacing, and alignment.

When dealing with nonresizable child nodes such as Shape nodes, the parent takes into account the Shape's rectangular bounds (ParentInBounds), its width and height.

When dealing with resizable nodes such as a TextField control, the parent has compute the available space for the TextField to grow horizontally.

To grow UI controls horizontally within an HBox, use the static HBox.setHgrow() method.

Example

The following code sets a TextField control to grow horizontally when the parent HBox's width is resized:

TextField  myTextField = new TextField();
HBox.setHgrow(myTextField,  Priority.ALWAYS);

The full source code.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
/*from   w w w. j a  v  a  2s  . c o m*/
public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    TextField myTextField = new TextField();
    HBox hbox = new HBox();
    hbox.getChildren().add(myTextField);
    HBox.setHgrow(myTextField, Priority.ALWAYS);
    
    Scene scene = new Scene(hbox, 320, 112, Color.rgb(0, 0, 0, 0));
    primaryStage.setScene(scene);
    primaryStage.show();
  }

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

The code above generates the following result.

Example 2

The following code adds four rectangles to HBox, sets HBox constraints and demonstrate the many spacing attributes for the HBox layout control.

The rectangle node is not resizable.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
//  ww  w.  ja  v  a 2s  .c  om
public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250);
    // 5 pixels space between child nodes
    HBox hbox = new HBox(5);
    // 1 pixel padding between child nodes only
    hbox.setPadding(new Insets(1));
    Rectangle r1 = new Rectangle(10, 10);
    Rectangle r2 = new Rectangle(20, 100);
    Rectangle r3 = new Rectangle(50, 20);
    Rectangle r4 = new Rectangle(20, 50);

    HBox.setMargin(r1, new Insets(2, 2, 2, 2));

    hbox.getChildren().addAll(r1, r2, r3, r4);
    root.getChildren().add(hbox);

    primaryStage.setScene(scene);
    primaryStage.show();
  }
  public static void main(String[] args) {
    launch(args);
  }
}

The code above generates the following result.

Grow in HBox

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
//from  w w w . ja v a2 s  .com
public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("");
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250, Color.WHITE);

    HBox hbox = new HBox();
    Button button1 = new Button("Add               ");
    Button button2 = new Button("Remove   ");
    HBox.setHgrow(button1, Priority.ALWAYS);
    HBox.setHgrow(button2, Priority.ALWAYS);
    button1.setMaxWidth(Double.MAX_VALUE);
    button2.setMaxWidth(Double.MAX_VALUE);
    hbox.getChildren().addAll(button1, button2);
    
    root.getChildren().add(hbox);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

The code above generates the following result.

Set Preferred Width for HBox

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
/*from w w w .  j a v  a 2  s  .c  om*/
public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("");
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250, Color.WHITE);

    HBox hbox = new HBox();
    Button button1 = new Button("Add               ");
    Button button2 = new Button("Remove   ");
    HBox.setHgrow(button1, Priority.ALWAYS);
    HBox.setHgrow(button2, Priority.ALWAYS);
    button1.setMaxWidth(Double.MAX_VALUE);
    button2.setMaxWidth(Double.MAX_VALUE);
    hbox.getChildren().addAll(button1, button2);
    
    hbox.setPrefWidth(400);
    
    root.getChildren().add(hbox);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

The code above generates the following result.

Set space between controls for HBox

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
/*  ww w  .j a va2  s  . c om*/
public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("");
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250, Color.WHITE);

    HBox hbox = new HBox(8);//space
    Button button1 = new Button("Add               ");
    Button button2 = new Button("Remove   ");
    HBox.setHgrow(button1, Priority.ALWAYS);
    HBox.setHgrow(button2, Priority.ALWAYS);
    button1.setMaxWidth(Double.MAX_VALUE);
    button2.setMaxWidth(Double.MAX_VALUE);
    hbox.getChildren().addAll(button1, button2);
    
    hbox.setPrefWidth(400);
    
    root.getChildren().add(hbox);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

The code above generates the following result.

Set Padding and Spacing for HBox

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/*w  ww.ja v  a  2s.  c  o  m*/
public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("HBox Test");

    // HBox
    HBox hb = new HBox();
    hb.setPadding(new Insets(15, 12, 15, 12));
    hb.setSpacing(10);

    // Buttons
    Button btn1 = new Button();
    btn1.setText("Button1");
    hb.getChildren().add(btn1);

    Button btn2 = new Button();
    btn2.setText("Button2");
    hb.getChildren().add(btn2);

    Button btn3 = new Button();
    btn3.setText("Button3");
    hb.getChildren().add(btn3);

    Button btn4 = new Button();
    btn4.setText("Button4");
    hb.getChildren().add(btn4);

    // Adding HBox to the scene
    Scene scene = new Scene(hb);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

The code above generates the following result.

• Next »
• « Previous