Creating Apps Using App Designer in MATLAB

Last Updated : 15 Mar, 2022

MATLAB is a powerful, high-level programming language. Matlab is widely used for designing systems by engineers and scientists and we all know that the best way to represent any idea is by using a simple but effective GUI. Matlab app builder provides you the power to build different apps, to represent your idea in a GUI-friendly manner.

In this article were going to learn how to create any app in Matlab App Designer.

Step 1: You can start working on the MATLAB APP Builder in two ways. Either go to Home>New>App.

Alternatively, for going to the Matlab app builder section, Select Apps from the Menubar, and then go to Design App.

Step 2: A new pop-up is opened. It provides a different layout for stating the app. It has also come examples for a better understanding.

Step 3: You can choose any App option to build a MATLAB app. There are mainly three layouts available on the go. These includes

Blank App
2-Panel App with Auto-Reflow
3-Panel App with Auto-Reflow

Step 4: MATLAB consists of various components like:

Components
Customizing Components

Components are the pre-built shapes that are designed for particular tasks, and that could be imported to the design tab. In Matlab, the Component Library is situated in the leftmost part of the window.

For importing any component to your design right-click on the component and drag it to the design tab and drop it wherever you want to place it.

By using customizing components you can customize your components as per your requirements, using the Component browser. It is situated in the rightmost part of the App Builder Window. Using the Component Browser you can change information about the component, Font and Color, Interactivity with the user, Position of the component in the design view, CallBack Execution Controls, Parents/Child members, and Identifiers. It also contains the list of the component adopted in your app.

Let’s understand more about app-building by making a simple app that calculates both simple and compound interest. For working on this app, create a select a blank workbook. Now the workspace will be opened. You can design the app in the Design tab and code it in the Code tab.

Designing the app takes five edit test fields (numeric), three of them would be editable for principal, rate, and time, whereas two would be non-editable holding the value of Simple Interest and Compound Interest. You can also add a label for a better design view. Also import a button that does the whole calculation and shows the result.

Let’s move to the coding part now. For adding the functionality of the Calculate button, add a push-back function. You can add a push-back function by right click on the button and then going to callbacks and then clicking on add a push-back function.

Example:

Matlab

% MATLAB code for simple interest App design 
% Button pushed function: CalculateButton 
        function CalculateButtonPushed(app, event) 
            amount = app.PrincipalEditField.Value; 
            rate = app.RateEditField.Value/100; 
            time = app.TimeEditField.Value; 
            simple_interest = amount*rate*time; 
            app.SimpleInterestEditField.Value = simple_interest; 
            compounded_amount = amount * ((1+rate).^time); 
            compounded_interest = compounded_amount - amount; 
            app.CompoundInterestEditField.Value = compounded_interest; 
  
        end