Hello, How I can achive grey bar like on first screen? I don't know how to revert rounded corners to...

# compose

[Ink]

Hello,
How I can achive grey bar like on first screen?
I don't know how to revert rounded corners to fill space between grey spacer and green spacer.

@Composable
fun RowScope.Bar(
    maxHeight: Float,
    coloredHeight: Float,
    ) {

    Column(
        modifier = Modifier
            .padding(horizontal = 5.dp)
    ) {
        Spacer(
            modifier = Modifier
                .height(maxHeight.dp - coloredHeight.dp)
                .width(30.dp)
                .background(
                    color = ChartBackgroundGreyColor,
                    shape = RoundedCornerShape(
                        topStartPercent = 45,
                        topEndPercent = 45
                        )
                )
        )

        Spacer(
            modifier = Modifier
                .height(coloredHeight.dp)
                .width(30.dp)
                .background(
                    color = ChartBasicGreenColor,
                    shape = RoundedCornerShape(45)
                )
        )
    }
}

[Alexander Zhirkevich]

You can use box container instead of column, make gray spacer fill max height and align green spacer to the bottom.

[Ink]

Will be there any performance difference between Box where there is Spacer on the top vs two spacer in Column?

[Alexander Zhirkevich]

No

[Ink]

ok, thank you

[Alexander Zhirkevich]

You can do even simplier if it suits your use case.
You can make your column gray, clip it, and leave gray spacer transparent (or just add padding)

[Vlad]

You don't need 2 Spacers here if you saying that Green progress fills whole box.
First spaces was only defining the background colour - we can set it to the initial box.

Box(
            modifier = Modifier
                .clip(RoundedCornerShape(20.dp))
                .size(width = 60.dp, height = 300.dp)
                .background(
                    color = Color.Gray
                )
        ) {
            Spacer(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(top = 40.dp)
                    .clip(RoundedCornerShape(20.dp))
                    .background(
                        color = Color.Green
                    )
            )
        }

[Ink]

thanks