Android Question Create an animated check box

Similar threads

B4A Code Snippet Mathemetics Pendulum
B4A Code Snippet Animated Border
B4A Code Snippet Color Picker
B4A Code Snippet [B4X] [XUI] Accurate Text Measurement and Drawing
B4A Code Snippet [B4X] Round clipping panel
B4A Code Snippet [B4X] [XUI] Simple Halo Animation


Well-Known Member
Licensed User
I'm trying to create an animate checkbox like the link below, to use in B4A, B4J and B4i:
See animation (image too large to the forum):

I think is possible to made it using XUI and canvas, but I'm in a struggle with the code.

I based my code in this view:

I think would be nice have an animated check box to show a confirm (check) in the screen and, in the future, show an animation for canceling (X).

This is my code until now, but I only get a circle and a line.

Thanks in advance for any tips.

Sub Button1_Click
    cx = pCanvas2.Width / 2
    cy = pCanvas2.Height / 2
    radius2 = cx - 20dip   
    clrFull = xui.PaintOrColorToColor(Colors.Blue)
    clrEmpty = xui.PaintOrColorToColor(Colors.Gray)
    stroke = DipToCurrent(2)
End Sub

Private Sub DrawValue(Value As Float)
    cvs.DrawCircle(cx, cy, radius2, clrEmpty, False, stroke)
    Dim startAngle = -160, sweepAngle = Value / 100 * 360 As Float

    If Value < 100 Then
        Dim p As B4XPath
        p.InitializeArc(cx, cy, radius2 + stroke + 1dip, startAngle, sweepAngle)
        cvs.DrawCircle(cx, cy, radius2 - 0.5dip, clrFull, False, stroke + 1dip)
        cvs.DrawLine(radius2 - 110, radius2 - 90, cx - 30, cy + 20, Colors.Red, DipToCurrent(3))
        cvs.DrawCircle(cx, cy, radius2 - 0.5dip, clrFull, False, stroke + 1dip)
    End If
End Sub