Search code examples
codenameonetoolbar

Codenmae one how to make add a budge on top of an icon and place them in the toolbar

this is what i have triedout

notification = Command.create("", materialIcon(FontImage.MATERIAL_NOTIFICATIONS, 3, 0xffffff), evt -> {
       ////....
    });
    mainForm.getToolbar().addCommandToRightBar(notification);

that's what I have managed to do so far

I want to achieve this below

enter image description here

Solution

  • Badging an arbitrary button is pretty easy: https://www.codenameone.com/blog/badging-arbitrary-components.html

    Button chat = new Button("");
FontImage.setMaterialIcon(chat, FontImage.MATERIAL_CHAT, 7);

FloatingActionButton badge = FloatingActionButton.createBadge("33");
hi.add(badge.bindFabToContainer(chat, Component.RIGHT, Component.TOP));

    The toolbar button is encapsulated though and shouldn't be badged.

    To solve that just don't add commands to the title area. Instead create a completely custom title area by adding your own title label and a badged button styled any way you like. You can do that by using setTitleComponent instead of setTitle and avoiding the add*Command method for those buttons.