Strange placement of multiple FloatingActionButton instances bound to the content pane - codenameone

Question

When binding mor than one FloatingActionButton instances to the content pane I notice a strange grouping effect.
Adding a the first at bottom left and the second at bottom right they are both grouped right.
Adding the first at bottom right and the second at bottom left they are grouped left in creation order.
Is this behaviour to be expected and why then or is it a bug?
Here's the code:
public class FormMultipleFloatingButtons extends Form {
public FormMultipleFloatingButtons() {
this(true);
}
public FormMultipleFloatingButtons(boolean aLeftBeforeRight) {
setTitle("Button Placement");
setScrollable(false);
Container contentPane = getContentPane();
contentPane.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
contentPane.setScrollableY(true);
Style style = contentPane.getAllStyles();
style.setMarginUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
style.setMargin(5, 5, 5, 5);
style.setBorder(Border.createDashedBorder(1));
TextArea textArea = new TextArea(
"The placement of FloatingActionButtons when adding more than one of those.\n\n"
+ "Tap the right toolbar button to recreate the form with swapped creation order "
+ "of the two FloatingActionButton instances.");
textArea.setEditable(false);
contentPane.add(textArea);
Runnable runnableLeft = () -> {
FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(
FontImage2.MATERIAL_CALL_RECEIVED);
floatingActionButton.bindFabToContainer(contentPane, Component.LEFT, Component.BOTTOM);
};
Runnable runnableRight = () -> {
FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(
FontImage2.MATERIAL_SUBDIRECTORY_ARROW_RIGHT);
floatingActionButton.bindFabToContainer(contentPane, Component.RIGHT, Component.BOTTOM);
};
if (aLeftBeforeRight) {
runnableLeft.run();
runnableRight.run();
} else {
runnableRight.run();
runnableLeft.run();
}
getToolbar().addCommandToRightBar(new Command(
"",
FontImage.createMaterial(FontImage.MATERIAL_SWAP_HORIZ, style)) {
#Override
public void actionPerformed(ActionEvent evt) {
FormMultipleFloatingButtons formMultipleFloatingButtons = new FormMultipleFloatingButtons(!aLeftBeforeRight);
formMultipleFloatingButtons.show();
}
});
}
}

Answer 1

The content pane only supports one FloatingActionButton. Since adding a fab to the content pane places it in the layered pane and that is an exclusive position adding two fabs cause a collision.
This isn't something we designed for as the UX of FAB is pretty clear that there should be just one and if more functionality is needed you can add it below.
If you still want to do this you can use a Container within the content pane and bind to that.

Answer 2

To have a "next" and "previous" FloatingActionButton to scroll through my tabs, I did the following:
private FloatingActionButton fabRight = FloatingActionButton.createFAB(FontImage.MATERIAL_KEYBOARD_ARROW_RIGHT);
private FloatingActionButton fabLeft = FloatingActionButton.createFAB(FontImage.MATERIAL_KEYBOARD_ARROW_LEFT);
tabs.addSelectionListener((i1, i2) -> {
fabRight.setVisible(i2 != tabs.getTabCount() - 1);
fabLeft.setVisible(i2 != 0);
});
fabRight.addActionListener(e -> {
int index = tabs.getSelectedIndex() + 1;
tabs.setSelectedIndex(index);
fabRight.setVisible(index != tabs.getTabCount() - 1);
});
fabLeft.addActionListener( e -> {
int index = tabs.getSelectedIndex() -1;
tabs.setSelectedIndex(index);
fabLeft.setVisible(index != 0);
});
Container cntRight = fabRight.bindFabToContainer(tabs,Component.RIGHT, Component.BOTTOM);
Container cntLeft = fabLeft.bindFabToContainer(cntRight,Component.LEFT, Component.BOTTOM);
BorderLayout bl = new BorderLayout();
bl.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_CENTER);
setLayout(bl);
add(BorderLayout.CENTER, cntLeft);
add(BorderLayout.SOUTH, cntButtons);