Android Jetpack 在 Box 中组合部分边框

Question

I am trying to prepare a design in jetpack compose with a partial border on one side of the box. Here is the UI I have right now,

The background is a solid color as of now but will be replaced with a image. I want to break border on bottom left of and add some text similar to the screenshot below while keeping the background as it is.

Here is my code:

Box(modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight()) {
    Box(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color(0xFF37C7D7).copy(alpha = 0.6f)))
    Box(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Transparent)
        .padding(20.dp,30.dp)
        .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(32.dp))
    )
    Box(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Transparent)
        .padding(28.dp,38.dp)
        .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(28.dp))
    )
    Column(modifier = Modifier.statusBarsPadding()
        .fillMaxWidth()
        .fillMaxHeight().padding(20.dp,40.dp),
        verticalArrangement = Arrangement.Bottom) {
        Text(text = "this is Test",modifier = Modifier.padding(0.dp,30.dp))
    }
}

Answer 1

You could create a custom Shape , but then you have to pass the location of the text to that shape, which I think is over-engineering(unless you have a dynamic background such as an image).

Instead, you can add background color to your Text , which will much the parent background.

If your background view is just an other color, you can use ColorUtils.blendARGB to calculate output color, like this:

val parentBackground = Color.White
val cardBackground = Color(0xFF37C7D7)
val cardBackgroundAlpha = 0.6f
Box(modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight()
    .background(parentBackground)
) {
    Box(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(cardBackground.copy(alpha = cardBackgroundAlpha)))
    Box(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Transparent)
        .padding(20.dp,30.dp)
        .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(32.dp))
    )
    Box(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Transparent)
        .padding(28.dp,38.dp)
        .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(28.dp))
    )
    Column(
        verticalArrangement = Arrangement.Bottom,
        modifier = Modifier.statusBarsPadding()
            .padding(20.dp,40.dp)
            .background(Color(ColorUtils.blendARGB(parentBackground.toArgb(), cardBackground.toArgb(), cardBackgroundAlpha)))
            .align(Alignment.BottomStart)
    ) {
        Text(text = "this is Test",modifier = Modifier.padding(0.dp,30.dp))
    }
}

Result: