I m trying to create a non lazy carousel i e Scrollable Row

Question

I m trying to create a non lazy carousel i e Scrollable Row with each item being about 90 of the full screen width I have a small sample showing that I m failing Anyone that can spot my issue

Colton Idle · Answer

```Box modifier = Modifier fillMaxWidth border 1 dp Color Red Row modifier = Modifier height IntrinsicSize Min width IntrinsicSize Max horizontalScroll rememberScrollState Button onClick = TODO modifier = Modifier fillMaxHeight fillMaxWidth 9f border 1 dp Color Green Text text = One Button onClick = TODO modifier = Modifier fillMaxHeight fillMaxWidth 9f border 1 dp Color Green Text text = Two nTwo nTwo Button onClick = TODO modifier = Modifier fillMaxHeight fillMaxWidth 9f border 1 dp Color Green Text text = Three ```

Colton Idle · Answer

No matter what I do I can t get each item to take up the full width

Zach Klippenstein (he/him) [MOD] · Answer

i don t think this makes sense ``` width IntrinsicSize Max horizontalScroll rememberScrollState ``` `horizontalScroll` will measure its child with infinite max width and the parent box is already `fillMaxWidth` so i m not sure what you re trying to achieve with this combination of modifiers

Zach Klippenstein (he/him) [MOD] · Answer

Also side note any time you re wrapping a single composable with a `Box` just to apply modifiers you can just move the outer modifiers to the start of the inner component s modifier chain

Zach Klippenstein (he/him) [MOD] · Answer

~I m not sure using `height IntrinsicSize Max ` makes sense either when all the children are `fillMaxHeight `~ Never mind i just forgot the point of intrinsics man facepalming skin tone 2

Zach Klippenstein (he/him) [MOD] · Answer

The reason the `fillMaxWidth` isn t working on the children is because `horizontalScroll` causes its layout node to measure with infinite width and 90 of infinity is still infinity

Zach Klippenstein (he/him) [MOD] · Answer

If you use a lazy row you could use `fillParentMaxWidth`

Zach Klippenstein (he/him) [MOD] · Answer

which you can do manually here with a custom layout or `BoxWithConstraints` but i also don t see a reason not to just use a lazy row

Colton Idle · Answer

SO the reason why I can t use a lazy row is because I need all items in the carousel to be the height of the tallest item in the carousel I do have a guarantee that the carousel wont be more than like 5 items This is my attempt at refactoring my lazyRow into just a regular row unfortunately

Colton Idle · Answer

Unless I can somehow get LazyRow + all items are the height of the tallest item

Colton Idle · Answer

WHich would be asweome because then I could use chris banes snapper lib

Zach Klippenstein (he/him) [MOD] · Answer

ah right that makes sense That seems fundamentally impossible can t know the height of all items without composing them which is the definitely of not lazy

Colton Idle · Answer

Well glad you could sanity check that thinking smile So now as long as I can get these items 90 of the screen width and have height of all the same size then im golden With your help my items are now 90 still working on the height part

Colton Idle · Answer

Current status ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth border 1 dp Color Red horizontalScroll rememberScrollState Button onClick = TODO modifier = Modifier width boxWithConstraintsScope maxWidth times 9f border 1 dp Color Green Text text = One Button onClick = TODO modifier = Modifier width boxWithConstraintsScope maxWidth times 9f border 1 dp Color Green Text text = Two nTwo nTwo Button onClick = TODO modifier = Modifier width boxWithConstraintsScope maxWidth times 9f border 1 dp Color Green Text text = Three ```

Zach Klippenstein (he/him) [MOD] · Answer

any reason not to use `maxWidth 0 9f`

Colton Idle · Answer

I guess not I just started chaning method calls because I didn t know if it was dp for whatever reason and i know its easy to use method calls when operating on dps

Colton Idle · Answer

Updated to instead of `times` Is there a reason not to use times Is it more overhead because its a method call or something

Zach Klippenstein (he/him) [MOD] · Answer

no it compiles to the exact same bytecode

Zach Klippenstein (he/him) [MOD] · Answer

but it s more idiomatic to just use the ` ` operator if you re multiplying

Zach Klippenstein (he/him) [MOD] · Answer

it s totally just a style nit stuck out tongue

Colton Idle · Answer

your nit fix will live on forever in my codebase smile

Colton Idle · Answer

So this is almost perfect but the height of every item is like 2 5x of what it should be for some reason Anything in here look terribly off at this point ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth border 1 dp Color Red height IntrinsicSize Min horizontalScroll rememberScrollState Button onClick = TODO modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = One Button onClick = TODO modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Two nTwo nTwo Button onClick = TODO modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Three ```

Colton Idle · Answer

above snippet running on a device

Zach Klippenstein (he/him) [MOD] · Answer

I m not sure but maybe it has something to do with `Button` not propagating intrinsics correctly What happens if you replace the buttons with just their text and move the button modifiers to `Text`

Colton Idle · Answer

if I take away the fillMaxHeights and the height Intrinsic Min then I get this though

Colton Idle · Answer

Oh good point about button Let me try your sugg

Zach Klippenstein (he/him) [MOD] · Answer

so i was wrong earlier parent using intrinsic min and child using fill max height absolutely makes sense because the parent will communicate the sibling s heights through the max constraint i believe And fillMaxHeight shouldn t affect the intrinsic height a component reports

Zach Klippenstein (he/him) [MOD] · Answer

intrinsics always turn me around until i think through them really hard sweat smile

Colton Idle · Answer

Removed the button and just used a box instead Not perfect but much closer to what it should be

Colton Idle · Answer

Intrinsics make my head hurt I was like No problem I ll convert this lazy row into a regular row carousel Now it s been 3 hours

Colton Idle · Answer

This is the code that repros the above Not sure why there is space after the Two Two Two but getting closer to my desired result ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth height IntrinsicSize Min border 1 dp Color Red horizontalScroll rememberScrollState Box modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = One Box modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Two nTwo nTwo Box modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Three ```

Zach Klippenstein (he/him) [MOD] · Answer

So `Button` is `Box Row ` internally I would think both of those would just forward intrinsic height but maybe not

Colton Idle · Answer

ok officially out of ideas This is my result

Colton Idle · Answer

```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth height IntrinsicSize Min border 1 dp Color Red horizontalScroll rememberScrollState Text text = One modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Two nTwo nTwo modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Three modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green ```

Colton Idle · Answer

I m going to downgrade compose from 1 1RC and see if I get a diff result

Zach Klippenstein (he/him) [MOD] · Answer

wow it s <https cs android com androidx platform frameworks support + androidx main compose foundation foundation layout src commonMain kotlin androidx compose foundation layout RowColumnImpl kt l=716 769 drc=9f93a0cca907d5cdf0af6159a1ad96c647306e70|complicated>

Zach Klippenstein (he/him) [MOD] · Answer

if you replace the child `Box` components in your second last code snippet with `Row`s does it break again

Colton Idle · Answer

If I replace the Boxes with Rows I get the same result as the last screenshot I sent

Zach Klippenstein (he/him) [MOD] · Answer

which is still wrong correct

Colton Idle · Answer

Yeah I would expect the red line to match up with the bottom Two

Colton Idle · Answer

Maybe the issue is with the new line

Zach Klippenstein (he/him) [MOD] · Answer

There s no other child that is that full height

Zach Klippenstein (he/him) [MOD] · Answer

and how much height space is available

Colton Idle · Answer

Nope End result should be this ```One Two Three Two Two```

Colton Idle · Answer

Looks like this though ```One Two Three Two Two ```

Colton Idle · Answer

I m somehow convinced its the newline in this example though

Colton Idle · Answer

nope same thing with this code where there are no newlines ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth height IntrinsicSize Min border 1 dp Color Red horizontalScroll rememberScrollState Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = One Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Two Text text = Two Text text = Two Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Three ```

Colton Idle · Answer

added more borders to debug something is def off ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row modifier = Modifier fillMaxWidth height IntrinsicSize Min border 1 dp Color Red horizontalScroll rememberScrollState Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f padding 4 dp border 1 dp Color Green Text text = One Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Two Modifier border 1 dp Color Cyan Text text = Two Modifier border 1 dp Color Cyan Text text = Two Modifier border 1 dp Color Cyan Column modifier = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f border 1 dp Color Green Text text = Three ```

Colton Idle · Answer

Weird that the first item in the row seems to have a proper height but the second and third items are funky

Zach Klippenstein (he/him) [MOD] · Answer

huh so i got it working but for some reason i needed a `wrapContentHeight` before the `height IntrinsicSize Min ` or else the row and all the buttons fill the entire height

Zach Klippenstein (he/him) [MOD] · Answer

Wrong ``` Row Modifier wrapContentHeight height IntrinsicSize Min Button onClick = Modifier fillMaxHeight Text one Button onClick = Modifier fillMaxHeight Text two ntwo ntwo Button onClick = Modifier fillMaxHeight Text three nthree ```

Zach Klippenstein (he/him) [MOD] · Answer

Right ``` Row Modifier wrapContentHeight height IntrinsicSize Min Button onClick = Modifier fillMaxHeight Text one Button onClick = Modifier fillMaxHeight Text two ntwo ntwo Button onClick = Modifier fillMaxHeight Text three nthree ```

Zach Klippenstein (he/him) [MOD] · Answer

i left out the width stuff but i don t think that should matter

Colton Idle · Answer

woah wrapContentHeight

Colton Idle · Answer

hm so is this a compose bug or just how it works

Zach Klippenstein (he/him) [MOD] · Answer

I m not sure actually

Colton Idle · Answer

Something weird too that might point to this being a bug is that this code ```Row modifier = Modifier wrapContentHeight height IntrinsicSize Min border 1 dp Color Red horizontalScroll rememberScrollState Column modifier = Modifier fillMaxHeight padding 4 dp border 1 dp Color Green Text text = One Column modifier = Modifier fillMaxHeight border 1 dp Color Green Text text = Two Modifier border 1 dp Color Cyan Text text = Two Modifier border 1 dp Color Cyan Text text = Two Modifier border 1 dp Color Cyan Column modifier = Modifier fillMaxHeight border 1 dp Color Green Text text = Three ``` Leads to this What s weird is that the heights are not the same of Two and Three They start at the top so the baseline of the top three text labels aren t in a single line

Colton Idle · Answer

Ah crap I had an extra padding on the first column LMAO okay probably a false alarm there whooops

Colton Idle · Answer

Crap now if I wrap it with a simple boxWithConstraints then it breaks again

Colton Idle · Answer

```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this Row Modifier wrapContentHeight height IntrinsicSize Min horizontalScroll rememberScrollState Button onClick = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f Text one Button onClick = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f Text two ntwo ntwo Button onClick = Modifier fillMaxHeight width boxWithConstraintsScope maxWidth 9f Text three nthree ``` I added boxWithConstraints and a width to each item and a horizontal scroll and its back to the previous behavior seemingly

Colton Idle · Answer

Going to try mashing on this for a little bit more and ill see what happens

Colton Idle · Answer

alright so cue spongebob 5 hours later cut scene

Colton Idle · Answer

nothing makes sense anymore This code produces this ```var blah by remember mutableStateOf 0 dp BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this blah = boxWithConstraintsScope maxWidth Row Modifier wrapContentHeight height IntrinsicSize Min horizontalScroll rememberScrollState Button onClick = Modifier fillMaxHeight Text one Button onClick = Modifier fillMaxHeight Text two ntwo ntwo Button onClick = Modifier fillMaxHeight Text three nthree ```

Colton Idle · Answer

note in the above code I dont wrap the row with the BoxWithConstraints

Colton Idle · Answer

once I change the width of the buttons the height also changes ```var blah by remember mutableStateOf 0 dp BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this blah = boxWithConstraintsScope maxWidth Row Modifier wrapContentHeight height IntrinsicSize Min horizontalScroll rememberScrollState Button onClick = Modifier fillMaxHeight width blah 9f Text one Button onClick = Modifier fillMaxHeight width blah 9f Text two ntwo ntwo Button onClick = Modifier fillMaxHeight width blah 9f Text three nthree ```

Colton Idle · Answer

I quit for the night Opened a bug with a crazy simple repro case as well as some screenshots Hopefully someone can chime in <https issuetracker google com issues 213924413> Tomorrow I will look for a workaround I gotta ship this asap and the ios team is already done sob

Mihai Popa · Answer

Hi slightly smiling face what you want is to put the `horizontalScroll` before `height` on `Row` So just ```Row Modifier horizontalScroll rememberScrollState height IntrinsicSize Min ```

Mihai Popa · Answer

Having a width constraint the screen width when calculating the min intrinsic height messes with the calculation in this scenario Did not look to understand exactly why but it might be WAI will look closer at the bug you filed soon hopefully

Mihai Popa · Answer

Also looking at your code I would suggest moving the `Row` inside the `BoxWithConstraints` This is the intended usage and will not introduce a 1 frame delay between the first measurement and the drawing of the buttons

Colton Idle · Answer

< Mihai Popa> it worked ALL IS RIGHT WITH THE UNIVERSE For real tho Thank you and < Zach Klippenstein he him MOD > so much This was driving me crazy This is what I ended up with ```BoxWithConstraints modifier = Modifier fillMaxWidth val boxWithConstraintsScope = this val blah = boxWithConstraintsScope maxWidth 9f Row Modifier horizontalScroll rememberScrollState height IntrinsicSize Min Box Modifier width blah fillMaxHeight border 1 dp Color Green Text one Box Modifier width blah fillMaxHeight border 1 dp Color Green Text two ntwo ntwo Box Modifier width blah fillMaxHeight border 1 dp Color Green Text three nthree ``` As a final question Is there really no other way to get the 90 width besides using BoxWithConstraints I ve heard BWC isn t the best thing to use if its not necessary so I m trying to make sure there isn t something else I can do

Zach Klippenstein (he/him) [MOD] · Answer

There definitely is although it s a little more boilerplate for a one off You could provide a custom layout Modifier for your children that adjusts the constraints based on the parent size and get the parent size via `onSizeChanged` or another custom layout around the parent

Colton Idle · Answer

Oof Custom layout Not today gotta get this PR in

Colton Idle · Answer

^ That s def not the right attitude as I know custom layouts are way easier in compose and not as scary as view land but I can make the release train with the advice from Mihai lol

dimsuz · Answer

sigh I thought this thread would save me but it doesnt I ve done everything like Colton demonstrated in the last snippet and in my case all row items are still cut off at bottom and don t fill in

Colton Idle · Answer

Show code

dimsuz · Answer

a bit later was coding in anger slightly smiling face It seems my problems stem from the fact that I have long texts which are wrapped and compose continues to calculate intrinsic height as though the texts are not wrapped gt ends up with smaller height I e in your example if you hadn t ` n` s but instead had a really long text which would result in wrapped 2 3 lines I m planning to try to come up with minimal example a bit later Thanks for the thread

dimsuz · Answer

Done some digging posted sample into a new thread <https kotlinlang slack com archives CJLTWPH7S p1643674208275499>