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

B4XLoadingIndicator.gif


Add with the designer and set the style:

SS-2018-04-23_11.40.16.png


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

Attachments

  • B4XLoadingIndicator.zip
    10.8 KB · Views: 2,118
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Wonderful :)
 

Indy

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

Well-Known Member
Licensed User
Longtime User
Very Nice thanks Erel
 

Star-Dust

Expert
Licensed User
Longtime User
I added three more indicators just to spite Erel. :p (I joke)
ezgif.com-crop.gif


here you find the code to insert:
B4X:
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,
B4X:
#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 :p
ezgif.com-optimize.gif
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User



are you sure? :cool:
Sure, as I am also sure that with a little commitment we can all contribute to the forum with a snippet of code :D

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

Star-Dust

Expert
Licensed User
Longtime User
I have extended the indicators of progress with some other element. I attach the source code
Video2.gif


Update source code
 

Attachments

  • LoadingIndicator.zip
    12.1 KB · Views: 1,115
Last edited:

Alexander Stolte

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

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

loadingview.gif
 
Top