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

Status
Not open for further replies.

Erel

Administrator
Staff member
Licensed User
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"

B4X:
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.
 

Attachments

Last edited:

LucaMs

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

Original, withou antialiasing:
upload_2017-7-13_15-6-27.png




With antialiasing:
upload_2017-7-13_15-6-55.png
 
Last edited:

DonManfred

Expert
Licensed User

Misterbates

Active Member
Licensed User
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:
B4X:
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
B4X:
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
 

Attachments

Last edited:

Mahares

Well Known Member
Licensed User
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.
 
Last edited:

DavideV

Active Member
Licensed User
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
 

Attachments

Status
Not open for further replies.
Top