How to position radio buttons into grid layouts in App Designer?

Is it possible to position each of the radio buttons in a radio button group into a grid layout?

Many thanks.

Answer 1

[Monisha Nalluru]

Hi Leon,

For my understanding, you want to place the radio buttons of radio button group in grid layout. This is not possible because the parent of uiradiobutton is uibuttongroup.

Refer documentation

But if you want radio button to be looking as grid, you can calcuate and set them by specifying position property

[Julian Hapke]

If it's not already in development to have the elements inside a button group automatically arragaged, please take this comment as a feature request.

[Julian Dönges]

Changing the Position property does not help in keeping the relative position correct when you are resizing the uifigure.

You can't even orient the radiobuttons to other grid elements, as the Position property is only in reference to the parent uibuttongroup and does not allow for absolute positioning (nor normalized values).

Answer 2

[Fryderyk Kukowski]

As the other answer stated this is in fact not possible. But I have found a quite good workaround. You can put check boxes in a grid layout and then you can simulate them having the radio behavior (only one of them can be active at a time).

First you need to define a property that will hold a reference to currently selected checkbox. Let's call it currentCheckbox.

All your radio check boxes have to start as false ('off') or only one can start as true ('on') and if so it has to be assigned to the currentCheckbox in the Startup function. Otherwise this workaround won't work.

Then you have to assign the same Value changed function to each of your radio check boxes. In App Designer you can assign it to the first one and than assign the newly created function to the other ones.

Put this code at the beginning of the function:

me = event.Source;
if me == app.currentCheckbox % the current checkbox was clicked again and changed state to false so change it back to true
    me.Value = true;
    return; % don't proceed further as there was no change in selected value of the group
else
    app.currentCheckbox.Value = false;
    app.currentCheckbox = me;
end

% other code

The other code section would be anything that you would put in Selection changed function of radio button group.

Or you can be fancy and have each checkbox have different function doing different things in the other code section but all the function have to have the above code at their beginnings.

Radio buttons and check boxes don't offer data translation like drop down fields with their ItemsData property. So you have to do it yourself this time just like you would have with radio button group. You can do it with switch case statement or a dictionary. If you can put your data in the buttons text then the current group's value would be:

app.currentCheckbox.Text

App Designer does not provide a quick way to edit UserData property of the elements but if you have time you could write code to set it up in the Startup function. Then the current group's value would be:

app.currentCheckbox.UserData

If you just want to check if some button is selected you can do it like this:

if app.someCheckboxInTheRadioGroup.Value
    % the checkbox is selected
else
    % the checkbox is not selected
end

Then you put the grid layout in some panel and here you have your mock up radio button group!

The main drawback is having to assign a function to each check box and to every new check box that you add to the group when in radio group you have to to only once assign Selection changed function the the group and you're done. Depending on your use case this might not be a problem or might be slightly annoying (but still definitely less annoying then not having the sweet grid layout).

Other drawback is the check boxes' appearance - you cannot change the square box to be circle and cannot change check mark to be a filled smaller circle. So the users of your app might be a little confused because checkbox group is commonly associated with multiple choice select.

There is also possible edge case drawback when the user uses some script to quickly click the GUI. I don't know how MATLAB internally handles the clicks but such script might make 2 or more checkboxes selected at the same time. But such scenario would be so rare that I woudn't worry about it.

I have attached an example app implementing the above workaround.

I hope this will help someone out there.