Badge on internal application icon

I’m using push notifications and all is working fine at the application icon level. However, I need to apply badges to two internal buttons/icons. E.g. if a badge with ‘8’ on it is showing when the application is not active (application icon), when the user opens the application, on the main page, there are two internal buttons/icons for which I need to display how many of the eight being to the first icon, how many to the second.

Right now, the internal buttons are simple text fields with fa icons inserted. I can’t see any obvious way of overlaying one icon with another icon; I’ve looked at editing the fa icon font file to add duplicate symbols with a red dot in the corner but that won’t work either. Note that, if necessary, I can dispense with a number in the badge and just display a red dot.

Is there any recommendation on how to do this?


FYI - for anyone else out there who needs to do similar, I solved this by editing the glyph font file (.tiff) to add new characters which I then overlaid on top of the original internal application icon (which is a glyph) using a Panel set up…

Wasn’t really sure what you’re talking about but if its an internal badge number, your app should be managing that by getting it from your own api? As in its not tied to your apps external badge number.

@aeq, no, it’s not the application icon… as you say, that is handled by the system. The main screen of this app has six icons so I want to put a red dot on one or more of them depending on the topic in the notification. So, when you see a badge on the application icon and open the app, you can see what section of the app has something for you to look at…

Ok, so why not create a panel with a circle as the background layer and a text in it? Make it a class and create multiple instances. If you need different icons or colours, then add a stategroup to the class.

@aeq - my concern with doing how you suggest, or something similar, was that I expected issues trying to keep the red dot in exactly the right place given different screen resolutions and orientations. The way I did it means that the red dot is guaranteed to be precisely where I need it to be no matter what

I’m thinking along the lines of a responsive layout vs a static one but its totally upto you.