Hello I'm a little newbie with jetpack compose, wh...

# compose

[owen sahagun]

Hello I'm a little newbie with jetpack compose, what is the best way of creating adaptive layouts, currently I'm using box to create my design, but using a lot of spacers with (pd) and all my box sizes with (pd) also but I feel is it very hardcoded, and also 0 adaptive. what is the best approach to create UI for adaptivity and location of the elements

[Kirill Grouchnikov]

What kind of an adaptivity are you looking for? A single screen that scales from a small phone to the large tablet to a very large Chrome OS screen? A screen that has significantly different arrangements of its content between those?

Or something at a smaller scale, between small, medium and large phones where you tweak some paddings, margins and spacings?

[owen sahagun]

the first adaptivity, the one that works in all type of screens, so the design looks similar in most of the devices

[Kirill Grouchnikov]

That would very much depend on how you see your content being laid out on that wide variety of screen sizes - from 4" all the way to 50" monitors.

https://m3.material.io/foundations/layout/canonical-layouts/overview might be a good start in terms of how Material Design “sees” adaptive designs. Once you decide on the direction (maybe combining multiple smaller pieces that each take a single screen on a small device into multi-pane layout on a large device), then you will be able to ask more specific questions.

[Kirill Grouchnikov]

In terms of specific Compose implementation, that page links to https://developer.android.com/jetpack/compose/layouts/adaptive where you will find some of the relevant APIs

[Pablichjenkov]

Vaguely speaking you can have a root composable named LayoutSelector that reacts to changes in size. You can use onSizeChanged modifier or others. Have a layout for each dimension you support. When the size changes, from the root composable select the appropriate layout, passing it the App State.

[Joel Denke]

The component I used most for this is two pane layout. Can combine with window classes.
https://google.github.io/accompanist/api/adaptive/com.google.accompanist.adaptive/-two-pane.html

https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/package-summary

[owen sahagun]

thx to all, I'll be reading everything that you share 😄