How to Create a GUI Button in MATLAB App?

MATLAB app builder helps in building apps in GUI without having proper software development knowledge. Matlab helps you create professional apps hassle-free, using it. There are so many components available in Matlab App Builder. 

Step 1: Open MATLAB and Select Design App.

Step 2: Now drag and drop the button in the Design tab from the Component Library dialog box. This is situated in the leftmost part of the app builder window. 

Step 3: You can customize your button as per your preference, i.e., can change its many properties under the Component Browser dialog box.

Step 4: These different drag-drop options help you customize your button. 

• The button option helps you change text over the button, change its alignment, and set the icon and its alignment over the button.
• Font And Color help you pick the font style, and color for your button.
• Interactivity controls how to behave with the user.
• Position specifies the position of the button in the defined app.
• Callback Execution Control controls its incorruptibility. 
• Parent/Child controls visibility.
• Identifiers are used to add tags to your button.

Step 5:  Now we enable the button function by using the callback function. We will understand callback by example. First, add a callback function, right-click on the button, choose Callbacks, then Add ButtonPushedFcn callback.

 It will add the function for you in the code part and will look up like this.

You can add your code below the comment, your code here. These codes will be executed whenever the button will be clicked.

Let’s try to understand Buttons via practical examples to make them functional. For example, we want to design a MATLAB app to add two numbers. 

Step 1:  First we select the component and drag & drop 3 inputs fields(numeric), a button, and arrange them in your preferred manner. Our app looks like this

Step 2: For the above design, the lines of code that are added to our code is:

 % Properties that correspond to app components
    properties (Access = public)
        UIFigure                matlab.ui.Figure
        ResultLabel             matlab.ui.control.Label
        EnterSecondNumberLabel  matlab.ui.control.Label
        EnterFirstNumberLabel   matlab.ui.control.Label
        EditField3              matlab.ui.control.NumericEditField
        EditField3Label         matlab.ui.control.Label
        EditField2              matlab.ui.control.NumericEditField
        EditField2Label         matlab.ui.control.Label
        EditField               matlab.ui.control.NumericEditField
        EditFieldLabel          matlab.ui.control.Label
        AddButton               matlab.ui.control.Button
    end

Step 3: Now add an AddButtonPushed callback on the button.

Step 4: Now in the coding part, the function would be created. Add the following code in the function to make our button functional.

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

        % Button pushed function: AddButton
        function AddButtonPushed(app, event)
            % Taking input from num field 1
            a = app.Num1EditField.Value;
            % Taking input from num field 1
            b = app.Num2EditField.Value;

            % Calculating Sum
            c = a+b;
            % Displaying Output
            app.AnswerEditField.Value = c;
            
        end
    end

Example 1:

t

Output:

Now take another example and calculate the square of any number using the Button component. For this select two labels, two inputs fields(numeric), and a button. Our app looks like this

Example 2:

Matlab

% MATLAB code for Button component
classdef appadd1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                matlab.ui.Figure
        ResultLabel             matlab.ui.control.Label
        EnterNumberLabel        matlab.ui.control.Label
        EditField2              matlab.ui.control.NumericEditField
        EditField               matlab.ui.control.NumericEditField
        ClickButton             matlab.ui.control.Button
    end

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

        % Button pushed function: ClickButton
        function ClickButtonPushed(app, event)

           % Taking input from num field 1
            a = app.EditField.Value;
            c = a*a;

           % Displaying Output
            app.EditField2.Value = c;
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create ClickButton
            app.ClickButton = uibutton(app.UIFigure, 'push');
            app.ClickButton.ButtonPushedFcn = createCallbackFcn(app, @ClickButtonPushed, true);
            app.ClickButton.Position = [188 278 100 22];
            app.ClickButton.Text = 'Click';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'numeric');
            app.EditField.Position = [287 397 146 40];


            % Create EditField3
            app.EditField2 = uieditfield(app.UIFigure, 'numeric');
            app.EditField2.Position = [287 329 138 52];

            % Create EnterNumberLabel
            app.EnterNumberLabel = uilabel(app.UIFigure);
            app.EnterNumberLabel.Position = [21 403 107 43];
            app.EnterNumberLabel.Text = 'Enter  Number';

            % Create ResultLabel
            app.ResultLabel = uilabel(app.UIFigure);
            app.ResultLabel.Position = [21 352 70 46];
            app.ResultLabel.Text = 'Result';

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = appadd1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Output: