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

Erel · Jul 13, 2017

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.

LordZenzo · Jul 13, 2017

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 · Jul 13, 2017

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

Original, withou antialiasing:

With antialiasing:

Erel · Jul 13, 2017

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

LucaMs · Jul 13, 2017

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

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

Erel · Jul 13, 2017

I've updated the class to enable antialiasing.

LordZenzo · Jul 13, 2017

Antialiasing saves many images from the trash

l'antialiasing salva molte immagini dal cestino

Erel · Jul 13, 2017

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 · Jul 13, 2017

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

DonManfred · Jul 13, 2017

StarinschiAndrei said:
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 · Jul 13, 2017

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

You need to update your JAVA

Thank you

Misterbates · Jul 14, 2017

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

Erel · Jul 16, 2017

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 · Jul 16, 2017

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

Erel · Oct 16, 2017

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

luke2012 · Oct 16, 2017

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

Thanks @Erel!

Mahares · Oct 16, 2017

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 · Oct 22, 2017

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 · Dec 29, 2017

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

DonManfred · Dec 29, 2017

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.

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

Attachments

Well-Known Member

Expert

B4X founder

Expert

B4X founder

Well-Known Member

B4X founder

Active Member

Expert

Active Member

Active Member

Attachments

B4X founder

B4X founder

B4X founder

Well-Known Member

Expert

Active Member

Attachments

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency