How to work with different screen configurations in compose? Like I've to support landscape mode o...

# compose

[Kshitij Patil]

How to work with different screen configurations in compose?

Like I've to support landscape mode on a 7-inch tablet as well as a portrait mode on regular 5-6 inch mobile phones. How should I @Preview for these configurations?

[allan.conda]

[allan.conda]

@Device, probably

[Kshitij Patil]

So you mean we need to handle those cases using if-else in our code or is there any solution like we used to write multiple xml files for different screen configurations and the one gets shown accordingly

[jim]

Are you wondering about how to generally handle different screen sizes? Or how to preview them?

[Kshitij Patil]

Both

[Javier]

https://youtu.be/exjL2kGPngI▾

[jim]

Got it. Yeah, to handle different screen sizes, there is a super useful widget called WithConstraints that allows you to get information about how much space is available, and decide which children you want to compose based on this information. This allows you to build responsive layouts that adjust themselves (use if or when statements, etc) and what they display based on the amount of available space.

A quick Google search brought up some a 3rd-party blog post, which I haven't read yet, but at first glance looks like a decent place to start: https://jorgecastillo.dev/jetpack-compose-withconstraints

[Javier]

I think this video explains what you want

[Kshitij Patil]

Thanks!