Fork us on GitHub

Badging Arbitrary Components

Incorporate a common iOS UI paradigm with ease
Post Image

Badging Arbitrary Components

Last week a question came up in stackoverflow that came out quite a few times before but this time I had a better answer thanks to the round border. After giving that answer I recalled that I already wrote some code to implement badging in the FloatingActionButton but never exposed it because of some bugs…​

So I took the time and looked at the bugs in that code, turns out it was pretty trivial to fix so the same sample I gave for stackoverflow can now look like this:

Form hi = new Form("Badge");

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));

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

hi.show();

That’s shorter (mostly because of default styles) and pretty neat in general. It results in this:

Badge floating button in action
Figure 1. Badge floating button in action

Ideally I’d like to continue this trend into validators and other builtin tools to use more of the builtin borders and material icons. This is something we need to work on more as we move forward.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.