Question

I have a Chronometer which increments every second and displays elapsed time on screen.

I also have three Progress Bars:

  • SecondsProgressBar
  • MinutesProgressBar
  • HoursProgressBar

When the Chronometer increments every second I'd like to fill the SecondsProgressBar (By 1) until it's value reaches 60, then I'd like to fill the MinutesProgressBar (By 1) until its value also reaches 60, then the HoursProgressBar should also be filled until it reaches a predetermined amount of hours.

Was it helpful?

Solution

What you want is called a circular progress bar. It is actually rather easy to create one only in XML, by styling the ProgressBar control. Here's an article that gives shows how to built a circular ProgressBar style.

However, one thing you have to keep in mind - circular progress bars are determinate. This means you need to know upfront what is the maximum value you can show. This could be a bit of an issue if you want to do a chronometer that can measure random time periods. But if you know the maximum period you can measure, you can set the range on the progress bar accordingly, and it will take care of the proper drawing of partial values.

The default range is 0-100, intended for showing percentages, so you could just calculate the current value as a percentage of the maximum value and treat that as percentage. But if your range is rather big, the granularity will be too coarse, so if you need finer granularity, you should change the range.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top