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:
TrackingRingView
Author: Johan Schoeman
Version: 1
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:
B4X:
#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 SubTrackingRingView
Author: Johan Schoeman
Version: 1
- TrackingRingView
Fields:- ba As BA
- 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)
- 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
Last edited:
