How to preview Compose layouts in landscape mode

Question

I'm using Android Studio Bumblebee 2021.1.1 Canary 3 + Compose 1.0-rc02, and there seems to be no easy way to force landscape mode for a preview, which includes using resources (in particular dimensions) from -land/ resource folders.

I know that this behaviour is possible in theory, because using @Preview(device = Devices.AUTOMOTIVE_1024p) will use the correct resource values. However, this is not a viable preview option as the pixel density is off compared to the default preview device. (Even when tweaking the preview width, height and font scale, the icons are still the wrong size.)

I was able to make it so that my UI code detects the landscape orientation using the following wrapper

    val lanscapeConfig = LocalConfiguration.current.apply {
        orientation = Configuration.ORIENTATION_LANDSCAPE
    }
    CompositionLocalProvider(LocalConfiguration provides lanscapeConfig) {
        // actual preview code
    }

However this doesn't fix the aforementioned issue with not getting landscape resources using dimensionResource().

Any ideas?

Answer 1

Update 2024-01-18

This feature has been implemented: Preview your UI with composable previews#Use with different devices. From Javier's answer:

@Preview(
    showSystemUi = true,
    device = "spec:width=411dp,height=891dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape"
)

---

Current workaround is to use a separate file for the landscape preview and specify device = Devices.AUTOMOTIVE_1024p, and tweak the height and width (but not the font scale).

But I hope someone can come up with a better approach which works with different device types.

@Preview(device = Devices.AUTOMOTIVE_1024p, widthDp = 720, heightDp = 360)
@Composable
fun PreviewLandscape() {
    PreviewHelper() // common preview code to all modes
}