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

Ink

09/19/2023, 8:28 AM
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.
Copy code
@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)
                )
        )
    }
}
a

Alexander Zhirkevich

09/19/2023, 8:31 AM
You can use box container instead of column, make gray spacer fill max height and align green spacer to the bottom.
👍 2
i

Ink

09/19/2023, 8:33 AM
Will be there any performance difference between Box where there is Spacer on the top vs two spacer in Column?
a

Alexander Zhirkevich

09/19/2023, 8:34 AM
No
i

Ink

09/19/2023, 8:34 AM
ok, thank you
a

Alexander Zhirkevich

09/19/2023, 8:37 AM
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)
v

Vlad

09/19/2023, 8:50 AM
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.
Copy code
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
                    )
            )
        }
1
i

Ink

09/19/2023, 3:21 PM
thanks