How to use the expandable Floating Action Button

Published in

UX Collective

5 min readSep 13, 2020

A basic ExpandableFab using default values for properties and animations

Earlier I wrote about what the Expandable Floating Action Button is (henceforth ExpandableFab) and why you should be using it in your Android applications.

In this article we’ll cut through the marketing fluff and dig right into how you as a developer/designer can actually use the ExpandableFab and customize it to your (and your user’s) needs.

Follow along using the example app on the library’s GitHub repo, or pull it into your own project using:

Gradle: implementation 'com.nambimobile.widgets:expandable-fab:X.X.X'

or Maven:

<dependency>
  <groupId>com.nambimobile.widgets</groupId>
  <artifactId>expandable-fab</artifactId>
  <version>X.X.X</version>
  <type>aar</type>
</dependency>

Note: replace X.X.X with the latest version seen on our GitHub or in Maven Central’s release repo.

ExpandableFabLayout

All components of the ExpandableFab widget must be wrapped in an ExpandableFabLayout element. This element is just your typical ViewGroup (specifically, it extends from CoordinatorLayout), so you can have it as the root element of your layout, or just as a child. It controls the bulk of the widget’s functionality, from coordinating opening and closing animations to handling screen orientation changes and more.

Let’s make it the root view of our layout, so our layout file will currently look like:

ExpandableFab

Next, lets add an ExpandableFab as a child of our ExpandableFabLayout. The ExpandableFab is the focal point for the ExpandableFab widget’s functionality from the end-user’s perspective, as it is the button the user must click in order to have all of the available actions animate outwards.

We’ll customize our ExpandableFab to be placed in the bottom right of our screen, with some margins so it isn’t flush against the sides. Lets also change its color, icon, icon rotation (for animations) and closing anticipate tension (which is used to mimic an AnticipateInterpolator). Finally, let’s give it a label.

Our layout file will now look like this:

and if you ran the app now, you’d get this:

FabOption

Currently, we have an ExpandableFab that doesn’t expand to reveal any actions. So, let’s add some. An action in this library is represented by a FabOption.

We’re going to add 3 FabOptions to our ExpandableFabLayout. Let’s customize the colors and icons of each FabOption, then give them labels which we will also customize.

Now, our layout file will look like this:

and produce the following widget:

ExpandableFab with label and 3 FabOptions

Overlay

Say you want the current content on the screen to be slightly or fully obscured so that the emitted actions of the ExpandableFab grabs the user’s attention. That’s where the Overlay comes in.

Let’s add an Overlay and customize it to be black with a 75% alpha/opacity (which will make it appear dark gray). Let’s also set the Overlay’s opening animation duration to 1 second, so it transitions in smoothly.

Our layout file will now look like the following:

and produce the widget below when we run the app:

ExpandableFab, FabOptions and an Overlay. NOTE: the gif may make the Overlay transition seem choppy. In practice, the Overlay’s transition is very smooth. Try it in an app to see!

At this point we have a fully designed ExpandableFab. We can simply assign some onClick behavior to our FabOptions (and the ExpandableFab itself too!) and be on our way. But there are even more cool features of the widget to discover.

Screen Orientation Aware

The ExpandableFab widget is screen orientation aware, meaning it can display different elements between portrait and landscape. By default, all components of the widget will show in both portrait and landscape. Tilt your device into landscape orientation right now and you will see the same widget that we created above.

In order to set different views to be shown in landscape, you must explicitly specify an orientation of landscape on the views you want to appear in landscape orientation.

Overlay: app:overlay_orientation
ExpandableFab: app:efab_orientation
FabOption: app:fab_orientation

Why use this feature? Imagine having 7 actions defined to show in portrait orientation when the ExpandableFab is clicked. Unless the user has a tablet, they will not have enough screen height to show all 7 actions in landscape. Instead, we can set a separate widget for landscape mode that only shows, say, a single action. This single action, when clicked, can open an AlertDialog that cleanly displays the full 7 actions for the user to choose from.

There are a number of different use cases for defining separate portrait and landscape widgets. And remember, the library automatically handles showing the correct one for you. Try editing the layout we created above to include a separate set of Views to be shown in landscape only, then tilt your device and see it in action!

Helpful Utility Methods

If you have many views within the ExpandableFab widget, it can be a pain keeping a reference to each one. Especially if you’re now taking advantage of its screen orientation awareness.

Luckily for you, the ExpandableFabLayout (remember, it’s the container for all of our components) not only keeps track of this, but exposes it through a clean interface in an object called OrientationConfiguration. Each OrientationConfiguration has accessible references to the ExpandableFab, Overlay and FabOptions shown in that orientation.

To get the configuration for portrait orientation, call expandableFabLayout.portraitConfiguration. To get it for landscape, call
expandableFabLayout.landscapeConfiguration.

If you don’t know (or don’t care) which orientation the device is currently in, simply call expandableFabLayout.getCurrentConfiguration() and the library will give you the correct OrientationConfiguration for the current device orientation.

Now in your code, if you want to change the color of the first FabOption shown in portrait orientation, you can simply call: expandableFabLayout.portraitConfiguration.fabOptions[0].fabOptionColor. Nice, simple, easy.

There are many other properties you can customize on your ExpandableFab, as well as many other helpful utility methods included in the library that will make your life easier while developing. We hope you find use of the library in one of your projects.

If you end up using the library, let us know so we can showcase your app!

Thanks for reading!