B4A Library [B4X] [XUI] B4XLoadingIndicator - loading indicator

Latest version is included in XUI Views library.

This is a custom view that can be used as an alternative to indeterminate progress bars.
It is compatible with B4A, B4J and B4i.

Inspired by: https://github.com/81813780/AVLoadingIndicatorView

Add with the designer and set the style:

Tips

- It will work properly in debug mode but will not be smooth. Should look good in release mode.
- You can change the duration of a single cycle. The default is 1000ms. For some of the types such as Arc 1 and Arc 2 it makes sense to change it to about 2000.
- See the code. Shouldn't be difficult to add more types of animations.
- In B4A you should add this code in Activity_Resume:

Sub Activity_Resume
   For Each v As View In Activity.GetAllViewsRecursive
       If v.Tag Is B4XLoadingIndicator And v.Visible = True Then
           Dim x As B4XLoadingIndicator = v.Tag
           x.Show
       End If
   Next

The class which is compatible with B4A, B4i and B4J is included inside the attached B4A example.

 

[LucaMs]

Almost every day a new B4XView; this is great!!!

 

[Star-Dust]

Wonderful

 

[Johan Hormaza]

Almost every day a new B4XView; this is great!!!

jejeje True, yes! Excellent!

 

[Indy]

Hi Erel,

I might have use for this as an alternative to the Progress Dialog. Do you have example code which can setup these without doing it in the designer?

Thanks

 

[Swissmade]

Very Nice thanks Erel

 

[Erel]

Do you have example code which can setup these without doing it in the designer?

How to add Custom Views programmatically

 

[Star-Dust]

I added three more indicators just to spite Erel. (I joke)

here you find the code to insert:

Private Sub Draw_ThreeCircles1b (Progress As Float)
    Dim MaxR As Float = (cvs.TargetRect.Width / 2 - 20dip) / 2
    Dim r As Float = 15dip + MaxR + MaxR * Sin(Progress * 1 * cPI)
    For i = 0 To 2
        Dim alpha As Int = i * 120 + Progress * 360
        cvs.DrawCircle(cvs.TargetRect.CenterX + r * SinD(alpha), cvs.TargetRect.CenterY + r * CosD(alpha), 7dip, clr, True, 1dip)
    Next
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.Centery,7dip,clr,True,1dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.Centery,r,clr,False,1dip)
End Sub


Private Sub Draw_ThreeCircles3 (Progress As Float)
    Dim r As Float = Min(cvs.TargetRect.Width,cvs.TargetRect.Height)/2-7dip
    Dim B As Boolean = False
     
    For i=0 To 9
        'Dim alpha As Int = i * 120 + Progress * 360
        Dim Alpha As Float = i*36
        'cvs.DrawCircle(cvs.TargetRect.CenterX + r * SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha), 7dip, xui.Color_LightGray, True, 1dip)
        If Alpha>Progress*360 And B=False Then
            cvs.DrawCircle(cvs.TargetRect.CenterX + r * SinD((i-1)*36), cvs.TargetRect.CenterY + r * CosD((i-1)*36), 7dip,Bit.And(clr,0xAAffffff), True, 1dip)
            cvs.DrawCircle(cvs.TargetRect.CenterX + r * SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha), 7dip,clr, True, 1dip)
            B=True
        Else
            cvs.DrawCircle(cvs.TargetRect.CenterX + r * SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha), 7dip, Bit.And(clr,0x55ffffff), True, 1dip)
        End If
    Next

End Sub

Private Sub Draw_TenLines (Progress As Float)
    Dim r As Float = Min(cvs.TargetRect.Width,cvs.TargetRect.Height)/2
    Dim B As Boolean = False
    Dim Spess As Int = 6dip
     
    For i=0 To 9
        'Dim alpha As Int = i * 120 + Progress * 360
        Dim Alpha As Float = i*36
     
        If Alpha>Progress*360 And B=False Then
            cvs.DrawLine(cvs.TargetRect.CenterX + r * SinD((i-1)*36), cvs.TargetRect.CenterY + r * CosD((i-1)*36),cvs.TargetRect.CenterX + (r/2) * SinD((i-1)*36), cvs.TargetRect.CenterY + (r/2) * CosD((i-1)*36),Bit.And(clr,0xAAFFFFFF),Spess)
            cvs.DrawLine(cvs.TargetRect.CenterX + r * SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha),cvs.TargetRect.CenterX + (r/2) * SinD(Alpha), cvs.TargetRect.CenterY + (r/2) * CosD(Alpha),clr,Spess)
            B=True
        Else
            cvs.DrawLine(cvs.TargetRect.CenterX + r * SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha),cvs.TargetRect.CenterX + (r/2) * SinD(Alpha), cvs.TargetRect.CenterY + (r/2) * CosD(Alpha),Bit.And(clr,0x55FFFFFF),Spess)
        End If
    Next

End Sub

And obviously make the change in the design properties so that they are added to the list,

#DesignerProperty: Key: IndicatorStyle, DisplayName: Style, FieldType: String, DefaultValue: Three Circles 1, List: Three Circles 1|Three Circles 1b|Three Circles 2|Three Circles 3|Single Circle|Five Lines 1|Ten Lines|Arc 1|Arc 2|PacMan

I'm also adding these, but I will not publish the sources, you too must squeeze the meninges

 

[Erel]

Good job!

 

[Alexander Stolte]

I will not publish the sources

are you sure?

 

[Star-Dust]

are you sure?

Sure, as I am also sure that with a little commitment we can all contribute to the forum with a snippet of code

Then as my mother often said: Why do I have to do everything in this house? Do something yourself too

 

[LucaMs]

Then as my mother often said: Why do I have to do everything in this house?

Just because you are mum, of course.

(I joke)

This is a serious and high quality site; you should not joke so often!

 

[Peter Simpson]

[QUOTE="Star-Dust, post: 588303, member:
Then as my mother often said: Why do I have to do everything in this house? Do something yourself too[/QUOTE]

So you did, you did the programming ...

 

[Star-Dust]

I have extended the indicators of progress with some other element. I attach the source code

Update source code

 

[Alexander Stolte]

Time for 3 "New" Animations. Thanks @Star-Dust for his "XArc" Animation, this new 3 ones, are based on this.

Spoiler: 3 New Animations

Private Sub Draw_XArcv2 (Progress As Float)
    Dim r As Float = (Min(cvs.TargetRect.Width,cvs.TargetRect.Height)/2)-3.5dip
    Dim r2 As Float = 2*r/2.2
    Dim r3 As Float = 2*r/2.4
    Dim p As B4XPath
        
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r-1dip,xui.Color_Transparent,True,1dip)

    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r3,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r3-1dip,xui.Color_Transparent,True,1dip)
    
End Sub


Private Sub Draw_XArcv3 (Progress As Float)
    Dim r As Float = (Min(cvs.TargetRect.Width,cvs.TargetRect.Height)/2)-3.5dip
    Dim r2 As Float = 2*r/2.2
    Dim r3 As Float = 2*r/2.4
    Dim r4 As Float = 2*r/2.8
    Dim r5 As Float = 2*r/3.2
    Dim r6 As Float = 2*r/3.8
    Dim r7 As Float = 2*r/4.4
    Dim r8 As Float = 2*r/6
    Dim r9 As Float = 2*r/8
    Dim r10 As Float = 2*r/14
    Dim r11 As Float = 2*r/25
    Dim p As B4XPath
        
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r-1dip,xui.Color_Transparent,True,1dip)

    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r3,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r3-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r4,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r4-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r5,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r5-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r6,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r6-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r7,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r7-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r8,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r8-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r9,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r9-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r10,Progress*360,180)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r10-1dip,xui.Color_Transparent,True,1dip)
    
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r11,-Progress*360,180)
    cvs.DrawPath(p,clr,False,2dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r11-1dip,xui.Color_Transparent,True,1dip)
End Sub

Private Sub Draw_XArcv4 (Progress As Float)
    Dim r As Float = (Min(cvs.TargetRect.Width,cvs.TargetRect.Height)/2)-3.5dip
    Dim r2 As Float = 2*r/2.7
    Dim p As B4XPath
        
    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r,-Progress*360 -180,120)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r-1dip,xui.Color_Transparent,True,1dip)

    p.InitializeArc(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2,Progress*360,120)
    cvs.DrawPath(p,clr,False,6dip)
    cvs.DrawCircle(cvs.TargetRect.CenterX,cvs.TargetRect.CenterY,r2-1dip,xui.Color_Transparent,True,1dip)

End Sub