how to add red color badges(notification count) overlay like facebook in android

[UncleBoni]

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

Thanks.

[Shai Almog]

See http://stackoverflow.com/questions/40256864/how-to-create-facebook-like-notification-badges-in-codenameone/40275097#40275097

[Bryan Buchanan]

That's very neat - but it's a lot of hard work setting it up. I can see this sort of thing would be very useful for edit fields to have a tick or cross for data validation (like you see on some web sites).

On Thursday, October 27, 2016 at 12:46:07 PM UTC+10, Shai Almog wrote:

See http://stackoverflow.com/questions/40256864/how-to-create-facebook-like-notification-badges-in-codenameone/40275097#40275097

[Bryan Buchanan]

Is there a better way to add a tick/cross to a text field ?

        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();
        });
       
        Font materialFont = FontImage.getMaterialDesignFont();
        int h = changeBadgeValue.getPreferredH() / 2;
        FontImage tick = FontImage.createFixed("" + FontImage.MATERIAL_CHECK, materialFont, 0x00ff00, h, h);
        FontImage cross = FontImage.createFixed("" + FontImage.MATERIAL_CLOSE, materialFont, 0xff0000, h, h);
       
        Label verify = new Label();
        verify.getAllStyles().setAlignment(Component.CENTER);
        verify.setIcon(cross);
       
        Container cnt1 = LayeredLayout.encloseIn(changeBadgeValue, FlowLayout.encloseRight(verify));
        cnt1.setLeadComponent(changeBadgeValue);
       
        hi.add(cnt1);
       
        hi.show();

[Shai Almog]

There is a lot of code there to clarify and make things 100% in code but really most of this is just theme e.g. the font sizes, borders, alignment etc. would all be something you would do in the theme and not code so that is irrelevant.

The button and badge components are components you would create anyway so there is no real boilerplate there...

So the whole code of placing the badge is really just 2 lines of code (the layered layout enclose and lead component).

We have the validation framework that places error icons, I'd like to revisit that so it uses the material font and the new RoundBorder styling.

I also have some code in the FloatingActionButton to support badging that isn't committed yet, this should make this code shorter.