Skip to content

Button

Overview

A button is a basic UI element with which the user can interact with your apps by tapping or clicking on it to perform an action.



Preview of button

A typical button

Properties

Background Color

( Getter + Setter )
Type: Color

The background color with which the text of the Button is shown.

If the Image property is set, then this is overriden.

Border Shadow

( Advanced | Setter only | Designer)
Type: Color

The color of ripple effect when touching the button.

Enabled

( Getter + Setter )
Type: Boolean

Determines whether the Button is enabled or not. A disabled component does not execute any of the Events. It does not respond to any interactions with it by the user.

Options
true The Button is enabled and will execute Events when they occur.
false The Button is disabled and will not execute Events when they occur.

Font Bold

( Getter + Setter )
Type: Boolean

Determines whether the text of the Button is displayed in Bold or not.

Options
true The text is displayed with bold style.
false The text is displayed without bold style.

Font Italic

( Getter + Setter )
Type: Boolean

Determines whether the text of Button is displayed in Italics.

Options
true The text is displayed with Italics style.
false The text is displayed without Italics style.

Font Size

( Getter + Setter )
Type: Number

The font size with which the text of the Button is displayed.

Font Typeface

( Setter only | Designer)
Type: Text

The font family of the text displayed.

Options
Default The default font of an Android device.
Sans Serif The default Sans Serif font of an Android device.
Serif The default Serif font of an Android device.
Monospace The default Monospace font of an Android device.
Roboto thin The thin style of Roboto font family.
Roboto regular The regular style of Roboto font family.
FontAwesome The Font Awesome icon font of version 4.7.0 . Use the unicode of the icon from the cheatsheet as the text to display the corresponding icon. For example, setting the text as  will display the Google logo.
Material Icons The Material Icon font from Google. Use the unicode of the icon that can be viewed by selecting an icon here. For example, setting the text as  will display a single tick mark.

Default fonts in Android devices

The default font in an Android device is usually Roboto in most of the devices although some devices(like Samsung) have an option to customise this font

Font Typeface Import

( Setter only )
Type: Asset

The custom font family that can be set for the of the text displayed. To use a custom font, other than the ones from Font Typeface, upload the font file (.ttf file) as an asset to the project, and then select it in the Designer. This can also be set with Blocks.

Height

( Getter + Setter )
Type: Number

The height with which the Button is displayed.

Height Percent

( Setter Only )
Type: Number

The height with which the Button is displayed in terms of precentage of the whole screen height.

Image

( Getter + Setter )
Type: Asset

The image that is displayed on the button as a background.

This property overrides the Background Color property.

Rotation Angle

( Getter + Setter )
Type: Number

The degrees that the Button is rotated around the pivot point. Increasing values result in clockwise rotation.

Shape

( Setter only | Designer)
Type: Text

The shape of the Button.

Options
Default The default shape of the button i.e a standard button.
Rectangular The button is in rectangular shape , similar to Default shape.
Rounded The corners of the button are rounded giving it a shape like rounded rectangle.
Oval The Button is in the shape of an oval.

Show Feedback

( Advanced | Getter + Setter )
Type: Number

Determines whether the Button shows a visual feedback for a button that has an image as background.

Touch Color

( Advanced | Setter only )
Type: Color

The color of ripple effect when touching the button.

Text

( Getter + Setter )
Type: Text

The text displayed for the Button.

Text Alignment

( Setter only | Designer)
Type: Number

The alignment of the Text displayed for the Button.

Options
0. Left The Button text is aligned to the left.
1. Center The Button text is centered.
2. Right The Button text is aligned to the right.

Text Color

( Getter + Setter )
Type: Color

The color of the Text displayed for the Button.

Width

( Getter + Setter )
Type: Number

The width with which the Button is displayed.

Width Percent

( Setter Only )
Type: Number

The width with which the Button is displayed in terms of precentage of the whole screen width.

Visible

( Getter + Setter )
Type: Boolean

Determines whether the Button is visible on the screen and shown to the user or not.

Options
true The Button is shown to the user.
false The Button is not shown to the user.

Methods

Button Click

( None )

Perform a Button click. The Click event is also fired when this method is executed.

Set Shadow

( Number x, Number y, Number radius, Color color )

Adds a shadow to the button.

Params
x Number: The x-displacement of the shadow.
y Number: The y-displacement of the shadow.
radius Number: The radius of the shadow.
color Color: The color of the shadow.

With Icon from Font Awesome

( Text position, Text icon Name, Color icon Color, Number padding, Number size )

Inserts an icon from Font Awesome in the button.

Params
position Text: The position of the icon. It can be Left, Right, Top or Bottom
icon Name Text: The Font Awesome icon name or code. See Font Awesome Cheetsheet for available codes.
icon Color Color: The color of the icon.
padding Number: The padding of the icon.
size Number: The size of the icon.

With Icon from Material Font

( Text position, Text icon Name, Color icon Color, Number padding, Number size )

Inserts an icon from Material Font in the button.

Params
position Text: The position of the icon. It can be Left, Right, Top or Bottom
icon Name Text: The Material Icon name. See Material Icons for available icons.
icon Color Color: The color of the icon.
padding Number: The padding of the icon.
size Number: The size of the icon.

With Icon from Picture

( Text position, Asset picture, Number padding, Number width, Number height )

Inserts an icon from an uploaded image in the button.

Params
position Text: The position of the icon. It can be Left, Right, Top or Bottom
picture Asset: The name of the uploaded image
padding Number: The padding of the icon.
width Number: The width of the icon.
height Number: The height of the icon.

Events

Click

( None )

Indicates that the user has clicked the button (i.e pressed and released)

Got Focus

( None )

Indicates the has been cursor moved over the button so it is now possible to click it.

Long Click

( None )

Indicates that the user has clicked and held down the button. Click event is not fired when the Button is long clicked.

Lost Focus

( None )

Indicates the cursor moved away from the button so it is now no longer possible to click it.

Touch Down

( None )

Indicates that the button was pressed down.

Touch Up

( None )

Indicates that a button has been released.