https://kotlinlang.org logo
#compose
Title
# compose
l

Lilly

04/26/2022, 2:39 PM
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.
Copy code
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
                )
        ) {
        }
o

Oleksandr Balan

04/26/2022, 3:15 PM
Yes 👍 I would recommend
drawBehind
for this 👇
Copy code
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
}
❤️ 3
l

Lilly

04/26/2022, 3:19 PM
Wow you are a beast 😯 this looks perfect. Thanks for your time
❤️ 1
@Oleksandr Balan Do you have an idea how to make the underline fit the remaining space?
Copy code
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)
o

Oleksandr Balan

04/26/2022, 4:45 PM
See
IntrinsicSize.Min
👀
Copy code
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)
}
❤️ 1
l

Lilly

04/26/2022, 4:46 PM
You are the best...
😅 1
❤️ 1
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?
o

Oleksandr Balan

04/26/2022, 4:51 PM
Here are docs with similar example 😄 https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements And yes, intrinsics are applied to parent container composable 👍
👍 1
3 Views