Does anyone know if there s a better way to anchor some butt

Question

Does anyone know if there s a better way to anchor some buttons at the bottom of a layout than using a column and then applying a weight The problem i m having is that if i do this ``` weight 1 0f true ``` Then the outer column is occupying the entire space that its parent is allowing it to fill This means i have to pass a variable to the weight function based on whether i want the element to occupy additional space or not I m using this inside of a modal bottom sheet and it s making my bottom sheet occupy the entire height of the screen when it doesn t really need it Code in thread

mattinger · Answer

``` Composable fun StandardTemplateLayout modifier Modifier = Modifier fullscreen Boolean = true scrollState ScrollState = rememberScrollState media Composable ColumnScope gt Unit = buttons Composable ColumnScope gt Unit = null content Composable ColumnScope gt Unit Column modifier = modifier Column modifier = Modifier testTag TestTags ScrollContainer fillMaxWidth weight 1 0f fullscreen verticalScroll scrollState horizontalAlignment = Alignment Start verticalArrangement = spacedBy 24 dp buttons let Column modifier = Modifier padding start = HorizontalPadding end = HorizontalPadding top = ButtonTopPadding bottom = ButtonBottomPadding it ```

mattinger · Answer

I m not thrilled about the fullscreen parameter having to be there I d much prefer it pay attention to the modifier If it s intrinsically sized then it wouldn t fill and if it is then make the scrollable area take up whatever area the buttons don t

mattinger · Answer

Am i better off with A constraint layout in this case

Dave Scheck · Answer

What if you made your outer column have `verticalArrangement = Arrangement Bottom` and reverse the order of your inner elements Have the buttons draw first and they should be at the bottom Then your column should draw after it and take up the remaining space right

Dave Scheck · Answer

Actually you don t need to reverse the order I tried this ``` val fullScreen = remember mutableStateOf false Column modifier = Modifier fillMaxWidth fillMaxHeight background Color Red verticalArrangement = Arrangement Bottom Column modifier = Modifier fillMaxWidth weight 1 0f fullScreen value background Color Blue Text Test Row modifier = Modifier fillMaxWidth background Color Yellow Button onClick = fullScreen value = fullScreen value Text Button ``` I think this is the toggled behavior that you re looking for based on your flag

Alex Vanyo · Answer

The reversed arrangement idea is so clever I love it

mattinger · Answer

I guess what i m looking for is kind of two fold 1 I want it to be able to intrinsically size 2 If the parent gives it more room i want the scroll area to expand to fill the space

Alex Vanyo · Answer

Do you also want 3 If the intrinsic height of the scrollable content is less than the amount of space available given by the parent the buttons should be anchored to the bottom and the scroll area should be anchored to the top

mattinger · Answer

yes

mattinger · Answer

I m trying with constraint layout but seeing odd behavior there

Alex Vanyo · Answer

Here s an approach based on the cool reversed arrangement idea ```Column Modifier height 70 dp verticalArrangement = BottomReversed This will take up space first and placed at the bottom so it won t be cut off Box Modifier background Color Red size 32 dp This will take up space third if there is still space left over after the column reaches its intrinsic size so that the scrollable column is pinned to the top Spacer Modifier weight 1f This will take up the remaining space second If there isn t enough space the column will become scrollable The Column won t expand any further than it s intrinsic size Column Modifier verticalScroll rememberScrollState Box Modifier background Color Blue size 32 dp Box Modifier background Color Green size 32 dp ```

Alex Vanyo · Answer

And then `BottomReversed` is based on the built in `Arrangement Reversed` ``` Stable val BottomReversed = object Arrangement Vertical override fun Density arrange totalSize Int sizes IntArray outPositions IntArray = placeRightOrBottom totalSize sizes outPositions reverseInput = true override fun toString = Arrangement BottomReversed internal fun placeRightOrBottom totalSize Int size IntArray outPosition IntArray reverseInput Boolean val consumedSize = size fold 0 a b gt a + b var current = totalSize consumedSize size forEachIndexed reverseInput index it gt outPosition index = current current += it private inline fun IntArray forEachIndexed reversed Boolean action Int Int gt Unit if reversed forEachIndexed action else for i in size 1 downTo 0 action i get i ```