Create Toolbars for GUIDE UIs

Note

The GUIDE environment will be removed in a future release. After GUIDE is removed, existing GUIDE apps will continue to run in MATLAB® but they will not be editable in GUIDE.

To continue editing an existing GUIDE app, see GUIDE Migration Strategies for information on how to help maintain compatibility of the app with future MATLAB releases. To create new apps, use App Designer instead.

Toolbar and Tools

To add a toolbar to a UI, select the Toolbar Editor.

You can also open the Toolbar Editor from the Tools menu.

The Toolbar Editor gives you interactive access to all the features of the uitoolbar, uipushtool, and uitoggletool functions. It only operates in the context of GUIDE; you cannot use it to modify any of the built-in MATLAB toolbars. However, you can use the Toolbar Editor to add, modify, and delete a toolbar from any UI in GUIDE.

Currently, you can add one toolbar to your UI in GUIDE. However, your UI can also include the standard MATLAB figure toolbar. If you need to, you can create a toolbar that looks like a normal figure toolbar, but customize its callbacks to make tools (such as pan, zoom, and open) behave in specific ways.

Note

You do not need to use the Toolbar Editor if you simply want your UI to have a standard figure toolbar. You can do this by setting the figure's ToolBar property to 'figure', as follows:

  1. Open the UI in GUIDE.

  2. From the View menu, open Property Inspector.

  3. Set the ToolBar property to 'figure' using the drop-down menu.

  4. Save the figure

If you later want to remove the figure toolbar, set the ToolBar property to 'auto' and resave the UI. Doing this will not remove or hide your custom toolbar. See Create Toolbars for Programmatic Apps for more information about making toolbars manually.

If you want users to be able to dock and undock a UI window on the MATLAB desktop, it must have a toolbar or a menu bar, which can either be the standard ones or ones you create in GUIDE. In addition, the figure property DockControls must be turned on. For details, see How Menus Affect Figure Docking.

Use the Toolbar Editor

The Toolbar Editor contains three main parts:

  • The Toolbar Layout preview area on the top

  • The Tool Palette on the left

  • Two tabbed property panes on the right

To add a tool, drag an icon from the Tool Palette into the Toolbar Layout (which initially contains the text prompt shown above), and edit the tool's properties in the Tool Properties pane.

When you first create a UI, no toolbar exists on it. When you open the Toolbar Editor and place the first tool, a toolbar is created and a preview of the tool you just added appears in the top part of the window. If you later open a UI that has a toolbar, the Toolbar Editor shows the existing toolbar, although the Layout Editor does not.

Add Tools

You can add a tool to a toolbar in three ways:

  • Drag and drop tools from the Tool Palette.

  • Select a tool in the palette and click the Add button.

  • Double-click a tool in the palette.

Dragging allows you to place a tool in any order on the toolbar. The other two methods place the tool to the right of the right-most tool on the Toolbar Layout. The new tool is selected (indicated by a dashed box around it) and its properties are shown in the Tool Properties pane. You can select only one tool at a time. You can cycle through the Tool Palette using the tab key or arrow keys on your computer keyboard. You must have placed at least one tool on the toolbar.

After you place tools from the Tool Palette into the Toolbar Layout area, the Toolbar Editor shows the properties of the currently selected tool, as the following illustration shows.

Predefined and Custom Tools

The Toolbar Editor provides two types of tools:

  • Predefined tools, having standard icons and behaviors

  • Custom tools, having generic icons and no behaviors

Predefined Tools.  The set of icons on the bottom of the Tool Palette represent standard MATLAB figure tools. Their behavior is built in. Predefined tools that require an axes (such as pan and zoom) do not exhibit any behavior in UIs lacking axes. The callback(s) defining the behavior of the predefined tool are shown as %default, which calls the same function that the tool calls in standard figure toolbars and menus (to open files, save figures, change modes, etc.). You can change %default to some other callback to customize the tool; GUIDE warns you that you will modify the behavior of the tool when you change a callback field or click the View button next to it, and asks if you want to proceed or not.

Custom Tools.  The two icons at the top of the Tool Palette create pushtools and toggletools. These have no built-in behavior except for managing their appearance when clicked on and off. Consequently, you need to provide your own callback(s) when you add one to your toolbar. In order for custom tools to respond to clicks, you need to edit their callbacks to create the behaviors you desire. Do this by clicking the View button next to the callback in the Tool Properties pane, and then editing the callback in the Editor window.

Add and Remove Separators

Separators are vertical bars that set off tools, enabling you to group them visually. You can add or remove a separator in any of three ways:

  • Right-click on a tool's preview and select Show Separator, which toggles its separator on and off.

  • Check or clear the check box Separator to the left in the tool's property pane.

  • Change the Separator property of the tool from the Property Inspector

After adding a separator, that separator appears in the Toolbar Layout to the left of the tool. The separator is not a distinct object or icon; it is a property of the tool.

Move Tools

You can reorder tools on the toolbar in two ways:

  • Drag a tool to a new position.

  • Select a tool in the toolbar and click one of the arrow buttons below the right side of the toolbar.

If a tool has a separator to its left, the separator moves with the tool.

Remove Tools

You can remove tools from the toolbar in three ways:

  • Select a tool and press the Delete key.

  • Select a tool and click the Delete button.

  • Right-click a tool and select Delete from the context menu.

You cannot undo any of these actions.

Edit a Tool’s Properties

You edit the appearance and behavior of the currently selected tool using the Tool Properties pane, which includes controls for setting the most commonly used tool properties:

  • CData — The tool’s icon

  • Tag — The internal name for the tool

  • Enable — Whether users can click the tool

  • Separator — A bar to the left of the icon for setting off and grouping tools

  • Clicked Callback — The function called when users click the tool

  • Off Callback (uitoggletool only) — The function called when the tool is put in the off state

  • On Callback (uitoggletool only) — The function called when the tool is put in the on state

See Write Callbacks in GUIDE for details on programming the tool callbacks. You can also access these and other properties of the selected tool with the Property Inspector. To open the Property Inspector, click the More Properties button on the Tool Properties pane.

Edit Tool Icons

To edit a selected toolbar icon, click the Edit button in the Tool Properties pane, next to CData (icon) or right-click the Toolbar Layout and select Edit Icon from the context menu. The Icon Editor opens with the tool’s CData loaded into it. For information about editing icons, see Use the Icon Editor.

Edit Toolbar Properties

If you click an empty part of the toolbar or click the Toolbar Properties tab, you can edit two of its properties:

  • Tag — The internal name for the toolbar

  • Visible — Whether the toolbar is displayed in your UI

The Tag property is initially set to uitoolbar1. The Visible property is set to on. When on, the Visible property causes the toolbar to be displayed on the UI regardless of the setting of the figure’s Toolbar property. If you want to toggle a custom toolbar as you can built-in ones (from the View menu), you can create a menu item, a check box, or other control to control its Visible property.

To access nearly all the properties for the toolbar in the Property Inspector, click More Properties.

Test Your Toolbar

To try out your toolbar, click the Run button in the Layout Editor. The software asks if you want to save changes to its .fig file first.

Remove a Toolbar

You can remove a toolbar completely—destroying it—from the Toolbar Editor, leaving your UI without a toolbar (other than the figure toolbar, which is not visible by default). The are two ways to remove a toolbar:

  • Click the Remove button on the right end of the toolbar.

  • Right-click a blank area on the toolbar and select Remove Toolbar from the context menu.

If you remove all the individual tools in the ways shown in Remove Tools without removing the toolbar itself, your UI will contain an empty toolbar.

Close the Toolbar Editor

You can close the Toolbar Editor window in two ways:

  • Press the OK button.

  • Click the Close box in the title bar.

When you close the Toolbar Editor, the current state of your toolbar is saved with the UI you are editing. You do not see the toolbar in the Layout Editor, but you can run your program to see it.

Editing Tool Icons

GUIDE includes its own Icon Editor, a dialog for creating and modifying icons such as icons on toolbars. You can access this editor only from the Toolbar Editor. This figure shows the Icon Editor loaded with a standard Save icon.

Use the Icon Editor

The Icon Editor dialog includes the following components:

  • Icon file name — The icon image file to be loaded for editing

  • Import button — Opens a file dialog to select an existing icon file for editing

  • Drawing tools — A group of four tools on the left side for editing icons

    • Pencil tool — Color icon pixels by clicking or dragging

    • Eraser tool — Erase pixels to be transparent by clicking or dragging

    • Paint bucket tool — Flood regions of same-color pixels with the current color

    • Pick color tool — Click a pixel or color palette swatch to define the current color

  • Icon Edit pane — A n-by-m grid where you color an icon

  • Preview pane — A button with a preview of current state of the icon

  • Color Palette — Swatches of color that the pencil and paint tools can use

  • More Colors button — Opens the Colors dialog box for choosing and defining colors

  • OK button — Dismisses the dialog and returns the icon in its current state

  • Cancel button — Closes the dialog without returning the icon

To work with the Icon Editor,

  1. Open the Icon Editor for a selected tool’s icon.

  2. Using the Pencil tool, color the squares in the grid:

    • Click a color cell in the palette.

    • That color appears in the Color Palette preview swatch.

    • Click in specific squares of the grid to transfer the selected color to those squares.

    • Hold down the left mouse button and drag the mouse over the grid to transfer the selected color to the squares that you touch.

    • Change a color by writing over it with another color.

  3. Using the Eraser tool, erase the color in some squares

    • Click the Eraser button on the palette.

    • Click in specific squares to erase those squares.

    • Click and drag the mouse to erase the squares that you touch.

    • Click a another drawing tool to disable the Eraser.

  4. Click OK to close the dialog and return the icon you created or click Cancel to close the dialog without modifying the selected tool’s icon.

The Toolbar Editor and Icon Editor are shown together below.

Related Topics