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

user_9626186 0
Viewed 32

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

codenameone toolbar
2 Answers

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.

user_7568090

This is how I managed to place the icon in the toolbar

Button notifiations = new Button("");
    notifiations.setIcon(materialIcon(FontImage.MATERIAL_NOTIFICATIONS, 3, ColorUtil.WHITE));

    FloatingActionButton badge = FloatingActionButton.createBadge("2");
    badge.setUIID("Notification-Badge");
Container notiCnt = BoxLayout.encloseX(badge.bindFabToContainer(notifiations, Component.RIGHT, Component.TOP));

mainForm.getToolbar().add(BorderLayout.EAST, FlowLayout.encloseRightMiddle( notiCnt));
user_96261860
Related