Two floating action buttons next to each other

Question

The material design documentation has an example of Google Maps showing two floating action buttons next to one another (actually, one above the other).

Answer 1

This answer https://stackoverflow.com/a/33900363/401025 has a major problem: we are not able to set any margins between the two buttons. They stick together.

It seems that at the current state of the design support library v23.3.0 we are not able to have multiple float actions buttons in a coordinator layout that behave correctly. However in the spec https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions this feature is described so we can expect it in the future.

As for know I discovered a workaround:

When you have a look at the google maps android app, you will notice that the first (blue) float action button is floating with the bottom sheet, while the second (my location) button is not. So for the second button create a wrapping relative layout that spans the entire layout. Put it above your bottom sheet layout:

This will exactly mimic the float action buttons of google maps. One drawback with this solution is that you have to set the bottom margin of the wrapper to position the button above the first button. You can do this either in the layout or programmatically:

((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);