How to achieve Floating Action Button in Codenameone?

Question

Floating Action button in android is good option. I want this in my codenameone application. I have tried it by using LayeredLayout, by having two layouts. I'm unable to achieve it perfectly. The button is keep moving along with the scroll. how to fix the button to the right bottom of the screen without affecting when the background layer is scrolling.

Here is how i tried.

Form myForm = new Form();
myForm.setLayout(new LayeredLayout());
myForm.setTitle("Floating Action Button");

SpanLabel lbl = new SpanLabel("some long text");

Container conBottom = new Container();
conBottom.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
conBottom.addComponent(lbl);

FlowLayout flow = new FlowLayout(Component.RIGHT);
flow.setValign(Component.BOTTOM);
Container conUpper = new Container(flow);
conUpper.addComponent(new Button("+"));
conUpper.setScrollable(false);

myForm.addComponent(conBottom);
myForm.addComponent(conUpper);

myForm.show();

Here is the link similar to what i want to achieve. https://github.com/Clans/FloatingActionButton Please Help! Thanks!

Answer 1

The Form's content pane is performing the scrolling, you need your bottom container to handle the scrolling instead. Try this:

    Form myForm = new Form();
    myForm.setLayout(new LayeredLayout());
    myForm.setTitle("Floating Action Button");

    SpanLabel lbl = new SpanLabel("some long text ");

    Container conBottom = new Container();
    conBottom.setScrollableY(true);
    conBottom.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    conBottom.addComponent(lbl);

    FlowLayout flow = new FlowLayout(Component.RIGHT);
    flow.setValign(Component.BOTTOM);
    Container conUpper = new Container(flow);
    conUpper.addComponent(new Button("+"));
    conUpper.setScrollable(false);

    myForm.addComponent(conBottom);
    myForm.addComponent(conUpper);
    myForm.setScrollable(false);
    myForm.show();

Answer 2

Another way to achieve this is by placing the button on the form LayeredPane. This allows you to customise your form layout to handle anything you want. With this, you don't have to set your form to LayeredLayout. Here is a code you can use to achieve that:

    FlowLayout fl = new FlowLayout(Component.RIGHT);
    fl.setValign(Component.BOTTOM);
    Container cont = new Container(fl);
    Button btn = new Button("+");
    //OR
    //Button btn = new Button(getImageFromTheme("plus_icon.png"));
    btn.addActionListener(null);
    btn.setUIID("ButtonFloat");
    cont.addComponent(btn);
    myForm.getLayeredPane().addComponent(cont);
    myForm.getLayeredPane().setLayout(new LayeredLayout());

    btn.addActionListener(new ActionListener() {

        @Override
        public void actionPerformed(ActionEvent evt) {
           //Handle your btn click here
        }
    });

Answer 3

While the other answers are still 100% correct there is now a builtin Floating Button component: https://www.codenameone.com/blog/floating-button.html