FAB extension

Description

Events

• Click: Event handler when the FAB is clicked.

• LongClick: Event handler when the FAB is long clicked.

---

Methods

• ButtonBackgroundColor: Sets the background color of a button to a specified color. Parameters: button: Is the button to be changed its background color. String color: The new color background of the selected button in HexCode format.

• ChangeIconFade: Method for toggling between icons using fade animation. Parameters: String newIconCode: Text with the code of the new icon to be displayed. Number duration: Duration of the fade animation in miliseconds. Note: Codes for the newIconCode are available depending of the IconsFont selected: Material Icons, Font Awesome or Icomoon. If the code has two or more words, join them with underscore: “_”. Example: “add_alarm”.

• ChangeIconRotate: Method for toggling between icons using rotate animation. Parameters: String newIconCode: Text with the code of the new icon to be displayed. Number rotationIcon: Degrees where the previous icon will be rotated to. Number rotationNewIcon: Degrees where the new icon will be rotated to. Number durationIcon: Duration of the previous icon’s rotation effect. Number durationNewIcon: Duration of the new icon’s rotation effect. Note: Codes for the newIconCode are available depending of the IconsFont selected: Material Icons, Font Awesome or Icomoon. If the code has two or more words, join them with underscore: “_”. Example: “add_alarm”.

• ChangeIconZoom: Method for toggling between icons using zoom animation. Parameters: String newIconCode: Text with the code of the new icon to be displayed. Note: Codes for the newIconCode are available depending of the IconsFont selected: Material Icons, Font Awesome or Icomoon. If the code has two or more words, join them with underscore: “_”. Example: “add_alarm”.

• CreateFAB: Method for creating a new floating action button (FAB), it should be use when initializing the screen.

• InvisibleFAB: Method for setting the visibility of the FAB to false. Parameters: Number duration: Duration of the animation in miliseconds. Number startDelay: Duration of the delay before starting the animation in miliseconds.

• VisibleFAB: Method for setting the visibility of the FAB to true. Parameters: Number duration: Duration of the animation in miliseconds. Number startDelay: Duration of the delay before starting the animation in miliseconds.

---

Properties

• ColorBackgraund: Specifies and returns the color of FAB’s background in HexCode format. Also available in Designer Properties. Default: #4862A3.

• ColorFont: Specifies and returns the color of the icon displayed in HexCode format. Also available in Designer Properties. Default: #FFFFFF.

• Elevation: Specifies the shadow effect between the FAB and the back screen. Also available in Designer Properties. Default: 6.

• FABsize: Specifies the size of the FAB (in dp). Also available in Designer Properties. Default: 56.

• IconCode: Specifies the code for the FAB’s icon. Also available in Designer Properties. Default: “&#xE8B6”. Note: Codes for the iconCode are available depending of the IconsFont selected: Material Icons, Font Awesome or Icomoon. If the code has two or more words, join them with underscore: “_”. Example: “add_alarm”.

• IconSize: Specifies the size of the FAB’s icon (in dp). Also available in Designer Properties. Default: 32.

• IconsFont: Specifies the font of the icon in the FAB. Also available in Designer Properties. Default: “None…”. Note: I recommend to use icons fonts from: Material Icons, Font Awesome or Icomoon. Upload the file to assets and select it here.

• MarginBottom: Specifies the space between the bottom of the screen and the bottom of the FAB in dp. Also available in Designer Properties. Default: 25.

• MarginRight: Specifies the space between the right side of the screen and the right side of the FAB in dp. Also available in Designer Properties. Default: 25.

---

Best practices

It is a good practice to create the Floating Action Button when initializing the screen and  when the screen orientation changes. You can create more than one FAB by dragging and adding to the invisible components.

In order to work with the event after when a FAB is clicked use the Click Event Handler, this way you can decide what to do after a FAB is clicked. In this example, we set the visibility of the other three FABs depending on the flag value.

Also, you can use a mini FAB as a counter. Let’s say you want to count the times your FAB1 is being clicked: Create a FAB2 and position it in the corner of the FAB1 of your choice, upload a font with numbers (in this case we used Raleway), set it in the IconsFont designer property, set IconFont to 1, use these blocks and that’s it!

---

Test the extension

Test video

---

Changelog

• Jun 22th, 2017 – Demo version
• Jun 23th, 2017 – More animations: Rotation, Zoom, Fade in, fade out. Other fonts: Material Icons, Font Awesome and Icomoon.