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?

machfour · Answer 1 · 2023-02-14T11:43:08.943

16

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
}

Update 2023-02-13

Looks like some relevant features have been added to Android Studio 2022.1 Electric Eel: Use Compose Preview with different devices.

For now, the interactive mode feature has to be enabled manually (File > Settings > Experimental > Jetpack Compose > Check 'Enable @Preview picker').

edited Feb 14 '23 at 11:43

answered Jul 20 '21 at 13:02

machfour

1,929
2
14
21

3

device = Devices.AUTOMOTIVE_1024p, widthDp = 1024, heightDp = 720 works better – kissed Sep 15 '21 at 15:55
This should be marked as the accepted answer. – Sun Bee Jun 29 '23 at 18:20
This worked perfectly for me and should be marked as the accepted answer. Thank you. – Sun Bee Jun 29 '23 at 18:21
`device = Device.TABLET` also works – Pnemonic Aug 03 '23 at 06:53

score 3 · Answer 2 · answered Nov 23 '22 at 20:42

3

Based on the new specs this can be done with:

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

answered Nov 23 '22 at 20:42

Javier

1,469
2
20
38

3

There's no `orientation` attribution in device argument. – c-an Apr 28 '23 at 05:56

How to preview Compose layouts in landscape mode

2 Answers2

Update 2023-02-13