A modern take on the expandable Floating Action Button for Android

(aka ‘speed dial’)

An ExpandableFab widget with labels

The Material Design spec defines the ‘speed dial’ transition for a FloatingActionButton as a transformation where

Upon press, the FAB remains visible and emits a stack of related actions. If the FAB is tapped in this state, it should either initiate its default action or close the speed dial actions. — Source

The ExpandableFab widget is a highly customizable and modern open-source implementation of this guideline — enabling developers to easily display the available actions of the current UI screen in a beautiful and dynamic way.

Now, you may be thinking, over the years there have been a handful of attempts to get this just right. What makes the ExpandableFab different? Why is a new implementation needed in 2020? Well, I’m glad you asked! Let’s jump right in.

Note: for an in-depth walk-through on how to use the ExpandableFab, see the followup article here:

How to use the expandable Floating Action Button

Easy to Include

Releases of the ExpandableFab library are synced to Maven Central, so you can easily import it in your project via:

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.

No need to clone the source code or manually include AAR artifacts.

Easy to Use

In one of its simplest use cases, the ExpandableFab can be set up by defining just 4 elements: ExpandableFabLayout, Overlay,ExpandableFab, and FabOption. The XML layout snippet below produces the gif shown:

A simple use case with only one action (FabOption) emitted from the ExpandableFab

All properties of the ExpandableFab widget and its custom Views have default values, so animations, colors, margins, elevations and other properties don’t need to be customized unless you want them to be. This allows you as the developer to get up and running easily and quickly, with very little set up.

Don’t waste anymore time with older libraries that require multiple edited files just to produce the result you desire.

Highly Customizable

A highly customized ExpandableFab widget where colors, sizes, icons and animations are changed from their defaults

If you do choose to change the default values, you can easily modify colors, text, size, placement, animations and more of every custom View within the ExpandableFab widget. Just look at the properties available to be customized on the ExpandableFab itself (this doesn’t include properties on the other views of the widget like Overlay, FabOption, etc):

And these are just the properties apart of ExpandableFab's official API. It, like every custom View of the widget, derives from a subclass of android.view.View, so it has all the additional inherited properties you’d expect that are also open for customization.

And since the widget was designed as a proper Compound View, you can access or set all of its properties programmatically and via XML layout files — whatever you’re most comfortable with. Just make sure to include the xmlns:app="http://schemas.android.com/apk/res-auto namespace in each layout file that includes the ExpandableFab widget in order to have access to custom properties.

An ExpandableFab widget using custom sizes for the ExpandableFab and its FabOptions

Orientation Aware

Unless a user is using a tablet, they likely won’t have as much screen space in landscape orientation as they do in portrait. With the ExpandableFab, you can easily define which options show in portrait orientation and which will show in landscape, allowing you to ensure that your UI fits completely in either orientation. This switch will happen automatically as the orientation of the device changes.

You don’t need to use this feature if it’s unnecessary for your project — by default, the ExpandableFab will simply show all options in both orientations.

The XML snippet below shows a use case of defining an ExpandableFab with 3 actions that will show in portrait, and a separate ExpandableFab with only a single action that will automatically show instead in landscape:

Compatible with Material Design Components

Libraries should make your life easier, not harder. Many older implementations of Android’s Speed Dial transition for FloatingActionButtons aren’t compatible with the latest Material Design components and behaviors, leaving you as the developer having to create hacks to get them both to gel.

Well, the ExpandableFab has support for such components and behaviors right out of the box.

Snackbars interacting with an ExpandableFab —animating above and below it

A BottomAppBar cradling an ExpandableFab

Note: if you do not want your Overlay to cover the BottomAppBar, just make sure to define the BottomAppBar after the Overlay.

Clear and Intuitive API

The ExpandableFab’s Published API is highly polished and curated in order to only expose what’s meant to be accessed by you, the developer. Naming schemes for methods and properties are obvious, so there’s no time wasted fishing around for specific functionality like with many other open source projects. Want to increase the Overshoot Tension on a specific Label’s animation? Well, call label.overshootTension. It’s that simple.

And although the ExpandableFab library is written completely in Kotlin in order to take advantage of some of the language’s most powerful features (null safety, function types, lambdas and more), it still comes with both JavaDoc and KDoc documentation, so you can use the language of your choice when developing.

Should you ever find yourself needing to crack open the hood to edit the library’s source code directly, you’ll be glad to see that documentation for everything (including most private and internal methods) is thorough. Have the confidence to make changes knowing that the relevant parts of the code base are exactly what they claim to be.

Using the ExpandableFab library is a quick and easy way to introduce the beauty and power of the ‘speed dial’ functionality to your project in 2020.

If you do give it a try, be on the lookout for some planned feature updates, like:

• Allowing actions to be emitted horizontally (with labels consequently appearing above or below each action)
• Allowing clients to pass entire custom animations to the widget Views (instead of just customizing the default animations).
• and more

Thanks for reading!

Credit: https://material.io/develop/android/components/floating-action-button

GitHub: https://github.com/nambicompany/expandable-fab

Project Website (with links to JavaDoc and KDoc): https://nambicompany.github.io/expandable-fab

Gallery: https://github.com/nambicompany/expandable-fab/tree/master/docs/gallery

Feature Requests & Issues: https://github.com/nambicompany/expandable-fab/issues