Is this (screenshot) something I could implement w...

# compose

[Lilly]

Is this (screenshot) something I could implement with compose or should I create it as drawable? I have no idea how to make the border. Actually it's just a white border but with a pattern of red rectangles with an offset.
EDIT:
What I have so far. The problem: I would need a verticalGradient for bottom and top and a horizontalGradient for start and end.

Box(
            Modifier
                .size(256.dp)
                .border(
                    width = 16.dp,
                    brush = Brush.horizontalGradient(
                        0.0f to Color.White, 0.8f to Color.Red,
                        startX = 0f,
                        endX = 24f,
                        tileMode = TileMode.Repeated
                    ),
                    shape = RectangleShape
                )
        ) {
        }

[Oleksandr Balan]

Yes 👍
I would recommend drawBehind for this 👇

Box(
    modifier = Modifier
        .align(Alignment.Center)
        .size(128.dp)
        .drawBehind {
            val stripesPerSide = 4
            val stripesCount = stripesPerSide + (stripesPerSide + 1)
            val stripeWidth = minOf(size.width, size.height) / stripesCount
            drawRect(Color.White)
            repeat(stripesPerSide) {
                val size = Size(size.width, stripeWidth)
                drawRect(
                    color = Color.Red,
                    topLeft = Offset(0f, stripeWidth + 2 * stripeWidth * it),
                    size = size
                )
            }
            repeat(stripesPerSide) {
                val size = Size(stripeWidth, size.height)
                drawRect(
                    color = Color.Red,
                    topLeft = Offset(stripeWidth + 2 * stripeWidth * it, 0f),
                    size = size
                )
            }
        }
        .padding(8.dp)
        .background(Color.Black)
) {
    // Text
}

[Lilly]

Wow you are a beast 😯 this looks perfect. Thanks for your time

[Lilly]

@Oleksandr Balan Do you have an idea how to make the underline fit the remaining space?

Column(
                modifier = Modifier
                    .wrapContentWidth()
                    .padding(end = 12.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("km", color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Black)

                Spacer(
                    Modifier
                        .width(12.dp)
                        .height(1.dp)
                        .background(Color.White)
                )
                Text("h", color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Black)
            }

So instead of 12.dp, fit the remaining space of the wrapped container (Column)

[Oleksandr Balan]

See IntrinsicSize.Min 👀

Column(
    modifier = Modifier
        .width(IntrinsicSize.Min)
        .padding(end = 12.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("km", color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Black)
    Spacer(
        Modifier
            .fillMaxWidth()
            .height(1.dp)
            .background(Color.White)
    )
    Text("h", color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Black)
}

[Lilly]

You are the best...

[Lilly]

Unfortunately there is no documentation for IntrinsicSize. I tried IntrinsicSize.Max on the Spacer but I used it the wrong way. So IntrinsicSize always apply to parent and not to sibling right?

[Oleksandr Balan]

Here are docs with similar example 😄
https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements

And yes, intrinsics are applied to parent container composable 👍