Determine what goes in the FloatingActionMenu

[niqdev]

As suggested, we should decide which actions go in FloatingActionMenu and which ones in ActionMenu depending on the most frequently used and that action fab menu size should not exceed 6. Current/future actions:

• device
• light
• automation
• temperature
• sound
• ipcam
• alarm

[moreau-nicolas]

At the moment there are six items and six slots. So... Do we really have a problem ? :smiley_cat:

Anyway, I think that "device" might be a good candidate to remove from the FAB : it is an "advanced" feature that most users shouldn't need if we support the 5 other device types. It could be moved to a sub-menu that would appear when clicking on the debug bugdroid with a label that says "add custom device" or "add debug device".

Another way to do it would be to have a dedicated "sandbox" activity where users can type something and see the results. But I stray (a bit) from the main subject, sorry.

What do you think about this ?

[niqdev]

I tried to add 7 fab, but I think even 3 probably is to much if you rotate the device (tested on emulator api 16), or at least we should handle screen height and hide them, I don't know if is supposed to scroll

[moreau-nicolas]

Oh, yeah I didn't think of screen orientation. Silly me.

What do the guidelines say about FABs in landscape mode ?

[niqdev]

Here there is no explanation, but have a look at trello's app, they hide actions if there is no more space. Also the alpha background would be great!

[moreau-nicolas]

Reading through the guidelines I found this video. What do you think about it ?

It would obviously solve the landscape orientation issue as the new material sheet can be scrollable, that's common UI practice.

This other video that I thought could help shows that the button can transform into a fullscreen experience. That gave me an idea : we could leverage the fact that support libraries version 23.2 provide the bottom sheet functionality to make a bottom sheet appear on FAB click. It's not-that-different from the "new material sheet" idea above, just a slight variation.

Regarding how Trello does things, I have played a bit with the app on my phone and in fact they don't handle the landscape situation at all : I can see the tip of a button just under the Action bar. It might depend on a screen size though. That would explain why your screenshot looks fine.

[niqdev]

Reading the docs, it seems that we need a modal bottom sheet, than we can choose between List-style and Grid-style. As you said this is scrollable.

So the idea is to open a modal bottom sheet from a single fab? Removing the fab menu? Than user can select and action and open the corresponding activity or dismiss the modal scrolling it down/touching above the modal (in the grey area)? I've added Alarm action to the list as nice to have and opened an issue

[moreau-nicolas]

Yes, I agree with removing the menu and adding a bottom sheet. It won't be as pretty as the menu, but it will be more scalable.

[niqdev]

I will work on this. Just to be sure, @moreau-nicolas I will substitute FAB with native implementation and use it to show the BottomSheet, do you agree?

[moreau-nicolas]

Sorry for the late answer. What do you mean by "native implementation" ?

[niqdev]

Don't worry, I'm already working on this on a new branch, actually there are 3 solutions:

• example of native solution: I have to manage the icon menu grid on my own
• I like Flipboard style but there is a problem, the dark layer doesn't cover the AppBar/Toolbar
• other library, but as the author says, is no more supported

[moreau-nicolas]

Please use the Google support library ! Version 23.2.0 (which we already use for vector-drawable support) provides a "bottom sheets" implementation . :)

[niqdev]

All support libraries have been updated to the latest version i.e. 23.2.1, there was a bug with fab. Now both FAB and BottomSheet are natives.

I've almost finished, but I need help for icons, I would like to have nice vector drawable icons, not png. Could you help me @moreau-nicolas to update the icons, please? Now I've used this to generate them. I'm currently working on this branch: fab-bottom-sheet

[niqdev]

Implementation and tests are completed, I must only change the menu icons

[niqdev]

Final result, only long shadow is missing!

[niqdev]

Version 2.0.0 should be available in few hours only for beta tester. @moreau-nicolas, if you wish to improve something let me know, otherwise I will release the app in prod next days and close the issue. Thanks

[moreau-nicolas]

Congrats, the final result looks very nice ! :)

The only thing I'd like to change from the screenshot above would be to use a circle-shaped background for the icons rather than a square-shaped one: using the same shape connects the actions with the FAB because they are both circles. But squares are fine too, it's just a matter of taste.

[niqdev]

Honestly I don't really know, docs don't say anything about that, but fab docs lists a lot of "don't do it" and it seems that they suggest to use only circle for button actions, but I really don't know. We can try maybe and see how it looks.

[moreau-nicolas]

Yes, it was just a suggestion. :)