Hi everyone. I want to ask if it would be possible...

# compose

[Jorge Martín]

Hi everyone. I want to ask if it would be possible to build a layout similar to the message composer in the Slack Android app in compose (I attached a video displaying the behavior), a layout that:

1. Grows automatically when the height of its TextField/EditText changes, until a certain max height.
2. Can be dragged using the drag handle to a full screen height and, while dragging and in full screen expanded state, its contents will switch from ‘wrap content’ mode to ‘fill height’.
3. Can be returned to a non-full screen mode after that with a smooth animation.
So far, I’ve got points 1 and 2 working with some not-so-great code, by taking into account the expanded and dragging status of the wrapping bottom sheet component to decide whether the sheet contents should wrap or expand to its max size and then measuring that in a SubcomposeLayout , but the problem comes with point 3: to return to the ‘collapsed’ state I previously save the last height of the component in that state and I use it as an anchor point in the bottom sheet, but if the contents of the text field have changed in height, this anchor will be wrong and the animation will break.

I solved this issue in the past with Android views by changing the layout params of the sheet contents from wrap_content to fill_parent and measuring both states when I needed it, but I’m not sure if such a thing is possible in Compose: SubcomposeLayout will only let you measure a node once, and MultiMeasureLayout won’t let me modify the params of the composable sheet contents to make them switch from one mode to the other.

Does anyone have any suggestion on how this could be done? I guess in a worst case scenario I could have 2 measurables, duplicating the sheet contents, one for the wrap mode and another one for the full screen/expanded mode, but it’s not easy to handle and seem expensive performance-wise.

2023-11-10 22.46.54.mp4

[efemoney]

What of an empty Text/TextField composable with changing minLines and the exact same styling and then the “real” TextField is allowed to be whatever height (by way of wrapContentHeight). Could remove the need to even monitor the bottom sheet height.

[Jorge Martín]

That’s a good suggestion, but sadly the actual component we’re using is an AndroidView wrapping an EditText with some quite complex logic. But given my last tests, moving to a Composable that can just quickly render the text and switching between 2 of these composables as you suggested might be the only way to get this right. Thanks!