I have a box with a `.fillMaxWidth` modifier. In that box, I have another box and I want it to be th...

# compose

[Nat Strangerweather]

I have a box with a .fillMaxWidth modifier. In that box, I have another box and I want it to be the width of the parent box divided by 7. How can I get the width of the parent Box, or that .fillMaxWidth value?

[nitrog42]

this one is pretty easy fortunatelly, fillMaxWidth() take a float that represent a fraction of the max width your "sub"box can take
so you can just do:

Box {
   Box(Modifier.fillMaxWidth(1/7f)) {
   }
}

[Nat Strangerweather]

Oooh I see! lol, thanks for that!

[nitrog42]

I'm not 100% sure it will works so keep us updated 😄

[Nat Strangerweather]

hmm, I don't think it's working in my particular case. My code looks like this:

Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(500.dp)
            .padding(20.dp)
            .background(Color.DarkGray)
    ) {
        Column() {
    repeat(7){
        Box(
            Modifier
                .padding(3.dp)
                .background(Color.Magenta, shape = RoundedCornerShape(5.dp))) {

        }

[Nat Strangerweather]

And basically the size of my squares need to be the width of the parent Box divided by 7

[nitrog42]

oh then you can just use Modifier.weight(1f) on your sub box

[nitrog42]

weight is used to "share" the available space with other views in the layout

[nitrog42]

if each one of your views has a weight of 1, they will all split the available space (the width of your parent) equally

[nitrog42]

sorry I forgot that it will only works in a Row or a Column

[Nat Strangerweather]

It is a Column though

[nitrog42]

yes, I just saw that you were using that, the issue will be that it will be the height that is splitted equally, not the width

[Nat Strangerweather]

oh damn

[nitrog42]

let me check

[nitrog42]

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(500.dp)
        .padding(20.dp)
        .background(Color.DarkGray)
) {
    Column {
        repeat(7) {
            Box(
                Modifier
                    .padding(3.dp)
                    .height(50.dp)
                    .fillMaxWidth(1/7f)
                    .background(Color.Magenta, shape = RoundedCornerShape(5.dp))
            ) {
            }
        }
    }
}

this should work

[nitrog42]

be aware that as Box as no "content", even by doing .background(Color.Magenta, shape = RoundedCornerShape(5.dp)) your child boxes won't be displayed as you need to fix the height of each of them, or put content in it (text, image)

[Nat Strangerweather]

ok thanks for this. I wanted their height to be the same as their width. Is there any way for this to happen?

[nitrog42]

yes and this is one of my favorite feature 😄 :

Box(
    Modifier
        .padding(3.dp)
        .fillMaxWidth(1 / 7f)
        .aspectRatio(1f)

[Nat Strangerweather]

Ah brilliant, thanks!

[nitrog42]

(in case you don't know : order of modifiers matters)

[Nat Strangerweather]

It worked in any case! 👏

[MaxUt]

@nitrog42 any idea how to do the same with rows ? They seems to take the fraction of space left