# Layout manager

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/Layout_manager
> Markdown URL: https://mediated.wiki/source/Layout_manager.md
> Source: https://en.wikipedia.org/wiki/Layout_manager
> Source revision: 1304969861
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

**Layout managers** are [software components](/source/Software_component) used in [widget toolkits](/source/Widget_toolkit) which have the ability to lay out [graphical control elements](/source/Graphical_control_element) by their relative positions without using distance units. It is often more natural to define component layouts in this manner than to define their position in [pixels](/source/Pixel) or common distance units, so a number of popular [widget toolkits](/source/Widget_toolkit) include this ability by default. Widget toolkits that provide this function can generally be classified into two groups:

- Those where the layout behavior is coded in special [graphic containers](/source/Container_(data_structure)#Graphic_containers). This is the case in [XUL](/source/XUL) and the [.NET Framework](/source/.NET_Framework) widget toolkit (both in [Windows Forms](/source/Windows_Forms) and in [XAML](/source/XAML)).

- Those where the layout behavior is coded in layout managers, that can be applied to any graphic container. This is the case in the [Swing](/source/Swing_(Java)) widget toolkit that is part of the [Java API](/source/Java_Class_Library).

## Examples

[Android](/source/Android_(operating_system)) have the ConstraintLayout.[1]

[GTK](/source/GTK) have the Box[2] and Grid[3] classes.

### XUL

In [XUL](/source/XUL), like the [vbox](https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model) [Archived](https://web.archive.org/web/20120224235530/https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model) 2012-02-24 at the [Wayback Machine](/source/Wayback_Machine) container to stack components on top of each other.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="vbox example" title="Example"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
  <button id="yes" label="Yes"/>
  <button id="no" label="No"/>
  <button id="maybe" label="Maybe"/>
</vbox>

</window>

This piece of code shows 3 buttons stacked on top of each other in a vertical box.

### XAML

The [DockPanel](http://msdn2.microsoft.com/en-us/library/system.windows.controls.dockpanel.aspx) container lays out children components according to their *Dock* properties.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      WindowTitle="myDock Panel">
  <DockPanel>
      <TextBlock DockPanel.Dock="Top">Top 1</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 2</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 3</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 4</TextBlock>
  </DockPanel>
</Page>

This code shows 4 text blocks on top of each other.

### Java

The **[FlowLayout](https://docs.oracle.com/en/java/javase/24/docs/api/java.desktop/java/awt/FlowLayout.html)** layout manager arranges components in a directional flow, much like lines of text in a paragraph. It arranges components horizontally until no more components fit on the same line, then it places them on another line. Other layout managers are GridLayout managers which arrange the components in grid form and BorderLayout managers which also arranges the component in five parts of the frame, thus: south, north, west, east and center.

import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.FlowLayout;
import java.awt.Container;

public class Example {
    private JFrame frame;

    public Example() {
        frame = new JFrame("FlowLayout Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new FlowLayout());
        frame.add((new JButton("Button 1")));
        frame.add((new JButton("Button 2")));
        frame.add((new JButton("Button 3")));
        frame.add((new JButton("Long-Named Button 4")));
        frame.add((new JButton("5")));
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        Example ex = new Example();
    }
}

This code shows 5 buttons alongside each other on the same line:

## References

1. **[^](#cite_ref-1)** ["Build a responsive UI with ConstraintLayout | Views"](https://developer.android.com/develop/ui/views/layout/constraint-layout). *Android Developers*. Google. Retrieved 17 December 2024.

1. **[^](#cite_ref-2)** ["Gtk.Box"](https://docs.gtk.org/gtk4/class.Box.html). *docs.gtk.org*. Retrieved 17 December 2024.

1. **[^](#cite_ref-3)** ["Gtk.Grid"](https://docs.gtk.org/gtk4/class.Grid.html). *docs.gtk.org*. Retrieved 17 December 2024.

## External links

- [Layout tutorial on Oracle website](http://java.sun.com/docs/books/tutorial/uiswing/layout/index.html)

- [Layout Manager Showdown on java.net](https://web.archive.org/web/20071010021740/http://wiki.java.net/bin/view/Javadesktop/LayoutManagerShowdown)

v t e Graphical control elements Command input Adjustment handle Button Context menu Drop-down list Hamburger button Menu Pie menu Data input-output Checkbox Color picker Combo box Cycle button Date picker Grid view Toggle switch List box List builder Radio button Scrollbar Search box Slider Spinner Text box Informational Balloon help Head-up display in computing HUD in video games Icon Infobar Label Loading screen Progress indicator Progress bar Splash screen Throbber Sidebar Status bar Toast Tooltip Containers Accordion Tree view Client-side decoration Disclosure widget Frame / Fieldset Menu bar Panel Popover Ribbon Tab Toolbar Window Window decoration Workspace Navigational Address bar Bookmarks bar Breadcrumb navigation Hyperlink Navigation bar Virtual desktop Special windows Alert dialog box Dialog box File dialog Inspector window Modal window Palette window Related concepts File viewer List of graphical user interface elements Layout manager Look and feel Mouseover Scrolling Widget toolkit WIMP Zoomable user interface

---
Adapted from the Wikipedia article [Layout manager](https://en.wikipedia.org/wiki/Layout_manager) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/Layout_manager?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.