The Floating Action Button, or FAB, is one of the most distinctive design features of Material Design, and with this extension you can easily add one to your app.

Overview

Extension Developer Pavitra and Sander
Clone Starter .aia Open in Thunkable
Get the .aix Manual Download
Click-to-Copy Link com.sander0542_pavitra.FAB.aix
Donate to Developers N/A
License N/A </a>

Thunkable Community

If you have any questions about the FAB Extension then head on over to the Thunkable Community where you’ll find lots of amazing people who are happy to help you out.

Installation

You can either follow all the steps as shown in the animation below or you can add the starter project directly to your thunkable by clicking here.

installation

Blocks

Events

These event handlers are used when the FAB is pressed and when the user presses and holds down the FAB.

Click Long Click

Procedures

The Create procedure has to be run in order to make a FAB visible on the screen. If you change any properties before creating the FAB you will cause an error, so the best practice is to create at start-up and then change the visibility if you need it hidden. Init

Settings

Color Gets the colour of the FAB or sets it, using standard colors. Color

Icon The getter returns the path of the FAB image and the setter allows you to specify a new image to use. Have a look at the example app to see this is action. Icon

Is Created The block returns a boolean (true/false) depending on whether or not a FAB has been created successfully. is create

Margins You can specify the distance from the bottom and right edges of the screen using these blocks. margins

Mini Size This is another boolean (true/false) value that specifies where or not you want to use a standard size or mini size FAB. mini size

Visible Toggle the visibility of a FAB with these components visibility

FAB1 This components is especially useful for when you are working with multiple FABs FAB1

Troubleshooting

Unlink a normal button, the FAB need to have an Icon specified. If you try to create a FAB and the icon property is still set to none you will see the following error.

Error

Example

This is the code for the starter project. If you like you can open this starter template directly in Thunkable by clicking here.

Sample App

Want to Help?

There are lots of great extensions being created and updateed everyday. Keeping this site up to date is a huge task. If you want to help out find out more in the Thunkable Community

Post written by: Domhnall

arrow_back arrow_forward