Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

BoxLayout – Vertical & Horizontal

1. About BoxLayout

In Java Swing, the API offers a new layout called BoxLayout. This layout will help in forming the controls either vertically or horizontally. Unlike FlowLayout, this Layout grows in a distinct direction. Say, for example, we have a box layout to lay out controls vertically. For each newly added control, the layout grows vertically. While creating the BoxLayout, we can fix the direction is vertical and horizontal.

Have a look at the below picture:

Box Layout Horizontal, Vertical
Box Layout Horizontal, Vertical

Here, one can see two sets of JButton controls. One is packed in a single column and our example packs the other one in a single row. The Gray border is the BoxLayout, and the layout grows when a new control comes into the layout. In a vertical pack, the layout grows vertically and in the horizontal pack; the layout grows width-wise.

2. About BoxLayout Example

The below picture shows the example we will make here below:

Java Swing BoxLayout Example
Java Swing BoxLayout Example

In our example, we have a JFrame window. A FlowLayout Manager takes care of laying out the controls. We have three JPanels. JFrame’s FlowLayout Manager packs the JPanels and in our above screenshot, we have ample space to layout all three JPanels in a single row. First JPanel on the left and third JPanel on the Right, both are taken over by two BoxLayout managers. Both these panel pack the controls vertically. The Layout in the middle packs two JTextArea controls and this panel packs the TextArea horizontally. Note, there is JSeparator which divides both these JTextArea, and the separator run vertical.

The below video explains the basics of BoxLayout & the example we will create in the coming sections:

Basics of Boxlayout & the Example

3. Vertical BoxLayout

First, we create two JPanel objects. At line 3 and 13, we set BoxLayout for both JPanel controls by calling its setLayout method. We pass a instance to this method. Constructor is taking the JPanel instance as the first Param. In both the code snippets, the Box Layout was informed to arrange the controls vertically. By looking at the code, you can see each of the JPanels are taking three JButton objects and the BoxLayout will arrange the JButton controls on top of each other as we pass the constant Y_AXIS.

4. Horizontal BoxLayout

Here, we create our JTextArea controls. The text area control must run side-by-side and hence we create a Box Layout with X-axis orientation at line no 3. To provide scrolling support for the JTextArea, we use the JScrollPane instance. Also note the usage of the JSeparator which we house in between the two JTextArea objects. Finally, the code below adds all three components to this BoxLayout managed middle panel.

5. Add all JPanels to JFrame

Now, we have three BoxLayout Managed JPanels in hand. It is time to add these to the JFrame Window. Recall, the JFrame is using a FlowLayout manager, and the FlowLayout treats all these 3 JPanels as a component and packs them in a row. When there is no room for a JPanel, the FlowLayout will move JPanel to the next line, but the BoxLayout keeps together the controls inside the JPanel. Note the order in which we add our JPanels. Below is the code:

The below picture shows how the FlowLayout of JFrame packs the JPanel and how the BoxLayout keeps the controls together in X-Axis/Y-Axis while user resizing the JFrame:

FlowLayout & BoxLayout
FlowLayout & BoxLayout

6. Youtube – Code Implementation and Demo

Code Implementation and Demo

7. Code Reference



Categories: Swing

Tags: , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.