Use a Grid Layout Manager

A grid layout manager is a container that lets you lay out UI components in rows and columns. Create a grid layout manager for your app using the uigridlayout function, and parent the grid layout manager to the main figure window. You can manage the size and configuration of the grid by setting properties of the GridLayout object. Add components to the grid by parenting them to the grid layout manager, and specify the row and column of each component by setting its Layout property.

For example, use a grid layout manager to lay out an app that contains a button, a spinner, and a text area. Give the button a fixed size, but let the other components stretch to fill the extra horizontal space. Also, center the components vertically by adding empty rows above and below them that can expand to fill the extra vertical space.

To accomplish this, create a grid with four rows and two columns by passing [4 2] as the second input to uigridlayout.

fig = uifigure;
fig.Position(3:4) = [300 300];
gl = uigridlayout(fig,[4 2]);

Then, create the UI components and parent them to the grid layout manager. Lay out the components using the Layout.Row and Layout.Column properties.

Position the button and the spinner next to each other by adding them to the second row.

btn = uibutton(gl);
btn.Layout.Row = 2;
btn.Layout.Column = 1;

spn = uispinner(gl);
spn.Layout.Row = 2;
spn.Layout.Column = 2;

Position the text area underneath by adding it to the third row. Lay out the text area to span both the first and second column of the grid by setting its Layout.Column property to [1 2].

ta = uitextarea(gl);
ta.Layout.Row = 3;
ta.Layout.Column = [1 2];

When you create a grid layout manager, by default, each row has the same height and each column has the same width. Resize and reposition the UI components by setting the RowHeight and ColumnWidth properties of the grid layout manager.

Set the height of the second row to automatically scale to fit its contents, and the height of the third row to be fixed at 100 pixels. Set the heights of the first and fourth rows to '1x'. This specifies that the top and bottom rows have the same height and expand to fill the remaining vertical space, which ensures the components are centered in the figure window.

gl.RowHeight = {'1x','fit',100,'1x'};

Set the width of the first column to automatically scale to fit its contents. This resizes the width of the button to fit the length of its text. Set the width of the second column to '1x' to fill the remaining horizontal space.

gl.ColumnWidth = {'fit','1x'};

An additional benefit of using a grid layout manager is that you can use the ColumnWidth and RowHeight properties to manage how the UI components in your app resize when the app user resizes the figure window. For more information, see Manage App Resize Behavior Programmatically.

Specify the Position Property

Alternatively, you can manually position the UI components in you app. Every UI component has a Position property. Use this property to control the size and location of the component in the figure window. Specify the value of Position as a four-element vector of the form [left bottom width height].

For example, use the Position property to lay out an app that contains a button, a spinner, and a text area. Align the button and the spinner horizontally by specifying that they have the same distance from the bottom edge of the figure and the same height. Position the text area below the button and slider, and set its width to span the width the two components above.

fig = uifigure;
fig.Position(3:4) = [300 300];

btn = uibutton(fig);
btn.Position = [10 195 45 22];

spn = uispinner(fig);
spn.Position = [65 195 225 22];

ta = uitextarea(fig);
ta.Position = [10 85 280 100];

The position of a UI component is calculated relative to the immediate parent of the component. For instance, if you create a label inside a panel, the values of left and bottom in the position vector of the Label object indicate the distance from the left and bottom edges of the panel, not the figure window.