There are times where you’ll build a screen that has static and scrolling content. Here we’ll introduce a few cases and show you how to build them in Draftbit.
- Creating a FAB
- Using a Floating Header
- Fixed Background with Floating Content
Please note: When building all of these screens, make sure that the screen you’re working on is set to NOT be scrollable.
Creating 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.
On the screen, put all of your content inside of a ScrollView component. Place a Button or FAB component outside of the ScrollView directly under it.
While the Button or FAB is selected, scroll down to the Alignment dropdown in the config panel and change Align Self to Center. Next, in the Position dropdown, 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 20 is good!)
Another common use of the FAB would be the FAB Mini on the lower corner of a screen (As seen in Twitter, for example) . To achieve this, you can add it to your screen, set the Position Type from relative to absolute and set the position to 20 at the bottom and on the right.
Floating Header
To create a floating header as seen here:
Simply add a Container to the top of your screen followed by a ScrollView . Set an Elevation, Background Color, Height ( 250px ) and Width ( 100% ) on the Container.
Once you’re done configuring and adding content to the header, add the rest of your content inside the ScrollView. As the user scrolls down the page, the content inside the header will remain at the top.
Another great example of the a floating header in use can be seen in this example here. (Click “Tap to Play” and then “Start Demo”).
Fixed Background with Floating Content
To create this effect seen in this example (click “Tap to Play” and then select the album cover under “January”).
Add an Image Background to your screen (or a Container with the width and height both set to 100% ) and add a ScrollView inside of that as seen below.
With this setup, any content you add inside of the ScrollView will sit on top of the Image Background (which will remain in the same place) as the user scrolls up and down the screen.