https://kotlinlang.org logo
#compose
Title
# compose
k

Kshitij Patil

10/28/2020, 1:07 PM
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?
a

allan.conda

10/28/2020, 1:09 PM
@Device, probably
k

Kshitij Patil

10/28/2020, 1:13 PM
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
j

jim

10/28/2020, 1:15 PM
Are you wondering about how to generally handle different screen sizes? Or how to preview them?
k

Kshitij Patil

10/28/2020, 1:15 PM
Both
j

Javier

10/28/2020, 1:17 PM

https://youtu.be/exjL2kGPngI

❤️ 1
j

jim

10/28/2020, 1:17 PM
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
👍 4
j

Javier

10/28/2020, 1:18 PM
I think this video explains what you want
👍 2
k

Kshitij Patil

10/28/2020, 1:40 PM
Thanks!
3 Views