Could you please point me to resources about responsive layouts in Jetpack Compose? I have a UI whic...

# compose

[Nat Strangerweather]

Could you please point me to resources about responsive layouts in Jetpack Compose? I have a UI which looks right on XL screens but really huge on smaller screens. I put my layout in a Column with max width and height so I thought the layout would be responsive in that sense, but it does not appear to be the case...

[romainguy]

Can you define “responsive” here? Compose, like the existing Android UI toolkit, relies on layouts that by default will use whatever available space. So they are responsive in that sense.

[Nat Strangerweather]

Yes, it's strange though, because part of my UI is cut off when using the Nexus 4 emulator. So I don't think I am doing things right. That's why I was looking for some docs...

[Nat Strangerweather]

In Flutter I would use Media Query

[Nat Strangerweather]

but here I'm not sure

[Nat Strangerweather]

@romainguy

[romainguy]

Well it depends on the behavior you’d like to have here. Would you like a different layout on the smaller screen? In this particular case just wrapping everything in a ScrollableColumn could be enough

[Nat Strangerweather]

Thanks, I'll settle for this option. If I wanted to shrink the layout so it would fit without scrolling, what would I use? @romainguy

[Nat Strangerweather]

I guess constraints

[Zach Klippenstein (he/him) [MOD]]

Which parts of your layout do you want to shrink? Can you post your layout code?

[caelum19]

Would you like to make the squares smaller so that they fit without crowding? Constraints with percent could be a nice fit 🙂

[Nat Strangerweather]

Thanks for your reply. @Zach Klippenstein (he/him) [MOD]. Basically, I would like my layout to fit the smaller screen. I'm a beginner with JC, so do let me know if this is not the right place to ask for help! :-)

TestingGridView.kt.txt

[Nat Strangerweather]

@caelum19 Sounds good, I guess I could use them for the whole layout? 🙂

[caelum19]

Yeah here is a quick and messy example using ConstraintLayout:

[caelum19]

Squares_kt.kt

[caelum19]

[caelum19]

probably not the cleanest way to do it tbh

[Nat Strangerweather]

@caelum19 Many thanks, I'll give this a try! 👍🙂

[Zach Klippenstein (he/him) [MOD]]

You also don’t need constraint layout to do this, just don’t hard-code your sizes. So instead of

Card(
    shape = RoundedCornerShape(20.dp),
    backgroundColor = Color(0xffFFAB91),
    modifier = Modifier
        .clickable(onClick = { })
        .height(150.dp)
        .width(150.dp)
        .padding(10.dp)
) {

You could, for example, do something like:

Card(
    shape = RoundedCornerShape(20.dp),
    backgroundColor = Color(0xffFFAB91),
    modifier = Modifier
        .clickable(onClick = { })
        .padding(10.dp)
        .aspectRatio(1f)
        .fillMaxSize()
) {

[Chris Sinco [G]]

There's also the weight Modifier that helps size things relative, similar to percentage (which we don't have yet). Also the ConfigurationAmbient is available to query the device dimensions that you can use inline to decide how to size things.

[Zach Klippenstein (he/him) [MOD]]

Good point, I think fillMaxSize() might not actually work here, weight is better. Wouldn’t it be better to use WithConstraints instead of ConfigurationAmbient for this case, since it probably matters more what the constraints of this actual grid are, not the real screen size?