How can I specify the way components resize automatically in App Designer?

I am developing a GUI in App Designer. I need it to be able to resize every component in a nice way for displaying on different screens. I try to make the most use of the automatic resizing of UIFigure, since hard-coding the resizing of each particular element would be just too much work.

However, instead of just changing the size ratio of each dimension of each element, App Designer sometimes tries to align certain elements to one side, or stretches the width of the element by the same amount of pixels which the window had been increased with. It looks bad.

I have been trying all the alignment functions of App Designer - aligning elements to each other, grid, no alignment, and occasionally by trial and error I manage to position my elements in such a way that the automatic resize would behave like I want it to. Still, it is bothersome, and it would be nice to know how exactly I can place the right dimension constraints on elements in the Design View, without hard-coding it.

For example: If I place a component using no alignment or the grid, will it keep the same ratio as its parent panel or uifigure? If I allign the right side of a button to the right side of an uiaxes, will the button stay aligned to that side without ever changing the size?

I attach a picture about the tiny and magnified version of my panel to illustrate my point.

[Matt J]

I agree the resizing behavior leaves much to be desired. I am seeing particularly ungraceful resizing in the instrumentation components.

[Ajeya Gupta]

Tamas Muszbek and Matt J

Were you able to resolve this? I am in a similar situation, where I have developed a tool using App Designer. In my start up function, i use the following lines of code to make sure the app adjusts its size based on screen resolution

screen_size = get(groot, 'Screensize');

ScreenWidth = screen_size(3);

ScreenHeight = screen_size(4);

%This is for the entire canvas (including all the buttons, radio buttons, graph etc.)

app.UIFigure.Position = [0 0 ScreenWidth ScreenHeight];

app.UIFigure.AutoResizeChildren = 'on';

Additionally, my 'AutoResizeChildren' tab under component browser is selected. Still when I move my app to a larger connected monitor, the resizing is just not perfectly done. As in, there are some radio buttons and state buttons that re-sizes, and there are some other buttons that do not resize. Moreover, certain symmetry at which I have adjusted my tabs on my laptop is not clearly reflected when this app is moved to a larger screen size monitor. Basically, the re-sizing is not really working well for me, and kind of things look pretty ugly.

Any help or tip on this will be greatly appreciated!

Thank you in advace,

Ajeya Gupta

[Marc Youcef]

Even after 2020a, still experiencing what you are just sharing here above. Symmetry not kept during resize and making all that stuff look really ugly specially and complex interfaces... Have no clue how to make it understand that it needs to keep relative position while resizing ...

Answer 1

[J. Alex Lee]

"uigridlayout" was introduced in 2018b, which may be helpful...It allows pretty sophisticated layouts, although it still seems buggy especially when you nest multiple uigridlayouts.

[Marc Youcef]

This directly solved my issue. It is true that it is not easy to set in place for complex UIs but enables you great control ! Was not aware about it, thanks for sharing this.

[J. Alex Lee]

Sure thing! I wasn't sure it would be helpful since it's such a new feature and not everyone keeps matlab up to date.

Be sure to check out the "fit" keyword in the column widths and row heights; this is a neat feature introduced I think in R2019x, but it will make the grid as small as possible to still accoomodate whatever its holding. It's well suited for buttons and edit boxes, pop ups, etc.