Android Question round circular progress bar

mehdipass

Member
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?

d.png
 
Solution
Change DrawValue to:
B4X:
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...

kimstudio

Active Member
Licensed User
Longtime User
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.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Change DrawValue to:
B4X:
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:

1663684282531.png

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

mehdipass

Member
Change DrawValue to:
B4X:
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:

Code:
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:

Screenshot_20220920_221256_bsaas4a.exaaample3.jpg
 
Upvote 0
Solution
Top