Hello, could someone please help me understand why my columns are not the same size, considering I a...

# compose

[Nat Strangerweather]

Hello, could someone please help me understand why my columns are not the same size, considering I am using the same code for them? 🧵

[Nat Strangerweather]

[Nat Strangerweather]

Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(0.75f)
                .padding(20.dp)
                .background(Color.DarkGray)
                .clipToBounds()
        ) {
            Row(
                Modifier
                    .fillMaxSize(), horizontalArrangement = Arrangement.SpaceBetween
            ) {

                Column() {
                    repeat(7) {
                        Tile()
                    }
                }
                Column() {
                    repeat(7) {
                        Tile()
                    }
                }
            }
        }

[Chris Sinco [G]]

Can you include the code for Tile Composable as well?

[Chris Sinco [G]]

Works fine when using Icon

[Nat Strangerweather]

Sure, here it is:

[Nat Strangerweather]

fun Tile() {
    val coroutineScope = rememberCoroutineScope()
    val offsetX = remember { Animatable(0f) }
    val offsetY = remember { Animatable(0f) }

    Box(
        Modifier
            .offset {
                IntOffset(
                    offsetX.value.roundToInt(),
                    offsetY.value.roundToInt()
                )
            }
            .padding(3.dp)
            .fillMaxWidth(1 / 7f)
            .aspectRatio(1f)
            .clip(RoundedCornerShape(5.dp))
            .background(Color.Magenta)
            .draggable(
                state = rememberDraggableState { delta ->
                    coroutineScope.launch {
                        offsetX.snapTo(offsetX.value + delta)
                    }
                },
                orientation = Orientation.Horizontal,
                onDragStopped = {
                    coroutineScope.launch {
                        offsetX.animateTo(
                            targetValue = 0f,
                            animationSpec = tween(
                                durationMillis = 1000,
                                delayMillis = 0
                            )
                        )
                    }
                }
            ))
    {

    }

[Olivier Patry]

.fillMaxWidth(1 / 7f)

Not sure but when computing this, first column have 100% of the width but for second one only remains 100% minus the width took by first column? (then tile being smaller with 1:1 aspect ratio, less height took as well).
I don't know if this is the way layout are done though, just a thought.

[Sergey Y.]

I suppose the different size is due to this fillMaxWidth(1/7f), once you added the first column, the available horizontal space is reduced by its size, and the width of the second column is within the remaining available space.

[Olivier Patry]

Maybe you should apply the 1/7f to the parent columns and use fillMaxWidth() on your tiles?

[Nat Strangerweather]

I see, thanks, makes sense. I can't do that though, because when I drag my tiles, they will disappear because the parent column will cut them (I guess).

[Nat Strangerweather]

I'll give it a try though, in case I'm wrong.

[Olivier Patry]

You could also inject the expected size from parent to children.

@Composable
fun Mychild(someData: String, modifier: Modifier = Modifier) {
  Box(modifier) {
  }
}

And then:

@Composable
fun Myparent() {
  Mychild("blah", Modifier.someproperty())
}

[Olivier Patry]

This might allow you to inject layout properties shared by both of your columns

[Nat Strangerweather]

Ok, your first suggestion actually makes no difference if I have understood it properly. But I will try this last option, many thanks!

[Nat Strangerweather]

Actually, your first suggestion did work. I just had to use 1/6f for the second column!

[Olivier Patry]

the 1/6 of remaining width doesn't match 1/7 of initial width 🤔

[Nat Strangerweather]

basically it removes the width taken by the first column I guess.

[Olivier Patry]

Indeed I did the math and it matches 😅

[Olivier Patry]

I'll had to go back to school

[Olivier Patry]

but it's far from being obvious 😛

[Olivier Patry]

I guess there would be more straight forward way to achieve what you want

[Nat Strangerweather]

Yes, I'm sure, I am really struggling with this... 😁

[Nat Strangerweather]

But it works hey