Use a Grid Layout Manager

A grid layout manager is a container that allows you to lay out UI components in a grid. You can configure grid layout managers to specify the initial layout and resize behavior of the components in the grid.

Create a grid layout manager in a UI figure window by calling the uigridlayout function and specifying the figure as the first argument. Set the RowHeight and ColumnWidth properties of the grid layout manager to specify how each row and column behaves when the app user resizes the figure window. Specify RowHeight and ColumnWidth as a cell array with one value for each row or column. There are three different types of row heights and column widths:

For example, this code creates a grid layout manager with four rows. The height of the first row is sized to fit its content, the second row is fixed at 200 pixels, and the last two rows share the remaining vertical space unequally. The third row uses twice as much space as the fourth row.

fig = uifigure;
gl = uigridlayout(fig,[4 1]);
gl.RowHeight = {'fit',200,'2x','1x'};

For more information about laying out apps using a grid layout manager, see Lay Out Apps Programmatically.

fig = uifigure;
gl = uigridlayout(fig,[3 2]);

dd = uidropdown(gl);
dd.Layout.Row = 1;
dd.Layout.Column = 1;

lb = uilistbox(gl);
lb.Layout.Row = 2;
lb.Layout.Column = 1;

tbl = uitable(gl);
tbl.Data = rand(100);
tbl.Layout.Row = [1 3];
tbl.Layout.Column = 2;

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

Write Code to Manage Resize Behavior

When you want to provide resize behavior that the grid layout manager does not support, consider managing your app layout using SizeChangedFcn callbacks. For example, use this method if you want to:

To specify resize behavior in this way, follow these steps:

It is a good practice to put all the layout code for each container inside the SizeChangedFcn callback to ensure the most accurate results.

The SizeChangedFcn callback executes when one of these happens:

function sizeChangedApp
  fig = createComponents;
  fig.Visible = 'on';
end

% Create UI components
function fig = createComponents
  fig = uifigure('Visible','off', ...
    'AutoResizeChildren','off', ...
    'SizeChangedFcn',@figResize);
  btngrp = uibuttongroup(fig, ...
      'AutoResizeChildren','off', ...
      'SizeChangedFcn',@bgResize);
  btn1 = uitogglebutton(btngrp);
  btn2 = uitogglebutton(btngrp);
  ax = uiaxes(fig);
  
  % Store components
  fig.UserData = struct(...
    'ButtonGroup',btngrp, ...
    'Button1',btn1, ...
    'Button2',btn2, ...
    'Axes',ax);
end

function figResize(src,event)
  % Get UserData to access components
  data = src.UserData;
  
  % Get figure size
  figwidth = src.Position(3);
  figheight = src.Position(4);
  
  % Resize button group
  data.ButtonGroup.Position = [1 1 figwidth/2 figheight];
  
  % Resize axes
  axdim = min(figwidth/2,figheight) - 20;
  axdim = max(axdim,0);
  axleft = figwidth/2 + (figwidth/2-axdim)/2;
  axbottom = (figheight-axdim)/2;
  data.Axes.Position = [axleft axbottom axdim axdim];
end

function bgResize(src,event)
  % Get UserData to access components
  fig = ancestor(src,'figure','toplevel');
  data = fig.UserData;
  
  % Get button group size
  bgwidth = src.Position(3);
  bgheight = src.Position(4);
  
  % Resize button group
  btnleft = 20;
  btn1bottom = bgheight/4;
  btn2bottom = (7/12)*bgheight;
  btnwidth = bgwidth-40;
  btnheight = bgheight/6;
  data.Button1.Position = [btnleft btn1bottom btnwidth btnheight];
  data.Button2.Position = [btnleft btn2bottom btnwidth btnheight];
end

sizeChangedApp

Turn Off Resizing of Specific Components

The AutoResizeChildren property controls automatic resize behavior for apps without a grid layout manager or a SizeChangedFcn callback. Every app container, such as a UI figure, panel, or tab, has an AutoResizeChildren property, which is set to 'on' by default. When a container has AutoResizeChildren set to 'on', the app automatically resizes the children of that container when the app user resizes the figure window. Use this property to selectively turn off resizing for specific components:

When you change the AutoResizeChildren property of both a parent container and one of its children, first set the value for the parent container, then set it for the child container.

Turn Off App Resizing Entirely

The Resize property of a figure window controls whether the app user can interactively resize the window. The default value of Resize is 'on'. Consider setting Resize to 'off' if a consistent window size is important to the layout or behavior of your app.