LinearStatusView

[arpanbag001]

I am using this for my app, and loving it.
However, I am planning to show status in both circular and rectangular fashion, and I really wish there was a functionality to easily (say, by setting one xml attribute: is_linear=true) make the view linear, instead of circular, which can be used to show status progress in bottom or top of a non-circular (say, rectangular) view.
I know the name of the library itself is Circular, but I just wish the feature was there, which could be really helpful for devs, as they will be able to use same approach to handle the same functionality in both the cases: circular and linear.

Thanks in advance! :)

[3llomi]

Hey @arpanbag001 Thanks for your suggestion.
i am not sure if i understood you well, do you mean to make it like a 'Progress Bar'? where you can update progress if you are downloading something for example?

or you want to keep the same functionality as it is right now but implement a 'Linear' Shape instead of Circular?

[arpanbag001]

Hi @3llomi , thanks for replying.

do you mean to make it like a 'Progress Bar'? where you can update progress if you are downloading something for example?

Not exactly.

you want to keep the same functionality as it is right now but implement a 'Linear' Shape instead of Circular?

Exactly.
Exact same functionality, just want a linear shape.
That way, if the status ImageView is rectangular (instead of circle, like shown here), this status progress bar can be displayed at top or bottom of the imageview as a line.

[Francis365]

Probably, this should help you. to change the color for each line, you might need to draw path each time with an assignedpaint. Use this in CircleStatusView class onDraw
`
private var portionsCount = 5
private var cornerRadius: Float = 45f
private var borderWidth: Float = 10f

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    drawCurvedPath(canvas)

}

private fun drawCurvedPath(canvas: Canvas){

    // Prepare paints beforehand to prevent allocations when drawing.
    val borderPaint = Paint()
    borderPaint.style = Paint.Style.STROKE
    borderPaint.color = borderColor
    borderPaint.isAntiAlias = true
    borderPaint.isDither = true
    borderPaint.strokeWidth = borderWidth

    val fillPaint = Paint()
    fillPaint.style = Paint.Style.FILL
    fillPaint.color = fillColor
    fillPaint.isAntiAlias = true
    fillPaint.isDither = true

    val radius = radius
    val center_x = mBorderRect.centerX()
    val center_y = mBorderRect.centerY()
    val rect = getOval(radius, center_x, center_y)

    val pathShape = Path()
    pathShape.moveTo(0F, 0F)
    pathShape.lineTo(50f, 0F)
    pathShape.lineTo(50f, 18F)
    pathShape.lineTo(0F, 18F)
    pathShape.close()

    // Prepare fill path.
    val fillPath = Path()
    fillPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW)

    // Draw path to canvas.
    canvas.drawPath(fillPath, fillPaint)

    // Prepare the border path.
    val borderPath = Path()

    // Add the outer rounded rectangle.
    borderPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW)

    //add effect
    val measure = PathMeasure(borderPath, false).length / portionsCount
    val intervals = floatArrayOf(measure * 0.9f, if(portionsCount > 1) measure * 0.1f else 0f)

    val effect = DashPathEffect(intervals, 0f)
    borderPaint.pathEffect = effect

    canvas.drawPath(borderPath, borderPaint)
}`

This is the result: