3

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.

floating action button can morph into related actions

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.

floating action button morphs into a toolbar

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.

enter image description here

1
  • What did you use to morph the button to a toolbar in the first place?
    – AdamMc331
    Jul 5, 2015 at 17:38

2 Answers 2

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.

0

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.

2
  • In the case of the reversible menu button, the rest of the UI is blocked. It doesn't seem clear to me that this is how Android works when a FAB is morphed. I would love to see an example to the contrary.
    – nipponese
    Mar 17, 2015 at 23:45
  • That's right. There is nothing magic about full-screen vs non full-screen (eg what if it was an 80% height bottom sheet?). You will have to determine what is appropriate. There is a reason it's not clear to you: Material Design is no opinionated with respect to this area.
    – tohster
    Mar 18, 2015 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.