Circular Progress Indicator
Please consider this class a prototype. There is still some code clean-up and optimization to be done. Use at your own risk.
With nothing more than 3 lines of code, you'll be able to display a customizable circular progress indicator.
Instructions:
Methods:
Dependencies:
Class Module:
Example Code:
Special Thanks:
Please consider this class a prototype. There is still some code clean-up and optimization to be done. Use at your own risk.
With nothing more than 3 lines of code, you'll be able to display a customizable circular progress indicator.
Instructions:
1. Add the ProgressIndicator class to your project.
2. Declare it in Globals
3. Initialize it in Activity_Create
4. Display it in a loop/timer.
2. Declare it in Globals
3. Initialize it in Activity_Create
4. Display it in a loop/timer.
Methods:
Initialize: Sets the parent activity and the graphical appearance.
Update: Displays the radial representation of the current (percentage) progress
Dispose: Called automatically once the current progress equals 100% and the fade-out animation is finished. You may call it manually as well.
Update: Displays the radial representation of the current (percentage) progress
Dispose: Called automatically once the current progress equals 100% and the fade-out animation is finished. You may call it manually as well.
Dependencies:
Class Module:
B4X:
'Progress Indicator by Bruno Silva - 2015 Ninja Dynamics
'Add this class to your project with the module name "ProgressIndicator".
Private Sub Class_Globals
Private mX As Double
Private mY As Double
Private mRadius As Double
Private pX As Double
Private pY As Double
Private mColor() As Double
Private pColor() As Double
Private rColor() As Double
Private curValue As Double
Private angle As Double
Dim cvs As Canvas
Dim pnl As Panel
End Sub
'Initializes the Progress Indicator on the selected Activity.
'The colors are set in ARGB mode. The size represents the circumference diameter.
'Initialization example: myProgress.Initialize(Activity, 50%x, 50%y, 10%y, Array As Double(255, 32, 32, 32), Array As Double(255, 0, 88, 255), Array As Double(255, 255, 255, 255))
Public Sub Initialize(targetActivity As Activity, posX As Double, posY As Double, size As Double, mainColor() As Double, progressColor() As Double, readyColor() As Double)
pnl.Initialize("pnl")
targetActivity.AddView(pnl, 0, 0, 100%x, 100%y)
mX = posX
mY = posY
mRadius = size / 2
mColor = mainColor
pColor = progressColor
rColor = readyColor
cvs.Initialize(pnl)
SetAntiAlias(cvs)
End Sub
'Displays the visual representation of the current progress.
Sub Update(percentage As Double)
If curValue = 100 AND mColor(0) = 0 AND pColor(0) = 0 AND rColor(0) = 0 Then
Dispose
Return
End If
Dim areaRect As Rect
areaRect.Initialize(0, 0, 100%x, 100%y)
cvs.drawRect(areaRect, Colors.Transparent, True, 0)
curValue = percentage
angle = 360 * (curValue / 100)
If curValue >= 100 Then
mRadius = mRadius * 1.01 'Edit this value to tune the radial explosion speed
mColor(0) = Max(mColor(0) - 8, 0) 'Edit this value to tune the fade-out speed
pColor(0) = Max(pColor(0) - 32, 0) 'Edit this value to tune the fade-out speed
rColor(0) = Max(rColor(0) - 8, 0) 'Edit this value to tune the fade-out speed
End If
For a = 0 To Floor(angle)
pX = mX + (CosD(a) * (mRadius * 1.2)) 'Edit this value to change the outer circle thickness
pY = mY + (SinD(a) * (mRadius * 1.2)) 'Edit this value to change the outer circle thickness
cvs.DrawLine(mX, mY, pX, pY, Colors.ARGB(pColor(0), pColor(1), pColor(2), pColor(3)), 1)
Next
cvs.DrawCircle(mX, mY, mRadius, Colors.ARGB(mColor(0), mColor(1), mColor(2), mColor(3)), True, 0)
cvs.DrawCircle(mX, mY, mRadius, Colors.ARGB((curValue / 100) * rColor(0), rColor(1), rColor(2), rColor(3)), True, 0)
pnl.Invalidate
End Sub
'Removes the view.
'This function Is called automatically once the current progress equals 100%.
Sub Dispose
If pnl.IsInitialized Then pnl.RemoveView
End Sub
'Canvas anti-aliasing java reflection method by LucaMS
'https://www.b4x.com/android/forum/members/lucams.51832/
Private Sub SetAntiAlias (c As Canvas)
Dim r As Reflector
Dim NativeCanvas As Object
r.Target = c
NativeCanvas = r.GetField("canvas")
Dim PaintFlagsDrawFilter As Object
PaintFlagsDrawFilter = r.CreateObject2("android.graphics.PaintFlagsDrawFilter", Array As Object(0, 1), Array As String("java.lang.int", "java.lang.int"))
r.Target = NativeCanvas
r.RunMethod4("setDrawFilter", Array As Object(PaintFlagsDrawFilter), Array As String("android.graphics.DrawFilter"))
End SubExample Code:
B4X:
#Region Project Attributes
#ApplicationLabel: Progress Indicator Example - 2015 Ninja Dynamics
#VersionCode: 1
#VersionName: 1
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: unspecified
#CanInstallToExternalStorage: False
#End Region
#Region Activity Attributes
#FullScreen: False
#IncludeTitle: True
#End Region
Sub Process_Globals
Dim myTimer As Timer
Dim loadedPercentage As Double
End Sub
Sub Globals
Dim progress As ProgressIndicator
End Sub
Sub Activity_Create(FirstTime As Boolean)
progress.Initialize(Activity, 50%x, 50%y, 10%y, Array As Double(255, 32, 32, 32), Array As Double(255, 0, 88, 255), Array As Double(255, 255, 255, 255))
myTimer.Initialize("myTimer", 16)
myTimer.Enabled = True
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
Sub myTimer_Tick
loadedPercentage = Min((loadedPercentage + 1), 100)
progress.Update(loadedPercentage)
End SubSpecial Thanks:
Last edited:
