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

Discussion in 'Additional libraries, classes and official updates' started by Erel, Apr 23, 2018.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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:

    [​IMG]

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

    Attached Files:

    Last edited: Feb 1, 2019
  2. LucaMs

    LucaMs Expert Licensed User

    Almost every day a new B4XView; this is great!!!
     
    inakigarm and Erel like this.
  3. Star-Dust

    Star-Dust Expert Licensed User

    Wonderful :)
     
  4. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    jejeje True, yes! Excellent!
     
  5. Indy

    Indy Active Member Licensed 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
     
  6. swissmade

    swissmade Active Member Licensed User

    Very Nice thanks Erel
     
  7. Erel

    Erel Administrator Staff Member Licensed User

  8. Star-Dust

    Star-Dust Expert Licensed User

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

    here you find the code to insert:
    Code:
    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, True1dip)
        
    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), True1dip)
                cvs.DrawCircle(cvs.TargetRect.CenterX + r * 
    SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha), 7dip,clr, True1dip)
                B=
    True
            
    Else
                cvs.DrawCircle(cvs.TargetRect.CenterX + r * 
    SinD(Alpha), cvs.TargetRect.CenterY + r * CosD(Alpha), 7dipBit.And(clr,0x55ffffff), True1dip)
            
    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,
    Code:
    #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: May 14, 2018
  9. Erel

    Erel Administrator Staff Member Licensed User

    Good job!
     
    Star-Dust likes this.
  10. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    [​IMG]


    are you sure? :cool:
     
  11. Star-Dust

    Star-Dust Expert Licensed User

    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
     
  12. LucaMs

    LucaMs Expert Licensed User

    Just because you are mum, of course.

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




    :p
     
    KMatle and Star-Dust like this.
  13. Peter Simpson

    Peter Simpson Expert Licensed User

    [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 likes this.
  14. Star-Dust

    Star-Dust Expert Licensed User

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

    Update source code
     

    Attached Files:

    Last edited: May 31, 2018
  15. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

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

    Code:
    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
     
    aeric, arastoo, jmon and 3 others like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice