B4A Library MaterialCircleProgress


Licensed User
This is a wrapper for this Github project.

  • MaterialCircleProgress
    • ba As BA
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • ArrowHeight As Int
    • ArrowWidth As Int
    • BackGroundColor As Int
    • Background As Drawable
    • CircleBackgroundEnabled As Boolean
    • Color As Int [write only]
    • Colors()() As Int
    • Diameter As Int
    • Enabled As Boolean
    • Height As Int
    • InnerRadius As Int
    • Left As Int
    • Max As Int
    • Progress As Int
    • ProgressColor As Int
    • ProgressStrokeWidth As Int
    • ShadowRadius As Int
    • ShowArrow As Boolean
    • Tag As Object
    • TextColor As Int
    • TextSize As Int
    • Top As Int
    • Visible As Boolean
    • Width As Int

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim p1,p2,p3,p4,p5,p6 As MaterialCircleProgress
    Dim MaterialColors(19) As Map
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:

    p1.Colors = Array As Int(Colors.Red,Colors.Blue,Colors.Green,Colors.Yellow)
    p1.CircleBackgroundEnabled = False
    p1.ProgressStrokeWidth = 5dip
    p1.ShowArrow = True
    p1.ArrowHeight = 15dip
    p1.ArrowWidth = 25dip


    Dim paletteIndex As Int = 0
    p2.Colors = Array As Int(MaterialColors(paletteIndex).Get(50),MaterialColors(paletteIndex).Get(100),MaterialColors(paletteIndex).Get(200),MaterialColors(paletteIndex).Get(300),MaterialColors(paletteIndex).Get(400),MaterialColors(paletteIndex).Get(500),MaterialColors(paletteIndex).Get(600),MaterialColors(paletteIndex).Get(700),MaterialColors(paletteIndex).Get(800),MaterialColors(paletteIndex).Get(900))
    p2.CircleBackgroundEnabled = False
    p2.ProgressStrokeWidth = 20dip
    p2.ShowArrow = False

    p3.Colors = Array As Int(Colors.Red,Colors.Blue,Colors.Green,Colors.Yellow)
    p3.CircleBackgroundEnabled = True
    p3.ProgressStrokeWidth = 10dip
    p3.ShowArrow = True
    p3.ArrowHeight = 15dip
    p3.ArrowWidth = 25dip

    p4.Colors = Array As Int(Colors.Red,Colors.Blue,Colors.Green,Colors.Yellow)
    p4.CircleBackgroundEnabled = True
    p4.ProgressStrokeWidth = 10dip
    p4.ShowArrow = False
    p4.ArrowHeight = 15dip
    p4.ArrowWidth = 25dip

    p5.Colors = Array As Int(Colors.Red,Colors.Blue,Colors.Green,Colors.Yellow)
    p5.CircleBackgroundEnabled = True
    p5.ProgressStrokeWidth = 10dip
    p5.ShowArrow = True
    p5.ArrowHeight = 15dip
    p5.ArrowWidth = 25dip

    p6.Colors = Array As Int(Colors.Red,Colors.Blue,Colors.Green,Colors.Yellow)
    p6.CircleBackgroundEnabled = True
    p6.ProgressStrokeWidth = 5dip
    p6.InnerRadius = 15dip
    p6.ShowArrow = False
    p6.ArrowHeight = 15dip
    p6.ArrowWidth = 25dip
End Sub
This library is Donationware. You can download the library, you can test the library. But if you want to USE the library in your App you need to Donate for it.
Please click here to donate (You can donate any amount you want to donate for the library (or my work) :)



Active Member
Licensed User
Thank you for quick answer. It would be a good point for your wrapper, if progress number was included. If you have spare time, you can add it sometime! Thank you for your time.
p.s.1. I see many libraries at github that i wish to emb them at b4a, can you point me at right direction how to do it?(i don't care if it is hard or easy to do it)


Licensed User

Brian Robinson

Active Member
Licensed User
I am using this library, but I have noticed the animation (the circle with the colours that displays it is working) sometimes does not display.

What I do is hide the progress circle off the screen, then when it is doing a task like making a web service call, I start the animation (of the circle inside the view) animate the whole view, by "sliding" the it across to the centre, then once the task is complete (or times out) it slides back off the screen and I pause the animation (of the circle inside the view).

I have noticed that sometimes the animation of the circle showing the progress is not visible, has anyone any ideas why it might be like this?



Well-Known Member
Licensed User
When the app is working, sometimes the progress does not show. Try "doevents" in a loop or before you start the task. But, as Erel says, doevents may cause trouble. I think you have to make experiments, sorry ...

Brian Robinson

Active Member
Licensed User
Thanks for the suggestion grafsoft. Ok, so maybe the animation of the progress isn't starting because I am then calling another animation to put the view on the screen.

The suggestion of doevents has made me think I can use CallSubPlus to delay the call to SetLayoutAnimated to give it some time to start the progress animation by half a second, as that delay shouldn't matter. Will try this when I get home tonight.


Ardi Wirjo

New Member
Licensed User
Hi, I made some modification for my application using your library, perhaps you want to implement it by default :)

I need masking like ProgressShowDialog where user maybe touch their screen before some jobs finished, so I add panel with transparent black and consume that event. Hope you will add that requirement to your library, maybe others need it :)

example code modification
'Material Circle Progress customized
Private Sub Class_Globals
    Private Act As Activity
    Private ListColor As List
    Private CircleSize As Int

    Private pnlMask As Panel
    Private mcp As MaterialCircleProgress
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(pActivity As Activity)
    Act = pActivity
    CircleSize = 100dip

End Sub

'sets Activity
Sub setActivity(pActivity As Activity)
    Act = pActivity
End Sub

'sets Material Circle Progress Colors
Sub setListColors(pListColor As List)
    ListColor = pListColor
End Sub

'sets Circle Size (default: 100dip)
Sub setSize(pSize As Int)
    CircleSize = pSize
End Sub

Public Sub AddView
End Sub

Private Sub AddPnlMask
    pnlMask.Color = Colors.ARGB(180, 0, 0, 0)

    Act.AddView(pnlMask, 0, 0, 100%x, 100%y)
End Sub

Private Sub AddMcp
    CircleSize = 100dip
    Act.AddView(mcp,(Act.Width-CircleSize) / 2,(Act.Height-CircleSize)/2,CircleSize,CircleSize)

    Dim arrayColor(ListColor.Size) As Int
    For i = 0 To ListColor.Size-1 Step 1
        arrayColor(i) = ListColor.Get(i)

    mcp.Colors = arrayColor
    mcp.CircleBackgroundEnabled = True
    mcp.BackGroundColor = Colors.White
    mcp.ShowArrow = False
    mcp.TextSize = 9999
    mcp.Visible = True
End Sub

Public Sub RemoveView
    pnlMask.Visible = False
    mcp.Visible = False
End Sub

'To consume click from user
Private Sub pnlMask_Click

End Sub
How to use
Dim mcptzw As MaterialCircleProgressTZW
    mcptzw.AddView 'to display
    mcptzw.RemoveView 'to hide