Issue with UI Components Not Resizing Correctly on Window Maximize in App Designer

I've been working on a MATLAB App Designer project and encountered an issue where my UI components (graphs, buttons, labels, etc.) do not resize or reposition correctly when I maximize the app window. Despite trying various approaches, the problem persists across all components, affecting the app's usability on different screen sizes or when the window is resized.

Problem Description:

In my app, I have multiple UI components laid out to fit the initial window size. However, when I maximize the window or change its size, the components do not adjust their positions or sizes accordingly. They either overlap, leave large unused spaces, or get partially hidden, which is not the intended behavior.

What I've Tried:

1. I've experimented with setting the AutoResizeChildren property of panels and the main figure to true, hoping the components would adjust automatically. This didn't resolve the issue.
2. I looked into using layout managers like uigridlayout, but I'm unsure if I'm applying it correctly or how to make it work for my specific layout needs.

My Goal:

I want all components in my app to dynamically resize and reposition in a proportional and organized manner when the app window is resized or maximized, ensuring a consistent and usable layout across different window sizes.

I appreciate any guidance, examples, or references you can provide to help solve this problem. Thank you!

[Voss]

Is it possible for you to share the app (upload the .mlapp file using the paperclip button)?

[David]

yes, thank you.

I uploaded example of the app. as you can see, when we maximize the app, things are changed.

Thank you

[Voss]

Thanks for the app. I'm attaching two screen shots; one is how the app looks initially for me, and the other is how it looks when maximized. Are those more-or-less (besides the missing bar_indicator.jpg) what you see when you run it on your system?

[David]

yes sir, exactly.

[Voss]

OK. When maximized, I see there is extra space in the bottom left and right corners of the window, that the "Weight" labels appear to be right-justified instead of centered (despite having HorizontalAlignment set to 'center'), and the edit boxes are wider than is probably necessary. I don't really see any components overlapping incorrectly or being partially hidden. Do you agree with that assessment?

[David]

yes. the edit boxes are wider than is necessary.

Can I edit the window as maximized, and as I run the app it will opened as maximized?

[Voss]

That's worth a shot.

Answer 1

[Voss]

The thing I would do (and what I generally do in any GUI) is to turn AutoResizeChildren 'off' and write my own SizeChangedFcn for the UIFigure. Doing that gives you complete control over the components' position for any figure size (but it may be a lot more work than using AutoResizeChildren 'on' or a layout manager, depending on how many components you have).

The attached mlapp has a SizeChangedFcn - an incomplete one that only sets the positions of the axes. It looks like this:

% Callbacks that handle component events
    methods (Access = private)

        % Size changed function: UIFigure
        function scf(app, event)

            pos = app.UIFigure.Position;
            
            ax_h = max(0,(pos(4)-36)*2/3);
            ax_y = pos(4)-12-ax_h;
            
            ax3_w = max(0,(pos(3)-36)/3);
            ax2_w = pos(3)-36-ax3_w;

            app.UIAxes3.Position = [12 ax_y ax3_w ax_h];
            app.UIAxes2.Position = [ax3_w+24 ax_y ax2_w ax_h];
            
        end
    end

You can add to it to position the other components appropriately based on the uifigure's size.

[David]

I think I understand now how to do that, based on your code.

I appriciate your help, thank you.

[Voss]

You're welcome!

I made a change to the code and the app I attached; hopefully it makes more sense now.

Any questions, let me know.