Why does the app not resize properly for different screen resolutions in App Designer?

The size of the GUI and all its elements does not scale with the screen size of the monitor. This leads to some problems if the designed GUI is used on smaller laptops for example. On a smaller monitor, the GUI is not useable on since some of the components are clipped off screen and not all components are visible.

The problem is, that there is no way to change this to a percentage based scaling and positioning based on the screen size. Is it possible to change the GUI and all its elements to the used screen size without changing every element and its position manually?

Answer 1

[MathWorks Support Team]

App designer utilizes UI Figures to create the figure window which contains all of the relevant components of your app. A normal MATLAB figure is able to specify its position in normalized Units, that is a percentage of the parent container for the figure, in this case the system screen resolution. Unfortunately, at this time UI Figures only support Units of pixels. Therefore, the figure is created with at a static location based on the values in the Position property specified by the user.

There are potentially two workarounds available to resize your app to the resolution of a new monitor for you to consider:

1) Change the screen resolution to be matching on both systems. The Position property of the UIFigure may need to be updated depending on if you make the larger screen have a lower resolution or the smaller screen to have a higher resolution. This workaround does not allow for much flexibility to the user's workflow but would be the simplest solution. 

2) Add a startup function to your App which inspects that systems current resolution and adjusts the UIFigure position based on a percentage of that overall screen size. This workflow is in effect attempting to create our own version of normalized units. Instructions for how to add a startup function to your app can be found in the following link:

https://www.mathworks.com/help/matlab/creating_guis/app-designer-startup-function.html#mw_692f91de-0866-4876-94a5-d956a19570f4

Inside of that start up function, a workflow similar to the one below would need to be implemented.

       function startupFcn(app)
            screenSize = get(groot,'ScreenSize');
            screenWidth = screenSize(3);
            screenHeight = screenSize(4);
            
            left = screenWidth*0.1;
            bottom = screenHeight*0.1;
            width = screenWidth*0.8;
            height = screenHeight*0.8;
            drawnow;
            app.UIFigure.Position = [left bottom width height]; 
        end

The percentages used in "left", "right", "bottom" and "height" would need to be adjusted to match the location and size of your GUI as the current numbers above were chosen arbitrarily. This could be calculated by finding the ratio of the screen the current GUI is occupying from the original UIFigure Position pixel values and the system resolution of which the GUI was created on.

Answer 2

[Michael]

I know this isn't exactly what you are looking for, but I was having a similar problem and recently discovered the 'Scrollable' property in the 'Interactivity' options in the right side panel of App Designer. If you turn this on, if the window is too small for the tab group, panel, etc. a scroll bar will appear.

Answer 3

[Melinda Toth-Zubairi]

Starting in R2019a, MATLAB App Designer offers Apps with Auto-Reflow from the App Designer Start Page. The 2-panel and 3-panel app types are preconfigured to automatically resize and reflow in response to changes in screen size. You can use Apps with Auto-Reflow if you want to avoid writing complex resize logic.

Refer to Apps with Auto-Reflow in the MATLAB documentation for more information.