1

I'm trying to draw a Card in Jetpack Wear Compose with a border containing up to 4 colors (one for each side), but without gradient.

I tried to upload an image for illustration, but due to my low rep I cannot post images.

Does anyone know a solution for this?

Zsolti
  • 13
  • 2

1 Answers1

1

I can't figure out a way to do it with rounded borders, but this works if it's a standard rectangle:

Card(
    modifier = Modifier
        .height(itemHeight)
        .width(itemWidth),
) {
    Box(Modifier.fillMaxSize()) {
        Column {
            //your content
        }
        Canvas(Modifier.fillMaxSize()) {
            val canvasWidth = size.width
            val canvasHeight = size.height
            drawLine( //top line
                start = Offset(x = 0f, y = 0f),
                end = Offset(x = canvasWidth, y = 0f),
                strokeWidth = 3f,
                color = Color.Blue
            )
            drawLine( //bottom line
                start = Offset(x = 0f, y = canvasHeight),
                end = Offset(x = canvasWidth, y = canvasHeight),
                strokeWidth = 3f,
                color = Color.Green
            )
            drawLine( //left line
                start = Offset(x = 0f, y = 0f),
                end = Offset(x = 0f, y = canvasHeight),
                strokeWidth = 3f,
                color = Color.Magenta
            )
            drawLine( //right line
                start = Offset(x = canvasWidth, y = 0f),
                end = Offset(x = canvasWidth, y = canvasHeight),
                strokeWidth = 3f,
                color = Color.Red
            )
        }
    }
}
OhWittmannOne
  • 123
  • 6
  • 1
    Instead of using a `Canvas`, you can apply the `drawBehind` modifier in the `Card`. It has a `DrawScope` like a `Canvas`. If you want to draw rounded corners you can use the `drawArc` method. You can find an example in the `topBorder` modifier here: https://stackoverflow.com/questions/74740835/how-to-draw-border-around-the-lazycolumn-items-in-android-compose/74752272#74752272 – Gabriele Mariotti Mar 02 '23 at 21:52
  • 1
    Thanks for the both of you, I managed to do it with your help. :-) – Zsolti Mar 05 '23 at 20:33