Using Grid Layout to Customize the App Appearance in MATLAB

In this article, we will learn How to Using Grid Layout to Customize the App Appearance in MATLAB  in this article we will create two app by using the grid layout functionality of MATLAB  by different methods and we will see how works the grid layout to customize the app appearance in MATLAB. basically grid layout means the layout which is shown in corner of the app which we created using MATLAB the grid layout is very simple to make in MATLAB.

Approach 1

In this approach, we will first define the heading, and then by using the uidropdown method we created option functionality in which we added the three options also we made the three buttons by using uibutton functionality of MATLAB and then we specify the position and also the size of grid layout which will show when we run our code in MATLAB. this way we can create the grid layout in which we made the three dropdown options and also we made the three buttons by using grid layout functionality in MATLAB.

Example 1:

Matlab

f = uifigure('Name','Grid Layout Example');
g = uigridlayout(f,[3 3]); % create 3x3 grid layout

% create drop-down menus and buttons in grid layout
d1 = uidropdown(g,'Items',{'Option 1','Option 2','Option 3'});
d2 = uidropdown(g,'Items',{'Option A','Option B','Option C'});
d3 = uidropdown(g,'Items',{'Option X','Option Y','Option Z'});
b1 = uibutton(g,'Text','Button 1');
b2 = uibutton(g,'Text','Button 2');
b3 = uibutton(g,'Text','Button 3');

% specify position of components in grid layout
g.Layout.Row = [1 1 2 2 3];
g.Layout.Column = [1 2 1 2 3];

% specify sizes of components in grid layout
d1.Layout.ColumnSpan = 2;
b1.Layout.RowSpan = 2;
b3.Layout.RowSpan = 2;

Output:

Approach 2

 In this example we first write the heading in MATLAB code and then we created the 2*2 grid layout then we made the slider by defining the slider range with the help of uislider method and then we specify the position of the slider in our app and define the row and column in this way we can simply create the slider in MATLAB using grid layout functionality.

Example 2: 

Matlab

% Code
f = uifigure('Name','Grid Layout Example');
g = uigridlayout(f,[2 2]); % create 2x2 grid layout

% create sliders in grid layout
s1 = uislider(g,'Limits',[0 100],'Value',50);
s2 = uislider(g,'Limits',[0 1],'Value',0.5);
s3 = uislider(g,'Limits',[0 10],'Value',5);
s4 = uislider(g,'Limits',[0 360],'Value',180);

% specify position of sliders in grid layout
g.Layout.Row = [1 1 2 2];
g.Layout.Column = [1 2 1 2]

Output:

Approach 3:

In this approach, we created the first heading in MATLAB and then we created the 3*3 grid layout and then we define the textarea using uitextarea functionality of MATLAB and then we define the button by using uibutton and after defining all these functions we define the position of our app by using defining the size of row and column using MATLAB code.

Example 3:

Matlab

% Code
f = uifigure('Name','Grid Layout Example');
g = uigridlayout(f,[3 3]); % create 3x3 grid layout

% create text and buttons in grid layout
t1 = uitextarea(g,'Value','Text 1');
t2 = uitextarea(g,'Value','Text 2');
t3 = uitextarea(g,'Value','Text 3');
b1 = uibutton(g,'Text','Button 1');
b2 = uibutton(g,'Text','Button 2');
b3 = uibutton(g,'Text','Button 3');
b4 = uibutton(g,'Text','Button 4');
b5 = uibutton(g,'Text','Button 5');

% specify position of components in grid layout
g.Layout.Row = [1 1 1 2 2 2 3 3 3];
g.Layout.Column = [1 2 3 1 2 3 1 2 3];

% specify sizes of components in grid layout
t1.Layout.RowSpan = 2;
t2.Layout.ColumnSpan = 2;
b3.Layout.RowSpan = 2;
b4.Layout.ColumnSpan = 2;

Output: