A modern programming language that makes developers happier.

kotlinlang

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...

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.

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...

Screenshot_20200910_173219.png

Screenshot_20200910_173139.png

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

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

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

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

TestingGridView.kt.txt

Thanks for your reply. <@U0KMMQA20>. 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! :-)

<@U19052487> Sounds good, I guess I could use them for the whole layout? :slightly_smiling_face:

Yeah here is a quick and messy example using ConstraintLayout:

Squares_kt.kt

image.png

probably not the cleanest way to do it tbh

<@U19052487> Many thanks, I'll give this a try! :+1::slightly_smiling_face:

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()
) {```

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.

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?