Showing devices in a Jetpack Compose Preview

13.10.2022 — Android, Jetpack, Compose, Kotlin — 1 min read

Jetpack Compose previews are really handy and speed up development. But what about when you want to see a preview in a particular device without using an emulator?

You actually only need to add a couple of lines to achieve this. I had mostly been using previews as is until lately when I did some research about this. So say for example you have the following preview that you get when you make an empty Compose project:

1@Preview
2@Composable
3fun DefaultPreview() {
4    AppTheme {
5        Greeting("Android")
6    }
7}

This will just show as a normal preview, you'll only see the text. First you need to add showSystemUi = true to see the preview inside a device frame:

1@Preview(showSystemUi = true)
2@Composable
3fun DefaultPreview() {
4    AppTheme {
5        Greeting("Android")
6    }
7}

You might already be happy with this, but there is another step if you want to see the preview in a specific device. You need to also use the device parameter. Here's an example:

1@Preview(showSystemUi = true, device = Devices.PIXEL_3)
2@Composable
3fun DefaultPreview() {
4    AppTheme {
5        Greeting("Android")
6    }
7}

In the above example I used a Pixel 3, you do have a few options that you can use though. Here's what the source code for the Devices class looks like:

1object Devices {
2    const val DEFAULT = ""
3
4    const val NEXUS_7 = "id:Nexus 7"
5    const val NEXUS_7_2013 = "id:Nexus 7 2013"
6    const val NEXUS_5 = "id:Nexus 5"
7    const val NEXUS_6 = "id:Nexus 6"
8    const val NEXUS_9 = "id:Nexus 9"
9    const val NEXUS_10 = "name:Nexus 10"
10    const val NEXUS_5X = "id:Nexus 5X"
11    const val NEXUS_6P = "id:Nexus 6P"
12    const val PIXEL_C = "id:pixel_c"
13    const val PIXEL = "id:pixel"
14    const val PIXEL_XL = "id:pixel_xl"
15    const val PIXEL_2 = "id:pixel_2"
16    const val PIXEL_2_XL = "id:pixel_2_xl"
17    const val PIXEL_3 = "id:pixel_3"
18    const val PIXEL_3_XL = "id:pixel_3_xl"
19    const val PIXEL_3A = "id:pixel_3a"
20    const val PIXEL_3A_XL = "id:pixel_3a_xl"
21    const val PIXEL_4 = "id:pixel_4"
22    const val PIXEL_4_XL = "id:pixel_4_xl"
23
24    const val AUTOMOTIVE_1024p = "id:automotive_1024p_landscape"
25
26    const val WEAR_OS_LARGE_ROUND = "id:wearos_large_round"
27    const val WEAR_OS_SMALL_ROUND = "id:wearos_small_round"
28    const val WEAR_OS_SQUARE = "id:wearos_square"
29    const val WEAR_OS_RECT = "id:wearos_rect"
30
31    // Reference devices
32    const val PHONE = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420"
33    const val FOLDABLE = "spec:shape=Normal,width=673,height=841,unit=dp,dpi=480"
34    const val TABLET = "spec:shape=Normal,width=1280,height=800,unit=dp,dpi=420"
35    const val DESKTOP = "spec:shape=Normal,width=1920,height=1080,unit=dp,dpi=420"
36}

And here's a screenshot of what the preview window looks like once you apply showSystemUi and devices: