How to make a round Progress Bar in codename one?

Question

I want to create a round progress bar, depicting the current status in percent in its mid. like this:

now I already followed the instructions on creating a flat progress bar, but as I am not familiar with swing and I don't have any clue of Javas graphics, I have no clue how to transfer from the 'flat' to the 'round' progress bar.

How could a code similiar to the progress bar look like?

ps: I saw Hannahs post on the analog clock and tried it like this - but failed due to my lack in painting (and maybe mathematical) skills.

pps: I don't use the GUIBuilder at all (bare bones)

ppps: I want it to be drawn (if possible), not image-based

Answer 1

I haven't tested it but something like this should work:

Container progress = new Container(new LayeredLayout());
Label percent = new Label("0%");
percent.getUnselectedStyle().setAlignment(Component.CENTER);
progress.add(new Label(progressOverlayImage, "Container")).
        add(FlowLayout.encloseCenterMiddle(percent));
progress.getUnselectedStyle().setBgPainter((Graphics g, Rectangle rect) -> {
    g.setColor(0xff0000);
    g.fillArc(progress.getX(), progress.getY(), progressOverlayImage.getWidth(), progressOverlayImage.getHeight(), 0, currentProgress360);
});

You will need the following to get this to work.

• You will need to update the percentage label when changing the progress value
• You will need an "overlay image" that is transparent where you want the progress to appear
• You will need a variable called currentProgress360 that will represent the current state of progress between 0 and 360