B4A Library TrackingRingView - a multi progress indicator

The attached project wraps this Github project. Posting the B4A project, the B4A library files, and the Java Code. Take note that it works only for API 15+.

The tracking ring in the pic below (bottom right) has been turned into a clock (i.e showing the current time of my device). You can do the following with the library:

1. Set more than one I indicator ring
2. Set the progress value for each ring individually (range from 0 to 100)
3. Set the fore color of each ring individually
4. Set the back color of each ring individually
5. Set the text color (a single text color that will be applied to the text in all rings)
6. The start angle for the rings (a single int value that will be applied to all the rings = 0 to 360)
7. Set the animation duration (I have set it to zero in the attached project due to the short interval of the timer that I am using)

Some sample code:

#Region  Project Attributes
    #ApplicationLabel: TrackingRingView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private trv1, trv2 As TrackingRingView
    Dim progval1(4) As Int
    Dim progvaltext1(4) As String
    Dim mytime(3) As Int
    Dim mytimetext(3) As String

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    t.Initialize("t", 10)

    progval1(0) = 25
    progvaltext1(0) = progval1(0)
    progval1(1) = 38
    progvaltext1(1) = progval1(1)
    progval1(2) = 63
    progvaltext1(2) = progval1(2)
    progval1(3) = 79
    progvaltext1(3) = progval1(3)        

    trv1.NumberOfRings = 4
    trv1.RingColors = Array As Int(Colors.Green, Colors.Yellow, Colors.Red, Colors.Blue)
    trv1.RingBackgroundColors = Array As Int(Colors.LightGray, Colors.White, Colors.LightGray, Colors.White)
    trv1.StartAngle = 0
    trv1.AnimationDuration = 0
    trv1.RingTextColor = Colors.black
    trv1.RingText = progvaltext1                               'lets give it a kickstart else the pic looks dull
    trv1.RingProgressValues = progval1                           'lets give it a kickstart else the pic looks dull
    trv1.ConfigureRings

    trv2.NumberOfRings = 3
    trv2.RingColors = Array As Int(Colors.Green, Colors.Red, Colors.Yellow)
    trv2.RingBackgroundColors = Array As Int(Colors.White, Colors.LightGray, Colors.White)
    trv2.StartAngle = -90
    trv2.AnimationDuration = 0
    trv2.RingTextColor = Colors.Black


End Sub

Sub Activity_Resume

    t.Enabled = True

End Sub

Sub Activity_Pause (UserClosed As Boolean)

    t.Enabled = False

End Sub

Sub t_tick

    progval1(0) = progval1(0) + 1
    progvaltext1(0) = progval1(0)
    If progval1(0) = 100 Then
        progval1(0) = 0
        progval1(1) = progval1(1) + 1
        progvaltext1(1) = progval1(1)
        If progval1(1) = 100 Then
            progval1(1) = 0
            progval1(2) = progval1(2) + 1
            progvaltext1(2) = progval1(2)
            If progval1(2)  = 100 Then
                progval1(2) = 0
                progval1(3) = progval1(3) + 1
                progvaltext1(3) = progval1(3)
                If progval1(3) = 100 Then
                    progval1(3) = 0
                End If
            End If
        End If    
    End If

    trv1.RingText = progvaltext1
    trv1.RingProgressValues = progval1    
    trv1.ConfigureRings

    mytime(0) = DateTime.GetSecond(DateTime.Now)
    mytime(0) = (100/60) * mytime(0)
    mytimetext(0) = DateTime.GetSecond(DateTime.Now)
    mytime(1) = DateTime.GetMinute(DateTime.Now)
    mytime(1) = (100/60) * mytime(1)
    mytimetext(1) = DateTime.GetMinute(DateTime.Now)
    mytime(2) = DateTime.GetHour(DateTime.Now)
    mytime(2) = (100/60) * mytime(2)
    mytimetext(2) = DateTime.GetHour(DateTime.Now)

    trv2.RingText = mytimetext
    trv2.RingProgressValues = mytime    
    trv2.ConfigureRings



End Sub

TrackingRingView
Author: Johan Schoeman
Version: 1

• TrackingRingView
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • ConfigureRings
  • 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)
  Properties:
  • AnimationDuration As Int [write only]
    Set the duration of the animation
  • Background As Drawable
  • Color As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • Left As Int
  • NumberOfRings As Int [write only]
    Set the number of rings to draw
  • RingBackgroundColors() As Int [write only]
    Set the backgroung colors for the rings
    The first element of the array will be the background color for the most inner ring
  • RingColors() As Int [write only]
    Set the ring colors
    The first element of the array will be the color for the most inner ring
  • RingProgressValues() As Int [write only]
    Set the text that will appear in the rings
    The first element of the array will be the text for the most inner ring
  • RingText() As String [write only]
    Set the text that will appear in the rings
    The first element of the array will be the text for the most inner ring
  • RingTextColor As Int [write only]
    Set the color of the text inside the rings
  • StartAngle As Int [write only]
    Set the start angle of the rings
    0 = 3 'o clock position
    90 or -270 = 6 'o clock position
    180 or -180 = 9 'o clock position
    270 or -90 = 12 'o clock position
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int