Manage Resizable Apps in App Designer

Apps you create in App Designer are resizable by default. The components reposition and resize automatically as the user changes the size of the window at run-time. The AutoResizeChildren property controls this automatic resize behavior. By default, App Designer enables this property for the UI figure and all its child containers such as panels and tabs. To set the AutoResizeChildren property of a child container to a different value, set the value for the child container after setting the value for the parent.

Two UI figure windows of different sizes. On the left, the window contains a set of axes, a drop-down list, and a button. On the right, the window is wider and contains the same components. The axes and drop-down list are wider to fill the window, and the button is the same size.

When the AutoResizeChildren property is enabled for a container, MATLAB^® manages the size and position of only the immediate children in the container. Components in nested containers are managed by the AutoResizeChildren property of their immediate parent. To ensure that the alignment of components relative to one another (like a grouping of buttons) is preserved when your app is resized, parent the grouping of components to a panel, instead of directly to the figure.

Resizing Graphics Objects with Normalized Position Units

When graphics objects, like axes or charts, use normalized position units and are the child of a resizable container, certain properties of the graphics object are affected after the parent container is resized. For example, if axes or charts use a value of 'normalized' for the Units property and are parented to a container with the AutoResizeChildren property set to 'on', then:

The value of the OuterPosition property for the axes or chart changes when the app is resized.
The axes or chart does not shrink smaller than a minimum size when the app is resized.

If you want to avoid either of these behaviors, set the AutoResizeChildren property of the container to 'off'.

Alternatives to Default Auto-Resize Behaviors

If you want more flexibility over how your app automatically resizes, use grid layout managers or the auto-reflow options in App Designer instead of the AutoResizeChildren property. For more information about these options, see:

If the resize behaviors supported by AutoResizeChildren, grid layout managers, or auto-reflow options are not the behaviors you want, then you can create custom resize behaviors by writing a SizeChangedFcn callback function for the container. For more information, see Manage App Resize Behavior Programmatically.