adjustable width of a surface to be able to put cards next to one another

Question

Thinking of a way to deal cards at the bottom of the screen, I know I need to calculate to offset so that the cards will be set next to one another. is there a way to have a trigger to when I deal a card, that the space is evaluated (remember) and tiimed the number of cards so that a suitable offset will be made? I took some pictures of what I'm trying to achieve (mockups) 1 card 2 cards and even more mockups 3 cards 4 cards

@Composable
fun ScreenContent() {
    val width = (Resources.getSystem().displayMetrics.widthPixels / Resources.getSystem().displayMetrics.density).roundToInt()
    val height = (Resources.getSystem().displayMetrics.heightPixels / Resources.getSystem().displayMetrics.density).roundToInt()
    val offset = (width / 6)
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        CustomColumnSurface(1f) {}
        CustomColumnSurface(3f, color = Color.White, padding = 16.dp) {
            Row(
                modifier = Modifier
                    .fillMaxWidth(),
            ) {
                CustomRowSurface(1f) {}
                CustomRowSurface(1f) {}
                CustomRowSurface(1f) {}
            }
        }
        CustomColumnSurface(1f) {
            val painter = painterResource(id = R.drawable.clubs_2)
            val description = "clubs 2"
            val last = 1
            var space = (width/(last+1))-((135*last)/2)
            println(space)
            for (i in 1..last) {
                Box(modifier = Modifier
                    //.fillMaxHeight()
                    .offset(space.dp)
                ) {
                    ImageCard(
                        painter = painter,
                        contentDescription = description,
                    )
                }
                //space += (last*(135/2))
            }
        }
    }
}

user_1094333 · Answer

I found a solution for you...

val cardCounter = // number of cards you need to show.
Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
    repeat(cardCounter) {
        val singleCardOffset = 30 // card width / 2
        val totalOffset = singleCardOffset * (cardCounter - 1) / 2
        Box(
            Modifier
                .offset(x = (-totalOffset + (it * singleCardOffset)).dp)
                .size(60.dp, 100.dp) // Hardcoded card size
                .background(colors[it]) // I'm using an array of colors, 
                                        // but you're going to use the card
                                        // background
        )
    }
}

Here is the result:

You can find the full source here.

adjustable width of a surface to be able to put cards next to one another

1 Answers