CODEWITHSUNDEEP
androidandroid-jetpack-compose
lazexe
lazexe

Reputation: 369

Create Jetpack Compose Row with 10 circles inside that depends on Row width

I need to do something like this:

enter image description here

It's 10 circles views that have same width that depends on parent width.

That I have now:

Column(
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.White)
        .padding(vertical = 12.dp)
) {

    Row(
        modifier = Modifier
            .padding(horizontal = 20.dp)
            .padding(top = 12.dp)
    ) {

        for (i in 1..10) {
            Surface(
                shape = CircleShape,
                modifier = Modifier
                    .padding(horizontal = 2.dp)
                    .width(0.dp)
                    .height(29.dp)
                    .weight(1F)
                    .clip(CircleShape),
                color = surfaceColor,
                onClick = { selected = i },
            ) {

                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentSize(Alignment.Center),
                    text = "$i",
                    color = textColor,
                    style = subtitle1(),
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }

}

In this case I can set same width of circles by settings Surface weight by 1F, but I need to set height of this circles that depends on width. I'm stuck how to do this.

Upvotes: 0

Views: 935

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364634

You can use the aspectRatio modifier.
Apply to the ratio attribute your expected value.

   Surface(
        shape = CircleShape,
        modifier = Modifier
            .padding(horizontal = 2.dp)
            .width(0.dp)
            .weight(1F)
            .aspectRatio(1f)

enter image description here

Upvotes: 5

Related Questions