Skip to content

Floating Action Button

Non-Visible component
Category Requires Version
User Interface API 21, Android 5.0 Lollipop 2

Overview

A non-visible component that is used to create Floating Action Buttons.
Floating Action Buttons are used to indicate the primary action of the screen.

Events

Click

Event to detect that the fab button was clicked.

Long Click

Event to detect that the fab button was long clicked.

Methods

Hide

Hides the fab button.

Hide Label

Hides text message.

Show

Shows the fab button.

Show Label

Show a new text message near to the fab with the given properties. You can do the changes with the properties in the advanded category.

Start Rotation Animation

Starts a rotation animation. You can use the 'Rotation Duration','Rotation Start Degrees' and 'Rotation End Degrees' to define the animation. This block will work too if the 'Rotation On Click' property is disabled.

Properties

Background Color

Color Default: #2196F2FF  ➖ Read Write - Designer Blocks

Returns the fab's background color.

Call Fab Click Event When Label Clicked

Available as Advanced Property

Boolean Default: False ➖ Read Write - Designer Blocks

If true the FAB click listener will be invoked on a text message click.

Call Fab Long Click Event When Label Long Clicked

Available as Advanced Property

Boolean Default: False ➖ Read Write - Designer Blocks

If true the FAB long click listener will be invoked on a text message long click.

Elevation

Number Default: 10 ➖ Read Write - Designer Blocks

Property for Elevation

Hide Label When Clicked

Available as Advanced Property

Boolean Default: True ➖ Read Write - Designer Blocks

Hide the text message when clicking on the message

Hide Label When Long Clicked

Available as Advanced Property

Boolean Default: True ➖ Read Write - Designer Blocks

Hide the text message after a long click on the text message.

Icon

Text ➖ Read Write - Designer Blocks

The path for the used image in FAB.

Icon Color

Color Default: #FFFFFFFF  ➖ Read Write - Designer Blocks

The color for the material icon.

Label Background Color

Available as Advanced Property

Color Default: #444444FF  ➖ Read Write - Designer Blocks

Set the text message background color.

Label Corner Radius

Available as Advanced Property

Number Default: 8 ➖ Read Write - Designer Blocks

Set the text message corner radius.

Label Text

Available as Advanced Property

Text ➖ Read Write - Designer Blocks

Set the text message.

Label Text Color

Available as Advanced Property

Color Default: #FFFFFFFF  ➖ Read Write - Designer Blocks

Set the text message color.

Margin Bottom

Number Default: 16 ➖ Read Write - Designer Blocks

Returns the fab's bottom margin.

Margin Right

Number Default: 16 ➖ Read Write - Designer Blocks

Returns right margin

Material Icon Name

Text Default: add ➖ Read Write - Designer Blocks

Use a 'Material' icon for the fab without uploading a image resource into your project. You can find the icon name here at https://material.io/resources/icons

Ripple Color

Available as Advanced Property

Color Default: #FFFFFFFF  ➖ Read Write - Designer Blocks

Returns the fab's ripple color.

Rotate On Click

Available as Advanced Property

Boolean Default: True ➖ Read Write - Designer Blocks

Returns true if the fab will rotate on click.

Rotation Duration (millisecond)

Available as Advanced Property

Number Default: 300 ➖ Read Write - Designer Blocks

Returns the fab's rotation duration in milliseconds.

Rotation End Degrees

Available as Advanced Property

Number Default: 360 ➖ Read Write - Designer Blocks

Returns the fab's rotation end degrees.

Rotation Start Degrees

Available as Advanced Property

Number Default: 0 ➖ Read Write - Designer Blocks

Returns the fab's rotation start degrees.

Show Label On Left Side

Available as Advanced Property

Boolean Default: True ➖ Read Write - Designer Blocks

Set the text message to the left side of the floating button. If false the text will be on the right side.

Size

Number Default: 1 ➖ Read Write - Designer Blocks

Sets the size of the button. Use '1' for normal, '2' for mini or '3' for auto size based on the screen size.

Visible

Boolean Default: True ➖ Read Write - Designer Blocks

Returns true if the fab button is visible.


Last update: November 9, 2022