CODEWITHSUNDEEP
androidcodenameone
ioscode
ioscode

Reputation: 821

Codenameone Form adds another title instead of updating when Toolbar added

I'm running into a strange issue when adding a Toolbar to my Form in my Codenameone app. If I set a toolbar on my form, it shows another title with the toolbar hamburger and new title below the title of the previous form instead of replacing it like I would expect. It looks like this: enter image description here

The functionality works fine replacing the old title like I would expect when I run in the Codenameone simulator, but I get this weird behavior shown in the image when I make an Android build and run it on a Nexus 5 (6.0.1). The back arrow and "12 of 12" is the title from the previousForm

This is my code, am I doing anything wrong here with the Toolbar usage?

    void goShowResource(final Form previousForm) {
    previous = previousForm;
    final Toolbar bar = new Toolbar();
    final Form rd = new Form("resource details");
    final Resource thisResource = this;

    rd.setToolbar(bar);

    bar.addCommandToSideMenu(new Command("command 1") {
        @Override
        public void actionPerformed(ActionEvent evt) {
            AddResources ar = new AddResources(settings, thisResource);
            ar.goAddResources(rd);
        }
    });

    bar.addCommandToSideMenu(new Command("command 2") {
        @Override
        public void actionPerformed(ActionEvent evt){
            UpdateResource ur = new UpdateResource(settings);
            ur.goUpdateResource(rd, thisResource);
        }
    });

    rd.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    showDetails(rd);
    rd.show();
}

edit: Additonal info, if I open the sidemenu once, the old title bar at the top shrinks away, and I'm left with the the single correct yet incorrectly formatted title area.

Upvotes: 2

Views: 166

Answers (2)

Shai Almog
Shai Almog

Reputation: 52770

You should use the Toolbar for all the forms in the app or disable the default which is native menu bar when working with the toolbar. You can do the latter by editing the theme and selecting the constants tab then pressing "Add" and selecting commandBehavior=Side.

Android currently defaults to the native ActionBar behavior and Toolbar implicitly overrides that, however when a transition occurs from the native to the lightweight component things can get pretty hairy (and might also look unnatural) so we recommend picking one UI paradigm and going with it.

Since the ActionBar is a volatile API we recommend Toolbar going forward as its far more customizable and gives us a lot of control.

Upvotes: 1

Diamond
Diamond

Reputation: 7483

This can be fixed by removing all command from the form after setting the toolbar, then add a fresh back command to the toolbar if required.

void goShowResource(final Form previousForm) {
    previous = previousForm;
    final Toolbar bar = new Toolbar();
    final Form rd = new Form("resource details");
    final Resource thisResource = this;

    rd.removeAllCommands();
    rd.setBackCommand(null);
    rd.setToolbar(bar);

    //Add back command
    Command back = new Command("back") {

        @Override
        public void actionPerformed(ActionEvent evt) {
            previousForm.showBack();
        }
    };
    bar.addCommandToSideMenu(back);

    bar.addCommandToSideMenu(new Command("command 1") {
        @Override
        public void actionPerformed(ActionEvent evt) {
            AddResources ar = new AddResources(settings, thisResource);
            ar.goAddResources(rd);
        }
    });

    bar.addCommandToSideMenu(new Command("command 2") {
        @Override
        public void actionPerformed(ActionEvent evt){
            UpdateResource ur = new UpdateResource(settings);
            ur.goUpdateResource(rd, thisResource);
        }
    });

    rd.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    showDetails(rd);
    rd.show();
}

Upvotes: 1

Related Questions