what is the attribute of the moddifier that i need to change to make the corners rouned and the width a little smaller? jetpack Compose - kotlin

Question

my question is different from the suggested question that is similar because I am making the voting bar change in effect from the parameters of the voting percentage. therefore I need the left column to change dynamically in size and the right column to change dynamically in size therefore I find it difficult to implement with a Stroke object.
what is the attribute of the modifier that I need to change to make the corners round? and the width a little smaller of a Row() element
I am trying to make an android app with jetpack compose,
in the process of implementing the Voting bar which is the bar in the middle with the 2 colors of red and blue.
I can't find the correct attribute to modify so the corners of the bar will be rounded and make the width different from .fillMaxWidth() in the modifier so I ended up using it until I will find a solution.
if you have any insights :) thanks in advance ~!
Figma Design
implementation in android
my code
#Composable
fun VotingBar(
modifier: Modifier = Modifier, leftyPercent: Int, rightyPercent: Int
) {
var leftyPercentWeight: Float = (leftyPercent / 10).toFloat()
var rightyPercentWeight: Float = (rightyPercent / 10).toFloat()
Row(
modifier = modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White)
.border(1.dp, Color.Black, CircleShape)
) {
Column(
// add rounded corners to the left side
modifier = Modifier
.background(Color(0xFFA60321))
.height(50.dp)
.weight(leftyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
}
Column(
modifier = Modifier
.background(Color(0xFF03588C))
.height(50.dp)
.weight(rightyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
// add rounded corners to the right side
) {}
}
Row(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Row {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFFA60321))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Right $rightyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
)
}
Row() {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFF03588C))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Left $leftyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
)
}
}
}
I followed the 5 steps tutorial at the leading developer's website but I fill still a beginner.

Answer 1

You can wrap the 2 Row in a Column applying a padding modifier (to avoid the full width) and an horizontalAlignment.
Then in the 1st Row apply a clip modifier to achieve the rounded shape.
Something like:
val shape = RoundedCornerShape(32.dp)
Column(
Modifier.padding(16.dp),
horizontalAlignment= Alignment.CenterHorizontally
) {
Row(
modifier = modifier
.fillMaxWidth()
.height(32.dp)
.background(Color.White)
.clip(shape)
.border(1.dp, Color.Black, shape)
) {
Column(
// add rounded corners to the left side
modifier = Modifier
.background(Color(0xFFA60321))
.weight(leftyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
}
Column(
modifier = Modifier
.background(Color(0xFF03588C))
.weight(rightyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
// add rounded corners to the right side
) {}
}
//2nd Row
}