How-to make a FAB.ulous menu on Android
FAB.ulous is a lightweight Kotlin library that help build a FAB menu from a menu XML and customize the pattern you want!
Install
GitHub page:
Simply follow the JitPack instructions.
Getting Started
To set up a FAB.ulous menu you need at least 3 things:
- A
FloatingActionButton
Widget that will be the base for the menu. - A menu XML to build the menu from.
- A
FabulousPattern
that will position the menu items on the screen.
Now you can capture clicks in onOptionsItemSelected
:
Create a custom menu pattern
Simply implement the FabulousPattern
:
getFinalPosition
Contains the algorithm that will compute each menu item final position on the screen.getOpeningAnimation
Contains the animation to play when the menu opens.getClosingAnimation
Contains the animation to play when the menu closes.
Extra Features
Add Overlay
Adding an overlay when the menu opens is very simple; add the view to your layout and let FAB.ulous know about it using setFabOverlay
.
Add a transition on the main FAB
You might want to add some extra animation/transition on the main FAB when you open/close the menu. Simply create a class that implements FabulousTransition
and then pass an instance of that class using setFabTransition
.
Add an extra listener when you click on the main FAB
If you want to add an extra OnClickListener
, for example, in order to track the event, simple pass a View.OnclickListener
to setFABOnClickListener
.