Hi. This is probably super easy answer. How do you handle insets for compose? Especially with round ...

# compose-wear

[Sandor Bokor]

Hi. This is probably super easy answer. How do you handle insets for compose? Especially with round devices. Is there anything better than fillMaxRectangle? Have a relatively simple column with some text and buttons. The column is scrollable and it has Spacing at the top and bottom assumed to prevent the button cut off. This seemed to work until there are more wear devices (the code is 7-8 months old) but that solution doesn't scale and the button gets cut off. What is the recommended way of dealing with this? Using ScalingLazyColumn instead of Column?

[yschimke]

You should be using ScalingLazyColumn on Wear, but that said it doesn't magically solve this problem.

[yschimke]

There is a guide here https://developer.android.com/design/ui/wear/guides/behaviors-and-patterns/clipping

[yschimke]

My advice is use the Horologist responsive APIs for this.

[yschimke]

https://google.github.io/horologist/compose-layout/#scalinglazycolumn-responsive-layout

[yschimke]

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.Chip
    )
)

ScalingLazyColumn(
    modifier = Modifier.fillMaxSize(),
    columnState = columnState,
) {
    item {
        ResponsiveListHeader(contentPadding = firstItemPadding()) {
            Text(text = "Main")
        }
    }
    items(10) {
        Chip("Item $it", onClick = {})
    }
}

[yschimke]

It will adapt to the device and make sure content is not cut off.

[yschimke]

And try to avoid fillMaxRectangle 🙂

[Sandor Bokor]

Nice. Thanks for the suggestion. Yeah fillMaxRectangle kind of looked awful since the usable space was so small. Probably that is why we have spacing in a regular column instead.