Can a Floating Action Button morph be reverted?

Question

There are two specific examples in the Android Floating Action Button guidelines that explain how the button can morph into either new buttons, or a toolbar.

If the hallmark of the app is adding file types, a floating action button can morph into related actions after it is first touched.

If a floating action button morphs into a toolbar, that toolbar should contain related actions. In this example, the button lets the user select the media type to add.

After the button has morphed, how does the user revert back to the previous single button mode?

As I understand it, the rest of the UI is not blocked after these buttons have morphed, so it's not clear how the user can hide the new buttons or revert the morphed shape if they decide not to go through with the new action.

Update

This is more commentary than anything else: I just took a look at Drive to find implementation examples and found an Bottom sheet instead of a FAB morph.

Answer 1

While the guidelines don't state anything about reverting the state of a Floating Action Menu triggered by a Floating Action Button, two patterns have become prominent in this use case, and rightly so:

1. The Floating Action Menu in Inbox fades in a translucent white overlay over the rest of the content, drawing focus towards the menu. While the rest of the UI is not blocked, the overlay portrays it and disabled or unusable when the Floating Action Menu is in focus, a tap anywhere outside the menu causing it to lose focus and thus revert its state. This pattern has also been adopted by apps like Evernote and Cabinet

2. The second pattern involves the Floating Action Button staying on as one of the items in the Floating Action Menu, changing its form to match that of a close button, portraying the close action concisely while not blocking the UI. Here's an excellent Gist and Gif of this implementation.

Answer 2

Yes it can

While the Material Design guidelines don't specify how morphing items are reversed:

1. There are implemented examples of reversing animations. For example, this demo shows a reversible menu button which could be used in a floating button or fixed navbar.

2. Reversible interactions which comport with Material Design physics. A morphing button might open a slide-up bottom sheet, a slide down paper element, or a fold-down item....the morphed button could reverse that effect using the same material physics and it would comport with the principles of Material Design.