A button that lets you toggle between two states, and customize actions for each of those states.
Properties for Toggle Button Component
|When components are placed on a page they appear highlighted blue in the scene tree and can
be renamed by double clicking in this panel and typing the new name. Components can also be
set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
|Position and Size
|Sets position and size. As long as measurements are maintained as percentages it deals
automatically with dynamic layout and resizing for different devices and orientations. You
can use millimeters to control aspects of size like width or height on order to create a
button thats size will be maintained across devices.
|A Preset is a pre-determined set of properties and files for a component. You can have a
Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the
component has a Predefined Preset it will automatically be loaded into your app as the
default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so
you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then
selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save
your preset under the Custom tab.
|Select image that will display on the button when it is in normal display state.
|Select image that will display when the button is pressed.
|Select image that will display on the button if it is disabled.
|Toggled default image
|Select image that will display on the button when it is toggled and in its normal display
|Toggled down image
|Select image that will display when the button is toggled and activated.
|Toggled disabled image
|Select image that will display on the button if it is both toggled and disabled.
|Nine slice values
|Preserve the edges and corners of any images you have used. Editing values in the Nine Slice
will apply to all of the button images/states above.
Top Slice: Stop the top of the image from being stretched.
Bottom Slice:Stop the bottom of the image from being stretched.
Left Slice: Stop the left of the image from being stretched.
Right Slice : Stop the right of the image from being stretched.
|Enter a text label for your button in the text editor panel.
|Enter a text label for the toggled state of your button in the text editor panel.
|Dropdown to select either Scale with screen or Fixed Size.
|Scale border with screen
|Checkbox to set border to scale with screen – otherwise border is fixed.
|Text X Position
|Set the horizontal placement of the text on your button on a scale of 0 to 1.
|Text Y Position
|Set the vertical placement of the text on your button on a scale of 0 to 1.
|Checkbox to toggle text visibility on or off.
|Keep aspect ratio
|This property maintains the ratio of the asset as it is stored in the Project’s Resources
|Sets the icon you select from the Image folder to show on your button.
|Adjust the size of your icon on the button, you can set it from 0.2 to 1 (full size).
|Icon X Position
|Set the horizontal position of the icon on your button on a scale of 0 to 1.
|Icon Y Position
|Set the vertical position of the icon on your button on a scale of 0 to 1.
|Set how opaque all imagery/text on buttons will display on a scale of 0 to 100, with 0 being
|Set style and appearance of your text using the Styles Inspector. The Styles Inspector is
accessible through the Edit Style ‘pencil’ icon under the Text Style Properties and from the
File Menu dropdown under ‘ Styles’.
The dropdown will display all the styles you have set in the Styles Inspector. Whichever
style you have selected will populate the properties below. If you alter any of the
properties below for a specific use on a page, then clicking the Refresh arrow will revert
the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will
be added to the dropdown.
Organize Style – opens the Styles Inspector.
|Set font size using plus and minus buttons.
|The color preview shows the color picker. Move around the color pad to select your color you
want. It displays with its web hex code at the top and shows the RGB values below. If you
know the hex code or RGB numbers you can type it directly into the boxes.
|Set how opaque the text will display on a scale of 0 to 100, with 0 being transparent.
|The drop down displays all the fonts you have in your Project. Select the font you want to
|Use this property to adjust the distance between your text characters.
|Toggled Text Style
|Set style and appearance of your text using the Styles Inspector. Exactly the same
properties are applied as in Text Style above.
The Toggle Button component has 2 special events that you can add actions to. These can be found under the
|‘On select’ event will instigate the action when the button is set to activate on toggling.
|‘On deselect’ event will instigate the action when the button is set to de-activate on