Lines in Android Jetpack Compose

When developing UIs in Jetpack Compose, drawing lines is a common necessity. Whether as dividers to separate content or as part of intricate designs, straight unbroken lines aren’t always ideal. Employing dots or dashes can soften their appearance, while incorporating styled endpoints adds refinement to your design. If you’re keen on creating Morse code-like patterns with your lines, here’s how to decode the art of line styling!

1- Basic Line

HorizontalDivider(thickness = 10.dp, color = Color.Blue)

or

VerticalDivider(thickness = 10.dp, color = Color.Blue)

OR

Canvas(Modifier.fillMaxWidth()) {
            drawLine(
                color = Color.Blue,
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                strokeWidth = 25f
            )
}

2- Stroke Cap Rounded

  Canvas(modifier.fillMaxWidth().padding(horizontal = 20.dp)) {
            drawLine(
                color = Color.Red,
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                cap = StrokeCap.Round,
                strokeWidth = 55f
            )
        }

3- Stroke Cap Butt

Canvas(modifier.fillMaxWidth().padding(horizontal = 20.dp)) {
            drawLine(
                color = Color.Red,
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                cap = StrokeCap.Butt,
                strokeWidth = 55f
            )
        }

4- Stroke Cap Square

Canvas(modifier.fillMaxWidth().padding(horizontal = 20.dp)) {
            drawLine(
                color = Color.Red,
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                cap = StrokeCap.Square,
                strokeWidth = 55f
            )
        }

5- Dashed Line

val pathEffect = PathEffect.dashPathEffect(floatArrayOf(30f, 15f), 0f)
        Canvas(
            Modifier.fillMaxWidth()
        ) {
            drawLine(
                color = Color.DarkGray,
                strokeWidth = 25f,
                start = Offset(20f, 0f),
                end = Offset(size.width - 20, 0f),
                pathEffect = pathEffect
            )
        }

6- Circle Dashed Line

   Canvas(
            Modifier.fillMaxWidth()
        ) {
            drawLine(
                color = Color.Black,
                start = Offset(20f, 0f),
                end = Offset(size.width - 20, 0f),
                strokeWidth = 15.dp.toPx(),
                cap = StrokeCap.Round,
                pathEffect = PathEffect.dashPathEffect(
                    intervals = floatArrayOf(
                        0f,
                        20.dp.toPx(),
                    ),
                ),
            )
        }

7- Dashed Border

 Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        val stroke = Stroke(
            width = 14f,
            pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f)
        )

        Box(
            modifier = Modifier.fillMaxWidth().padding(16.dp)
                .drawBehind {
                    drawRoundRect(
                        color = Color.Blue,
                        style = stroke,
                        cornerRadius = CornerRadius(16.dp.toPx())
                    )
                }
                .clip(shape = RoundedCornerShape(16.dp))
        ) {
            Row(
                modifier = Modifier.fillMaxWidth().padding(16.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "Dashed Border"
                )
            }
        }
    }

If you have any questions or feedback, please feel free to contact me. Best regards, Rıdvan Özcan.

ridvanozcan — Overview

https://www.linkedin.com/in/ridvanozcan/

https://www.instagram.com/mr.softwareengineer/

#kotlin #kotlindeveloper #android #androiddeveloper #softwaredevelopment #androiddevelopment #kotlinandroid #developers #developercommunity #softwareengineer #googledevs #googlegroups #androidgroups #googleandroid #gradle #gradleandroid #community #linkedinforcreators #creators #linkedin #linkedinlearning #linkedinfamily #linkedinconnections #lifecycle #mobile # android