Button with Image & Text labels
Button Block acts as a typical button.
When pressed, it:
- Switches to the Down State
- Displays the Selected Image (until user remove their finger from the Button)
- Fires the Button Down event
When released (user remove their finger from the Button), it:
- Switches back to the Up state
- Swap back to the Unselected Image
- Fires the Button Up event
Learn more with Button Tutorial
Providing two discrete Events for the Down and Up states (as opposed to simply a Tap) allows a button to be used to control state in the system in different ways. A good example of this would be a Fast Forward button (which is currently supported) that advances an audio player ahead quickly while the button is being pressed, and reverts to the normal play rate when the button is released.
Note: For your button to display the same way on all platforms, you must define its height and width in the layout as the height and width of the image used for the button. Scaling options will be ignored.
Note 2: Images will be displayed as is and are not scaled, use appropriate size images.
v6.00-- Separated Button block into two separate Blocks: "Button", which implements a standard button and "Toggle" which implements a 2 states "Toggle" Button.
v5.90 -- [Android] Add "Slide-off" awareness to un-highlight when a user 'slides' off of a button. Image handling re-implemented w/ESCachedImageResource
v5.80 -- [iOS] Fixes an issue in which incorrect data source record may be used for image source when changing button's state when image source comes from a data source.
v5.70 -- [iOS] Fixes an issue in which image style could be ignored and default to Scale to Fill.
v5.50 -- [Android] Fix drag-out behavior to set in default state and not continue showing highlighted.
v5.40 -- Change of ADA behavior. For blocks with IMAGES and TEXT, the ADA TEXT will first come from the ADA field, then the DEFAULT TEXT FIELD as a backup, and from the SELECTED TEXT FIELD as the next backup. This block should show up as a single entity to the TalkBack mechanism and read ONLY the text specified in "Ada Text" field.
v5.20 -- Fixes an issue that prevented block updater to update from v4.XX.
v5.00 -- Initial release of BUTTON block with IMAGE and TEXT LABELING.
|Unselected Text||The text to display by default when the button is not pressed. The text will be shown on top of the Unselected Image.|
|Selected Text||The text to display when the button is SELECTED. The text will be shown on top of the Selected Image.|
|Unselected Image||The image to show when the button is not pressed. This image is REQUIRED. It is best to store that image in the Media Folder OR in a Local SQL DB, if stored on the Internet the app performance might be affected.|
|Selected Image||The image to show when the button is pressed. This image is optional. If you use one, it is best to store that image in the Media Folder OR in a Local SQL DB, if stored on the Internet the app performance might be affected.|
|Unselected Font||The font and color for the Unselected Text.|
|Selected Font||The font and color for the text when the button is SELECTED.|
|Text H Align||The horizontal alignment of the text. Defaults to CENTER|
|Text V Align||The vertical alignment of the text. Defaults to CENTER|
|Text Max Lines||Maximum number of lines to show (defaults to 1).|
|Resize To Fit||If checked, the block will resize to fit its content. This should only be used when this block is within a Layout block, which will adjust its size when this block reports its new size.|
|Shadow Color||Color for the shadow effect under the text.|
|Shadow Offset X||Offset on the X-axis of the shadow.|
|Shadow Offset Y||Offset on the Y-axis of the shadow.|
|Corner Radius||Radius that determines the roundedness of the corners.|
|Border Width||Width of the drawn border.|
|Border Color||Color of the drawn border.|
|Global State Link||Allows linking the up/down state to a global state variable.|
|ADA Text||When ADA is enabled on a device, when this block is tapped, then the ADA Text displayed in this field will be read.|
Before Draw, Button Down, Button Up