JavaFX: Combine VBox and HBoxes

We can use HBox and VBox layouts together. In this example, I am going to show a VBox which holds 3 HBox layouts like below.

 

 

hBoxVBox.fxml

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.effect.*?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.layout.controller.HBoxVBoxController"
	fx:id="vBox1" spacing="20" alignment="center">
	
	<HBox fx:id="hBox1" spacing="20" alignment="center">

		<Rectangle fx:id="rectangle1" 
			fill="salmon"
			width="50" height="50" 
		 />
		 
		 <Rectangle fx:id="rectangle2" 
			fill="lightgreen"
			width="50" height="50" 
		 />
		 
		 
		 <Rectangle fx:id="rectangle3" 
			fill="lightblue"
			width="50" height="50" 
		 />
		
	</HBox>


	<HBox fx:id="hBox2" spacing="20" alignment="center">
		<Ellipse fx:id="ellipse1" 
			radiusX ="100" radiusY="50" 
			fill="salmon"/>
			
		<Ellipse fx:id="ellipse2" 
			radiusX ="100" radiusY="50" 
			fill="lightgreen"/>
			
		<Ellipse fx:id="ellipse3" 
			radiusX ="100" radiusY="50" 
			fill="lightblue"/>
			
	</HBox>
	
	
	<HBox fx:id="hBox3" spacing="20" alignment="center">

		<Circle fx:id="circle1" 
			radius="50" 
			fill="salmon"/>
		 
		<Circle fx:id="circle2" 
			radius="50" 
			fill="lightgreen"/>
		 
		 <Circle fx:id="circle3" 
			radius="50" 
			fill="lightblue"/>
		
	</HBox>
	
	
</VBox>

HBoxVBoxController.java

package com.sample.app.layout.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;

public class HBoxVBoxController implements Initializable {

	@FXML
	private VBox vBox1;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
		DropShadow dropShadow = new DropShadow();
		dropShadow.setOffsetX(5);
		dropShadow.setOffsetY(5);
		dropShadow.setColor(Color.GRAY);

		vBox1.setEffect(dropShadow);
	}

}

HBoxVBoxDemo.java

package com.sample.app.layout;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class HBoxVBoxDemo extends Application {

	private static final String FXML_FILE = "/hBoxVBox.fxml";
	private static final String STAGE_TITLE = "HBox and VBox demo";

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

	}

	@Override
	public void start(Stage primaryStage) throws Exception {

		Parent root = (Parent) FXMLLoader.load(this.getClass().getResource(FXML_FILE));

		Scene scene = new Scene(root, 800, 500, Color.WHITE);

		primaryStage.setTitle(STAGE_TITLE);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

Output

Previous                                                    Next                                                    Home