How to use a FAB

A FAB, or a Floating Action Button, is useful in highlighting an action a user should take on a screen of scrollable content.

To create the ‘floating’ effect on your screen, make sure that the Scrollable switch is disabled under the screen’s configuration options.

On the screen, put all of your content inside of a Scroll View component. Place a Button or FAB component outside of the Scroll View directly under it.

imagebackground-scrollview

While the Button or FAB is selected, change the Selected Item > Align property in the Styles tab to Center. Next, scroll down to the Position section and switch its Position Type from relative to absolute. While still in the Position section, change the positioning at the bottom of the Button to keep it from touching the bottom of the screen (if you don’t have a set number in mind 16 is good!)

Once finished, the FAB should appear on your screen as shown below:

fab%20finished%20small

1 Like