How to create Facebook-like notification badges in CodenameOne

Question

https://i.sstatic.net/XAUHW.png

I want to implement such notification counters for my chat app. Anyone knows how to do this in CodenameOne?

Thanks.

Answer 1

See this:

    Form hi = new Form("Badge");

    Button chat = new Button("");
    FontImage.setMaterialIcon(chat, FontImage.MATERIAL_CHAT, 7);
    Label badge = new Label("33");
    badge.getAllStyles().setBorder(
            RoundBorder.create().rectangle(true));
    badge.getAllStyles().setAlignment(Component.CENTER);
    int size = Display.getInstance().convertToPixels(1.5f);
    badge.getAllStyles().setFont(Font.createTrueTypeFont("native:MainLight", "native:MainLight").
            derive(size, Font.STYLE_PLAIN));
    Container cnt = LayeredLayout.encloseIn(chat, FlowLayout.encloseRight(badge));
    cnt.setLeadComponent(chat);

    hi.add(cnt);

    TextField changeBadgeValue = new TextField("33");
    changeBadgeValue.addDataChangedListener((i, ii) -> {
        badge.setText(changeBadgeValue.getText());
        cnt.revalidate();
    });
    hi.add(changeBadgeValue);

    hi.show();

Notice that the current version of RoundBorder has a slightly larger minimum size. This was fixed in the coming update.