Android Question round circular progress bar

[mehdipass]

Hi,
I use this class to show circular progress bar in my project.
circular progress bar
Now I’m a question:
How to round start and end progress like this picture?

 

[Erel]

It is possible by drawing a circle. BitmapCreator supports the concept of brushes and you can draw a circle with that gradient. Not trivial.

 

[kimstudio]

Tried this before for making custom knob control:
For B4A by using ABExtDrawing lib, stroke cap can be set to round to realize this.
For B4J by using jCanvasExt lib, line cap can set set to round to realize this.

However, like Erel says, graident will be hard as at least for B4J, conic-gradient seems not supported by Javafx.

 

[Erel]

Change DrawValue to:

Private Sub DrawValue(Value As Float)
    bc.DrawRect2(bc.TargetRect, TransparentBrush, True, 0)
    mLbl.Text = $"$1.0{Value}"$
    Dim startAngle = -90, sweepAngle = Value / 100 * 361 As Float
    bc.DrawArc2(cx, cy, radius, emptyBrush, False, stroke, startAngle, -(360 - sweepAngle))
    bc.DrawArc2(cx, cy, radius, fullBrush, False, stroke, startAngle, sweepAngle)
    Dim halfStroke As Float = stroke / 2
    If Value > 0 Then
        bc.DrawCircle2(cx + Round((radius - halfStroke) * CosD(startAngle + sweepAngle)), _
            cy + Round((radius - halfStroke) * SinD(startAngle + sweepAngle)), halfStroke, fullBrush, True, 0)
    End If
    bc.SetBitmapToImageView(bc.Bitmap, iv)
End Sub

This will draw a round circle at the end. It will work in the three platforms but due to rounding errors it will not be 100% perfect

B4J:

The ending circle is drawn with the same gradient as the arc.

 

[mehdipass]

Change DrawValue to:

Private Sub DrawValue(Value As Float)
    bc.DrawRect2(bc.TargetRect, TransparentBrush, True, 0)
    mLbl.Text = $"$1.0{Value}"$
    Dim startAngle = -90, sweepAngle = Value / 100 * 361 As Float
    bc.DrawArc2(cx, cy, radius, emptyBrush, False, stroke, startAngle, -(360 - sweepAngle))
    bc.DrawArc2(cx, cy, radius, fullBrush, False, stroke, startAngle, sweepAngle)
    Dim halfStroke As Float = stroke / 2
    If Value > 0 Then
        bc.DrawCircle2(cx + Round((radius - halfStroke) * CosD(startAngle + sweepAngle)), _
            cy + Round((radius - halfStroke) * SinD(startAngle + sweepAngle)), halfStroke, fullBrush, True, 0)
    End If
    bc.SetBitmapToImageView(bc.Bitmap, iv)
End Sub

This will draw a round circle at the end. It will work in the three platforms but due to rounding errors it will not be 100% perfect

B4J:

View attachment 133859
The ending circle is drawn with the same gradient as the arc.

Very thanks erel.
works well.
I added a little code to start round:

Private Sub DrawValue(Value As Float)
    bc.DrawRect2(bc.TargetRect, TransparentBrush, True, 0)
    mLbl.Text = $"$1.0{Value}"$
    Dim startAngle = -90, sweepAngle = Value / 100 * 361 As Float
    bc.DrawArc2(cx, cy, radius, emptyBrush, False, stroke, startAngle, -(360 - sweepAngle))
    bc.DrawArc2(cx, cy, radius, fullBrush, False, stroke, startAngle, sweepAngle)
    Dim halfStroke As Float = stroke / 2
    If Value > 0 Then
        bc.DrawCircle2(cx + Round((radius - halfStroke) * CosD(startAngle + sweepAngle)), _
            cy + Round((radius - halfStroke) * SinD(startAngle + sweepAngle)), halfStroke, fullBrush, True, 0)
        bc.DrawCircle(cx + Round((radius - halfStroke) * CosD(startAngle)), _
            cy + Round((radius - halfStroke) * SinD(startAngle)), halfStroke, clr1, True, 0)
    End If
    bc.SetBitmapToImageView(bc.Bitmap, iv)
End Sub

B4A: