Is there a way to add a background picture to an App Designer GUI?

I found this answer from 2013 for GUIDE that does exactly what I want to do: https://www.mathworks.com/matlabcentral/answers/96023-how-do-i-add-a-background-image-to-my-gui-or-figure-window

My issue is that I want a background for the newer App Designer. I'm sure I could get more customization using GUIDE or tkinter python ect, but I am designing a GUI that is easy for someone with next to no coding experience can update over time. App Designer is a perfect option for this as it is simple to use.

Please let me know if anyone has experience with this issue!

Answer 1

[Karun Mathiazhagan]

Hello James,

At this time, the ability to set a background image in App Designer is not one that is currently available in the product. Note that App Designer uses "UIFigures" rather than the normal "Figure" type used by base MATLAB graphics and by GUIDE.

You may be able to work around this issue using one of 2 methods:

1. Create a UIAxes object the same size as your UIFigure, and plotting an image in the axes.

2. Create a UIButton, delete the text, set an image icon for the button

Please note that these options are just workarounds, and the UI components are not intended to be used for this purpose so it may not work perfectly in all cases. Also, note that the UIAxes or UIButton will need to be the first component created, so that they are displayed below all other components.

If you would wish to try the UIAxes method, I have created a brief example to help you:

f = uifigure;
figPos = f.Position; 

% Setup UIAxes
u = uiaxes(f,'Position',[0 0 figPos(3) figPos(4)]);
u.XTick = [];
u.YTick = [];
u.Visible = 'off';

% Show Image
cdata = imread('peppers.png');
im = image(cdata,'Parent',u);
u.XLim = [0 inf];
u.YLim = [0 inf];

Note that even if you turn off the tick labels and axes visibility (as shown above), there will remain a small border around the image. Depending on the particular image, you may be able to fix this by setting the background color of the UIAxes to some value, in order to make the border less noticeable.

-----

Some additional comments for the UIButton method:

* The button will need to be the first component you create so it sits at the bottom of the z-order stack.

* If the user has a bunch of components already laid out and configured, a quick way of moving the button to the bottom of the Z order stack would be to select all components (except your button), cut them, and then paste them back.

* The button will scale the image down and preserve the image’s aspect ratio when the UI figure is resized

* You can use a SizeChangedFcn as Ben describes to manually manage the size of the button and preserve a certain size depending on the aspect ratio of the image

* If you want to keep using the UI Figures “allow app to be auto resized” option, you can put the button in a UI Panel and implement a SizeChangedFcn for the panel only for it to manage the button inside of it.

I hope this helps.

Best,

Karun