B4A Class [B4X] [XUI] [custom view] CircularProgressBar

This class is compatible with B4A, B4i and B4J.

A simple circular progress bar implemented as a custom view.

Usage:
Add the class to your project and add a custom view with the designer. Set its value with"

CircularProgressBar1.Value = 100

The animation is smooth in release mode.

The interesting code is in AnimateValueTo. It implements the animation timeline. You can change the DrawValue implementation to create a completely different animation.


V2.00 is released. It is based on XUI library.

 

[LordZenzo]

Good, so I can see a complete example of the use of sleep, which I still find difficult to digest

buono, cosi posso vedere un esempio completo dell uso di sleep, che ancora lo trovo ostico da digerire

 

[LucaMs]

I added the antialiasing; the initial circles look better but when you start the animation...

Original, withou antialiasing:

With antialiasing:

 

[Erel]

On a real device it looks better than in the screenshots.

 

[LucaMs]

On a real device it looks better than in the screenshots.

Not on my real device (1280 x 800 - scale 1)

 

[Erel]

I've updated the class to enable antialiasing.

 

[LordZenzo]

Antialiasing saves many images from the trash

l'antialiasing salva molte immagini dal cestino

 

[Erel]

Another update. The animation progress is now ease-in ease-out instead of linear. It is based on a formula from this page: http://gizma.com/easing/

The code makes it very simple to change to a different math formula.

 

[StarinschiAndrei]

Hello , i try to compile you example and i got an error:

 

[DonManfred]

Hello , i try to compile you example and i got an error:

https://www.b4x.com/b4a.html

Installation
1. Java JDK v8 <<<<<----

• Open the Java 8 JDK download link.
• Check the Accept License Agreement button.
• Select "Windows x86 (32-bit) or Windows x64" in the platforms list.
• Download the file and install it.

You need to update your JAVA

 

[StarinschiAndrei]

https://www.b4x.com/b4a.html


You need to update your JAVA

Thank you

 

[Misterbates]

Fantastic! I was looking for a circular progress bar to use with a timer app I'm developing. I adjusted the code to allow the display of times (as m:ss), as follows:

Sub Class_Globals
    Private myMaxMillisecs As Long ' For m:ss display - set to the number of milliseconds representing the maximum time (100%)
End Sub

Public Sub setMaxMilliSecs(NewValue As Long)
    myMaxMillisecs = NewValue
End Sub

Public Sub getMaxMilliSecs As Long
    Return myMaxMillisecs
End Sub

Private Sub DrawValue(Value As Float)
    [snip]
    If myMaxMillisecs = 0 Then
        mLbl.Text = $"$1.0{Value}"$
    Else ' Show m:ss by scaling maxMilliseconds
        Dim lblMillisecs As Long = myMaxMillisecs * (Value / 100) ' Adjust code here to round up or down to next second
        Dim TimeFormat As String = DateTime.TimeFormat
        DateTime.TimeFormat = "m:ss"
        Dim Offset As Double = DateTime.TimeZoneOffset
        DateTime.SetTimeZone(0)
        mLbl.Text = DateTime.Time(lblMillisecs)
        DateTime.SetTimeZone(Offset)
        DateTime.TimeFormat = TimeFormat
    End If
    [snip]
End Sub

And in Main

Sub Button1_Click
    Dim target As Int = Rnd(0, 101)
    CircularProgressBar1.MaxMillisecs = 5*60*1000 ' 5 minutes, the display will be in m:ss
    CircularProgressBar1.Value = target
    CircularProgressBar2.Value = target
End Sub

 

[Erel]

It is better to use the ConvertTicksToTimeString sub to convert a time period to string: https://www.b4x.com/android/forum/threads/converting-seconds-in-hh-mm-ss.36264/#post-212804
Resetting the timezone offset results in a loss of the DST effect.

 

[Erel]

v1.00 is released. It is compatible with B4A, B4i and B4J.

 

[Erel]

V2.00 is released. It is based on XUI library. The class code is identical in all three platforms.

 

[luke2012]

V2.00 is released. It is based on XUI library. The class code is identical in all three platforms.

Thanks @Erel!

 

[Mahares]

When I run the example in this thread, I get this error on OS 7, or 5.1.1 with XUI 1.11. I have a feeling the XUI needs updated again:

B4A Version: 7.30
Parsing code. Error
Error parsing program.
Error description: Unknown type: b4xcanvas
Are you missing a library reference?
Error occurred on line: 11 (CircularProgressBar)
Private cvs As B4XCanvas

EDIT: @Erel must have downloaded XUI 1.20 afterwards. Now, with the new 1.20 XUI, it works just fine.

 

[DavideV]

Hi,
i found a bug in the class V2.00 with certains stroke sizes and with the internal label (value) position.

Here is the fixed class.

I have added also:

Reset: to immediately set the circleprogressbar to 0
setValueUnit to add an Unit to the value , for example %, mV, ...
Visible, to hide /show the circleprogressbar

 

[desof]

Is it possible to change the color at run time?
How?

 

[DonManfred]

I would guess you need to generate getter and setter for clrFull, clrEmpty inside the class.
The class is available. Check the code

For any other question: Please create a new thread in the Questions forum for your question.