• Home
  • Extensions
  • Open Source
  • Store
  • Cart

  • View cart
Home / Extension / FAB extension

FAB extension

$10.00

Add and control customizable Floating Action Button (FAB) into your project, it includes 3 types of animations: fade, rotate and zoom.

  • Description
  • Reviews (0)

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.

Reviews

There are no reviews yet.

Be the first to review “FAB extension” Cancel reply

Your email address will not be published. Required fields are marked *

Related products

  • by Andres Cotes , Extension

    ListView Custom Sander

    with this extension you can add a listview with 3 textview an image view and custom typography

    $30.00

  • by Andres Cotes

    Showcase Extension

    This extension allows you to add a tour in the app and give information about each element in the user interface

    $15.00

  • by Andres Cotes , Extension

    Sidebar Navigation

    Very useful extension to add a navigation sidebar in your application. It can work as a sidemenu to effectively manage your screens and to display images and information.

    $10.00

  • by Andres Cotes , Extension

    Badge Extension

    This extension allows you to add Badge to the label and button

    $3.00

  • Home
  • Extensions
  • My Account
  • Store
  • Your cart
Inventor.life | Andrés and Carlos, Extension Developers