Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Line with rounded edge on only one side in Compose?

I have a design for Android where I would need to draw a line with the rounded edge on only one side of the line.

Think a progress bar where both ends of the bar have rounded edges, but it consist of two colors and so that the intersecting part, where the colors change, should not have a rounded edge. My plan is to implement this by drawing two lines of correct length and color where each end has a rounded edge.

Is there some nice way to do it with Jetpack Compose?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I know I can make rounded edges in Compose like this:

drawLine(
     start = ..,
     end = ..,
     strokeWidth = 8.dp.toPx(),
     cap = StrokeCap.Round, 
)

But this will make both ends of the line rounded, right? Is there some nice way to only round one end of the line?

Edit: Sample picture:
enter image description here

>Solution :

extension function of DrawScope that draws 2 lines.

 fun DrawScope.drawHorizontalOneEdgeLine(
    color: Color,
    start: Offset,
    end: Offset,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = Stroke.DefaultCap,
    pathEffect: PathEffect? = null,
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
) {
    drawLine(
        color = color,
        start = start,
        end = end,
        strokeWidth = strokeWidth,
        cap = cap,
        pathEffect = pathEffect,
        alpha = alpha,
        colorFilter = colorFilter,
        blendMode = blendMode
    )

    drawLine(
        color = color,
        start = start.plus(Offset(strokeWidth / 2f, 0f)),
        end = end,
        strokeWidth = strokeWidth,
        cap = StrokeCap.Square,
        pathEffect = pathEffect,
        alpha = alpha,
        colorFilter = colorFilter,
        blendMode = blendMode
    )
}

Result

enter image description here

Demo

@Preview
@Composable
fun LineSample() {

    Canvas(modifier = Modifier.fillMaxSize()) {
        drawLine(
            color = Color.Red,
            start = Offset(100f, 100f),
            end = Offset(700f, 100f),
            cap = StrokeCap.Round,
            strokeWidth = 32.dp.toPx()
        )

        drawHorizontalOneEdgeLine(
            color = Color.Blue,
            start = Offset(100f, 200f),
            end = Offset(700f, 200f),
            cap = StrokeCap.Round,
            strokeWidth = 32.dp.toPx()
        )


        drawLine(
            color = Color.LightGray,
            start = Offset(100f, 1000f),
            end = Offset(1000f, 1000f),
            cap = StrokeCap.Round,
            strokeWidth = 32.dp.toPx()
        )

        drawHorizontalOneEdgeLine(
            color = Color.Green,
            start = Offset(100f, 1000f),
            end = Offset(600f, 1000f),
            cap = StrokeCap.Round,
            strokeWidth = 32.dp.toPx()
        )
    }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading