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
FAB component outside of the
ScrollView directly under it.
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
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
absolute and set the position to
20 at the bottom and on the right.
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
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”).
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.