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.

[Frank]

This looks like the most recent update on this issue and I just encountered it. I write a lot of apps for consulting work and teaching (university physics). As long as I can remember, which is about 10 years of app writing (more just bareknuckle GUIs going back to the 1990s), I have had no trouble with apps appearing properly on any computer I ran them on, essentially all Windows machines except for a few apps I compiled on Apples so the students in some classes could run them on their Apple machines. Just this week, I shifted the teaching time i spend online (office hours, problem sessions, etc. classes are in person) to a computer I have in another part of my house. Now for the weirdness.

When I first set up (about a week ago) on the new computer (a Dell Micro Tower Optiplex Small Form Factor Plus 7010, running Windows 11 with a Dell UZ2315H 1920x1080 monitor), I ran a little 2D kinematic projectile app i wrote a few years ago and have been using regularly, and the app ran perfectly, meaning the edit fields to input data, the button to make it run, the axis area that animates the plot of the movement, and the table that fills up with all the numbers characterizing the motion. All the components in the app window were properly sized and even resized properly when I did that to make it fit into where I planned to screen share it for students. Fast forward today when I planned to record a presentation and presto! when I run the same app, the table is expanded and expands beyond the size of the uifigure so it all does not show, the edit fields also are moved around, but the axis is located correctly. I thought somehow I might have changed some settings that did it so I reset everything (including in MATLAB ) back to factory defaults and it still happens. I tried re-copying the app folder from my main machine (on which it runs flawlessly), but the identical code from the machine on which it works now showed the same symptoms as before on the new machine. Still on the new machine, I tried making a brand new app, and experimented putting in different components then just running it with no other code involved. The result is that I can put axes anywhere I want and any size I want and they remain properly sized and positioned when the app executes. However I tried adding tables, edit fields, buttons, dropdowns, image locations, and a variety of other components and all of the ones I tried shited position and/or size when the app opened, while axes on the same app stayed where they were supposed to be. As it is now, I can't use the machine at all for MATLAB apps.

Then I turned to the other machines I have on which I write and run apps. Bottom line: on all of them apps are behaving perfectly size- and position-wise like they always have been. The machines I have successfully run the particular app in question on just now are:

1. Dell Precision 5680 laptop running Windows 11. The app appears equally well when displayed on a connected DellUZ2715H 1920x1080 external monitor and when that monitor is disconnected and the display is the laptop display itself (1920x1200).
2. Dell Precision Tower 5810 runing Windows 10 and a Samsung S34CG50 wide screen monitor (3440x1440).

The MATLAB versions (one for consulting and one for academic work) are both 2024b or later I think. I also recall the apps working fine on MATLAB online, where my students sometimes prefer to work.

So what avenue should I pursue? As it is the new machine (which has not given me any other problems with any software) is unusable for running or writing apps. I thought I might compile an app on one of the machines I have been using and trying to run the compiled app on the new machine, but there has to be a better solution. I have done some plotting by hand in MATLAB on the new machine and I have not noticed anything weird, resizing, or any other. Help.

[Frank]

Update. Today I uninstalled and downloaded/installed MATLAB 2024b anew. When I tried to run the app in question again, it still opened up with the component positions garbled. Here is what the app looks like in the app designer:

Here is what the app looks like when executed:

I plan to fiddle with things I can think of today but I am still mystified as to why this is happening. Any help would be much appreciated. As it is this particular computer is useless to me for writing or running apps, whic I do a great deal in my teaching and consulting. BTW I did not mention above, but I did try the code fix suggested to put in the startup function, but it did not remedy the problem

[Frank]

Updated update. I tried putting padding space in the app designer and now what works is to construct the app in designer to look like this in app designer:

Basically I shifted the locations of the components to the bottom of the window, leaving empty space at the top. Now, when this app is run it opens up like this

and otherwise runs how it is supposed to, letting students in put values of initial conditions, then showing the animated plot, and filling in the table with detailed initial, final and intermediate condtions. I just noticed that the copyright/logo at the bottom was left out but I can likely find a place that when "shifted on execution" will wind up someplace visible. Suggestions on what I am doing wrong would be very welcome.

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.