Android Question Create an animated check box

[asales]

I'm trying to create an animate checkbox like the link below, to use in B4A, B4J and B4i:
https://www.b4x.com/android/forum/threads/animated-check-box.59170/
See animation (image too large to the forum):
https://raw.githubusercontent.com/lguipeng/AnimCheckBox/master/art/animcheckbox.gif

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:
https://www.b4x.com/android/forum/threads/b4x-xui-custom-view-circularprogressbar.81604/

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.

Spoiler: Code: circle with line

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)
    
    DrawValue(80)
End Sub

Private Sub DrawValue(Value As Float)
    cvs.ClearRect(cvs.TargetRect)
    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.ClipPath(p)
        cvs.DrawCircle(cx, cy, radius2 - 0.5dip, clrFull, False, stroke + 1dip)
        cvs.RemoveClip
        
        cvs.DrawLine(radius2 - 110, radius2 - 90, cx - 30, cy + 20, Colors.Red, DipToCurrent(3))
    Else
        cvs.DrawCircle(cx, cy, radius2 - 0.5dip, clrFull, False, stroke + 1dip)
    End If
    cvs.Invalidate
End Sub

 

[Erel]

https://www.b4x.com/android/forum/t...w-focus-the-user-attention.87877/#post-556037

 

[Erel]

BTW, check B4XSwitch from XUI Views library. It is a different animation (maybe not relevant for your use case) and it is very nice.